# 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](#features)
- [Installation](#installation)
- [Demo](#demo)
- [Requirements](#requirements)
- [Usage](#usage)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [License](#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`**

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

**2. Link to the library to your project**

```bash
react-native link react-native-drop-zone
```

**3. Go to your `ios` folder and run**

```bash
pod install
```

## Demo

### Dropping Multiple Files

<img src="assets/Multiple Files.gif">

### Dropping Text & Image

<img src="assets/Text and Image.gif">

### Dragging Image

<img src="assets/Image Drag.gif">

### Dragging Text & URL

<img src="assets/Text & URL Drag.gif">

### Customized Preview for Dragging

<img src="assets/Drag Preview.gif">

### Run Example

**1. Download Example**

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

**2. Building the JavaScript components**

```bash
cd react-native-drop-zone/Example
```

```bash
npm install
```

**3. Launching the Packager**

```bash
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`

```javascript
<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`

```javascript
<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](./docs/API.md)
- [Example](./docs/Usage.md)

## 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](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved.

- If you **found a bug**, open an [issue](https://github.com/WeTransfer/react-native-drop-zone/issues).
- If you **have a feature request**, open an [issue](https://github.com/WeTransfer/react-native-drop-zone/issues).
- If you **want to contribute**, submit a [pull request](https://github.com/WeTransfer/react-native-drop-zone/pulls).

## License

**React Native Drop Zone** is available under the Hippocratic-2.1 license. See the [LICENSE](./LICENSE.md) file for more info.