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
• Installation
• Demo
• Requirements
• Usage
• Documentation
• Contributing
• License

Features

• [x] Native iOS Drag & Drop Session Implemented in Swift
• [x] Multiple Files Dropping
• [x] Support Multiple Drag Items
• [x] Customized Preview for Dragged Items
• [x] Six Drop Events & Three Drag Events
• [x] Six Drop Item Types & Three Drag Item Types
• [x] 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

• API
• Example

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.

• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.

License

React Native Drop Zone is available under the Hippocratic-2.1 license. See the LICENSE file for more info.