Usage

Basic Drop Feature

export const IDragDropContentView = (props) => {
  const [sources, setSources] = useState<onDrop[] | null>(null);

  return (
    <DragDropContentView
      onDrop={(event) => {
        setSources(event.assets);
      }}
      style={styles.container}
    />
  );
};

Basic Drag Feature

You can drag images to a <DragDropContentView /> component or any other app that supports drag and drop.

const getSourceType = (source: onDrop) => {
  if (source.type.startsWith("image")) return "image";
  if (source.type.startsWith("video")) return "video";
  if (source.type.startsWith("text")) return "text";
};

export const IDragDropContentView = (props) => {
  const [sources, setSources] = useState<onDrop[] | null>(null);
  const draggableSources = sources
    ?.filter((source) => getSourceType(source) !== undefined)
    ?.map((source) => ({
      type: getSourceType(source)!,
      value: source.uri || source.base64 || source.text || "",
    }))

  return (
    <DragDropContentView
      draggableSources={draggableSources}
      style={styles.container}
    >
      {/*To display Image*/}
      <Image {...props} />
      {/*To display Video*/}
      <Video {...props} />
      {/*To display Text*/}
      <Text {...props} />

      {/*To display files, use appropriate Component (Music Player, PDF Reader, ...) */}
    </DragDropContentView>
  );
};

tip

To get more information on why uri, base64, or text are passed draggable sources, visit Here

Web Specific Caution:

• If you're using <Image /> component from react-native, you need to set draggable=true.Expo Image handles this automatically.

import { Image } from "react-native";

<Image
  {...props}
  //@ts-ignore
  draggable={true}
/>;

• If you're using <Text />, you need to set draggable=true.

import { Text } from "react-native";

<Text
  {...props}
  //@ts-ignore
  draggable={true}
/>;

This prop is not handled by default and you can to use this patch.

diff --git a/node_modules/react-native-web/dist/exports/Text/index.js b/node_modules/react-native-web/dist/exports/Text/index.js
index 8c5f79b..124f7b6 100644
--- a/node_modules/react-native-web/dist/exports/Text/index.js
+++ b/node_modules/react-native-web/dist/exports/Text/index.js
@@ -26,7 +26,8 @@ import { warnOnce } from '../../modules/warnOnce';
 var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, {
   href: true,
   lang: true,
-  pointerEvents: true
+  pointerEvents: true,
+  draggable: true,
 });
 var pickProps = props => pick(props, forwardPropsList);
 var Text = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
diff --git a/node_modules/react-native-web/src/exports/Text/index.js b/node_modules/react-native-web/src/exports/Text/index.js
index 071ae10..e22e9ab 100644
--- a/node_modules/react-native-web/src/exports/Text/index.js
+++ b/node_modules/react-native-web/src/exports/Text/index.js
@@ -37,7 +37,8 @@ const forwardPropsList = Object.assign(
   {
     href: true,
     lang: true,
-    pointerEvents: true
+    pointerEvents: true,
+    draggable: true
   }
 );

This may be fixed upstream in the future, so please check this GitHub Issue for more information.