React-native-drop-zone NPM

React Native Drop Zone

React Native Drop Zone makes it easy to support across-app drag-n-drop function to your iOS App! It uses UIDropInteraction & UIDragInteraciton, which makes it comprehensive and simple to use.

Features

Native iOS Drag & Drop Session Implemented in Swift
Multiple Files Dropping
Support Multiple Drag Items
Customized Preview for Dragged Items
Six Drop Events & Three Drag Events
Six Drop Item Types & Three Drag Item Types
Edit Droppable Data Types

Installation

1. Install react-native-drop-zone

npm install react-native-drop-zone --save

2. Link to the library to your project

react-native link react-native-drop-zone

3. Go to your ios folder and run

pod install

Demo

Dropping Multiple Files

Dropping Text & Image

Dragging Image

Dragging Text & URL

Customized Preview for Dragging

Run Example

1. Download Example

git clone https://github.com/WeTransfer/react-native-drop-zone.git

2. Building the JavaScript components

cd react-native-drop-zone/Example

npm install

3. Launching the Packager

npm start

4. Run the project on iPad

Open the .xcworkspace file in the ios folder. Run and build the project on XCode (iPad) to check out our example.

Requirements

Swift 5.0
iOS 11.0+

Usage

Quick Start

`Drop`

<DropZone
  onDragOver={onDragOver}
  onDrop={onDrop}
  allowedDataTypes={['text', 'url', 'image']}
>
</DropZone>

onDrop(data: {[type: string]: any}) {
  console.log(data);
}
onDragOver(point: any) {
  console.log(point);
}

`Drag`

<DragView
  context={['Hello World', 'www.apple.com']}
></DragView>

// Customized Preview
<DragView
	dragPreview={<Text>Hellow World</Text>}
  context={['Hello World']}
></DragView>

Drop Props

Name	Type	Description	Default
allowedDataTypes	`string[]`	Array of data types that are allowed in the dropping session	All Data Types
onDragEnter	`function({dropPoint: {x: number, y: number}})`	The drop session has moved into the drop interaction's view	N/A
onDragOver	`function({dropPoint: {x: number, y: number}})`	The drop session has changed	N/A
onDragLeave	`function()`	The drop session has moved out of the drop interaction's view	N/A
onDragExit	`function()`	The drop session has ended	N/A
onProcessingDrop	`function({dropPoint: {x: number, y: number}})`	It starts to processing the data from the drag items.	N/A
onDrop	`function({data: {dropPoint: {x: number, y: number}}, texts: string[], urls: string[], files: string[]})`	It completes processing the data from the drag items	N/A

Drag Props

Name	Type	Description	Default
context	`string[]`	Array of drag items	N/A
onDragBegin	`function()`	The lift animation has finished and the user is starting to move the items across the screen.	N/A
onDragOver	`function({dropPoint: {x: number, y: number}})`	The user starts to move the drag items	N/A
OnDragEnd	`function()`	The drag activity and its related animations have finished.	N/A
dragPreview	`React.ReactNode`	Customized preview for dragged items	N/A

Available Data Types

Drop
Text, URL, Image, Video, Audio, Other
Drag
Text, URL, Image

Documentation

Contributing

As the creators, and maintainers of this project, we're glad to invite contributors to help us stay up to date. Please take a moment to review the contributing document in order to make the contribution process easy and effective for everyone involved.