Customization

You can customize the <DragDropContentView /> component using style props, just like <View /> component. Here's an example of how you can customize the component when an content is being dragged over it:

export const IDragDropContentView = (props) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <DragDropContentView
      onDrop={(event) => {
        setImageData(event.assets);
      }}
      onEnter={() => {
        setIsActive(true);
      }}
      onExit={() => {
        setIsActive(false);
      }}
      onDragEnd={() => {
        setIsActive(false);
      }}
      style={[styles.container, isActive && styles.activeContainer]}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: "#2f95dc",
    borderRadius,
    overflow: "visible",
    justifyContent: "center",
    alignItems: "center",
  },
  activeContainer: {
    backgroundColor: "#95d2fc",
  },
});