react-native-drop-zone/src/js/DragView.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";
import DragPreview from './DragPreview';

const NativeDragView =
  Platform.OS === "ios" ? requireNativeComponent("DragView") : View;

export function DragView({
  onDragBegin,
  onDragOver,
  onDragEnd,
  dragPreview,
  context,
  style,
  children,
}) {

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

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

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

  return (
    <NativeDragView
      onDragBegin={_onDragBegin}
      onDragOver={_onDragOver}
      onDragEnd={_onDragEnd}
      dragPreview={dragPreview}
      context={context}
      style={style}
    >
      {children}
      <DragPreview>{dragPreview}</DragPreview>
    </NativeDragView>
    
  );
}

DragView.propTypes = {
  onDragBegin: func,
  onDragOver: func,
  onDragEnd: func,
  dragPreview: node,
  context: arrayOf(string),
  style: ViewPropTypes.style,
  children: node
}