react-native-drop-zone/src/js/DropZone.js

React Native module for drag-n-drop function on iOS

import * as React from "react";
import { Platform, requireNativeComponent, View, ViewPropTypes } from "react-native";
import { func, string, node, arrayOf } from "prop-types";

const DropZoneView =
  Platform.OS === "ios" ? requireNativeComponent("DropZone") : View;

export function DropZone({
  onDragEnter,
  onDragOver,
  onDragExit,
  onDragLeave,
  onProcessingDrop,
  onDrop,
  style,
  allowedDataTypes,
  children,
}) {

  const _onDragEnter = React.useCallback((event) => {
    // Check if the function is undefined
    if (typeof onDragEnter !== 'undefined'){
      onDragEnter(event.nativeEvent);
    }
  }, [onDragEnter]);

  const _onDragOver = React.useCallback((event) => {
    // Check if the function is undefined
    if (typeof onDragOver !== 'undefined'){
      onDragOver(event.nativeEvent);
    }
  }, [onDragOver]);

  const _onProcessingDrop = React.useCallback((event) => {
    // Check if the function is undefined
    if (typeof onProcessingDrop !== 'undefined'){
      onProcessingDrop(event.nativeEvent);
    }
  }, [onProcessingDrop]);

  const _onDrop = React.useCallback((event) => {
    // Check if the function is undefined
    if (typeof onDrop !== 'undefined'){
      onDrop(event.nativeEvent);
    }
  }, [onDrop]);

  return (
    <DropZoneView
      onDragEnter={_onDragEnter}
      onDragOver={_onDragOver}
      onDragExit={onDragExit}
      onDragLeave={onDragLeave}
      onProcessingDrop={_onProcessingDrop}
      onDrop={_onDrop}
      style={style}
      allowedDataTypes={allowedDataTypes}
    >
      {children}
    </DropZoneView>
  );
}

DropZone.propTypes = {
  onDragEnter: func,
  onDragOver: func,
  onDragExit: func,
  onDragLeave: func,
  onProcessingDrop: func,
  onDrop: func,
  allowedDataTypes: arrayOf(string),
  style: ViewPropTypes.style,
  children: node
}