{"id":13776529,"url":"https://github.com/matt-oakes/react-native-ios-drag-drop","last_synced_at":"2025-07-11T09:38:06.075Z","repository":{"id":57337768,"uuid":"106724772","full_name":"matt-oakes/react-native-ios-drag-drop","owner":"matt-oakes","description":"Support for the iOS 11+ inter-app drag and drop","archived":false,"fork":false,"pushed_at":"2017-10-13T11:41:12.000Z","size":4523,"stargazers_count":94,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T12:20:37.266Z","etag":null,"topics":["component","drag-and-drop","ios","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matt-oakes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-12T17:32:33.000Z","updated_at":"2024-10-10T10:57:58.000Z","dependencies_parsed_at":"2022-09-11T01:51:29.021Z","dependency_job_id":null,"html_url":"https://github.com/matt-oakes/react-native-ios-drag-drop","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-oakes%2Freact-native-ios-drag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-oakes%2Freact-native-ios-drag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-oakes%2Freact-native-ios-drag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-oakes%2Freact-native-ios-drag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matt-oakes","download_url":"https://codeload.github.com/matt-oakes/react-native-ios-drag-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252458841,"owners_count":21751116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","drag-and-drop","ios","react","react-native"],"created_at":"2024-08-03T18:00:28.300Z","updated_at":"2025-05-11T10:31:05.437Z","avatar_url":"https://github.com/matt-oakes.png","language":"Objective-C","funding_links":[],"categories":["\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e"],"sub_categories":[],"readme":"\n# `react-native-ios-drag-drop`\nSupport for the iOS 11+ drag and drop API in React Native.\n\n## Installation\n`yarn add react-native-ios-drag-drop` or `npm install react-native-ios-drag-drop --save`\n\n### Mostly automatic installation\n`react-native link react-native-ios-drag-drop`\n\n### Manual installation\n#### iOS\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-ios-drag-drop` and add `MOReactNativeIosDragDrop.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libMOReactNativeIosDragDrop.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n## `DragView`\nThe `DragView` allows you to make one of your React views draggable. A `DragView` has the same behaviour as a `View` except for it accepts a `dragItem` or `dragItems` prop (it must have _exactly_ one of these props).\n\nWhen used on an iOS 11+ iPad it will allow the user to long press on the view and drag it to a location which supports dropping (even across apps when used in multitasking mode).\n\nYou can provide one drag item (`dragItem`) or multiple drag items (`dragItems`) and even customise the preview with any React view you like.\n\n### Usage\nWith a single drag item:\n\n![React Native iOS Drag Drop Single Item](https://raw.github.com/matt-oakes/react-native-ios-drag-drop/master/images/draggable-single-item.gif)\n\n```jsx\nimport { DragView } from 'react-native-ios-drag-drop';\n\nexport default function() {\n  return (\n    \u003cDragView dragItem=\"Shared text\"\u003e\n      \u003cText\u003eDraggable with a single item\u003c/Text\u003e\n    \u003c/DragView\u003e\n  );\n}\n```\n\nWith a multiple drag items:\n\n![React Native iOS Drag Drop Multiple Items](https://raw.github.com/matt-oakes/react-native-ios-drag-drop/master/images/draggable-multiple-items.gif)\n\n```jsx\nimport { DragView } from 'react-native-ios-drag-drop';\n\nexport default function() {\n  return (\n    \u003cDragView dragItems={[\"First item\", \"Second item\"]}\u003e\n      \u003cText\u003eDraggable with multiple drag items\u003c/Text\u003e\n    \u003c/DragView\u003e\n  );\n}\n```\n\nWith a URL drag items:\n\n![React Native iOS Drag Drop URL](https://raw.github.com/matt-oakes/react-native-ios-drag-drop/master/images/draggable-url.gif)\n\n```jsx\nimport { DragView } from 'react-native-ios-drag-drop';\n\nexport default function() {\n  return (\n    \u003cDragView dragItem=\"https://mattoakes.net\"\u003e\n      \u003cText\u003eDraggable with a URL\u003c/Text\u003e\n    \u003c/DragView\u003e\n  );\n}\n```\n\nWith a custom preview view:\n\n![React Native iOS Drag Drop Custom Preview](https://raw.github.com/matt-oakes/react-native-ios-drag-drop/master/images/draggable-custom-preview.gif)\n\n```jsx\nimport { DragView } from 'react-native-ios-drag-drop';\n\nexport default function() {\n  return (\n    \u003cDragView dragItem=\"Custom preview\"\u003e\n      \u003cText\u003eDraggable with a custom preview\u003c/Text\u003e\n      \u003cDragView.Preview\u003e\n        \u003cText\u003eCustom preview\u003c/Text\u003e\n      \u003c/DragView.Preview\u003e\n    \u003c/DragView\u003e\n  );\n}\n```\n\n## `DropView`\n*Not yet implemented*\n\n## Contributing\nContributions are always welcome! File an issue or open a pull request.\n\nYou can use the `example` project to develop on. It is linked correctly to the code in `src`. When published the project is compiled using `babel` into `lib` along with the flow types.\n\n## Tasks\n- [X] `DragView`\n    - [X] Draggable\n    - [X] Custom dragItem\n    - [X] Multiple dragItems on a single component\n    - [X] Custom preview\n- [ ] `DropView`\n    - [ ] Droppable\n    - [ ] Pass the dragItem to a Javascript callback\n    - [ ] Allow the Javascipt to say if it can handle the dragItem on hover\n    - [ ] Allow the accessory icon to be customised as a dragItem is hovered over\n- [ ] TypeScript types\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-oakes%2Freact-native-ios-drag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatt-oakes%2Freact-native-ios-drag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-oakes%2Freact-native-ios-drag-drop/lists"}