{"id":4233,"url":"https://github.com/mohebifar/react-native-easy-dnd","last_synced_at":"2025-03-16T09:32:28.131Z","repository":{"id":38949234,"uuid":"200512492","full_name":"mohebifar/react-native-easy-dnd","owner":"mohebifar","description":"Drag and drop with react-native made simple","archived":false,"fork":false,"pushed_at":"2023-01-04T06:15:26.000Z","size":967,"stargazers_count":128,"open_issues_count":47,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-10T22:15:21.662Z","etag":null,"topics":["drag-and-drop","react-native"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohebifar.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":"2019-08-04T15:54:33.000Z","updated_at":"2024-09-19T20:41:24.000Z","dependencies_parsed_at":"2022-09-18T21:39:14.705Z","dependency_job_id":null,"html_url":"https://github.com/mohebifar/react-native-easy-dnd","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-easy-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-easy-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-easy-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-easy-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohebifar","download_url":"https://codeload.github.com/mohebifar/react-native-easy-dnd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221661478,"owners_count":16859531,"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":["drag-and-drop","react-native"],"created_at":"2024-01-05T20:17:05.314Z","updated_at":"2024-10-27T10:18:06.978Z","avatar_url":"https://github.com/mohebifar.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"[![Build Status](https://travis-ci.org/mohebifar/react-native-easy-dnd.svg?branch=master)](https://travis-ci.org/mohebifar/react-native-easy-dnd)\n[![NPM Version](https://img.shields.io/npm/v/react-native-easy-dnd.svg)](https://www.npmjs.com/package/react-native-easy-dnd)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React native easy DnD Demo\" src=\"https://github.com/mohebifar/react-native-easy-dnd/raw/f6d57edee863cf22de91d6f3007dcbd687c2cb9a/demo.gif\" /\u003e\n\u003c/div\u003e\n\n# Installation\n\n```\nnpm install --save react-native-easy-dnd\n\n# or using yarn\n\nyarn add react-native-easy-dnd\n```\n\n# Usage\n\nFirst, you need to import `createDndContext`. This function creates the context for storing the data for the draggable and droppable child components.\n\n```js\nimport { createDndContext } from \"react-native-easy-dnd\";\n\nconst { Provider, Droppable, Draggable } = createDndContext();\n```\n\n\n## Provider\nWrap the part of your application that you want to enable drag and drop for inside `Provider`.\n\n```jsx\n\u003cProvider\u003e\n   \u003cView\u003e\n      {/*  */}\n   \u003c/View\u003e\n\u003c/Provider\u003e\n```\n\n## Draggable\nAdd a `Draggable` component with a function as a child. The element that you want to make draggable needs to be `Animated.View` whose props must extend `viewProps` passed in by the render prop function.\n\n\n```jsx\nimport {Animated} from 'react-native';\n\n// ...\n\u003cDraggable\n  onDragStart={() =\u003e {\n    console.log('Started draggging');\n  }}\n  onDragEnd={() =\u003e {\n    console.log('Ended draggging');\n  }}\n  payload=\"my-draggable-item\"\n\u003e\n  {({ viewProps }) =\u003e {\n    return (\n      \u003cAnimated.View\n        {...viewProps}\n        style={[viewProps.style, { width: 200, height: 200, backgroundColor: \"red\" }]}\n      \u003e\n        \u003cText style={{ color: \"#fff\", fontWeight: \"bold\" }}\u003e\n          Drag me\n        \u003c/Text\u003e\n      \u003c/Animated.View\u003e\n    );\n  }}\n\u003c/Draggable\u003e\n```\n\n### Props\n\n| Prop          | Type       | Description   |      \n| ------------- | ---------- | ------------- |\n| `onDragStart` | `Function` | Callback that is triggerd when user starts dragging the draggable element |\n| `onDragStart` | `Function` | Callback that is triggerd when user ends dragging the draggable element |\n| `payload`     | `any`      | An arbitrary value (often) unique to this draggable that can later be used to determine which draggable item was dropped onto a droppable |\n\n## Droppable\nAdd a `Droppable` component with a function as a child. Similarly, the element that you want to make droppable needs to be `Animated.View` whose props must extend `viewProps` passed in by the render prop function.\n\n```jsx\nimport {Animated} from 'react-native';\n\n// ...\n\n\u003cDroppable\n  onEnter={() =\u003e {\n    console.log('Draggable entered');\n  }}\n  onLeave={() =\u003e {\n    console.log('Draggable left');\n  }}\n  onDrop={({ payload }) =\u003e {\n    console.log('Draggable with the following payload was dropped', payload);\n  }}\n\u003e\n  {({ active, viewProps }) =\u003e {\n    return (\n      \u003cAnimated.View\n        {...viewProps}\n        style={[\n          {\n            width: 300,\n            height: 200,\n            backgroundColor: active\n              ? \"blue\"\n              : \"green\"\n          },\n          viewProps.style,\n        ]}\n      \u003e\n        \u003cText style={{ fontWeight: \"bold\", color: \"white\" }}\u003eDrop here\u003c/Text\u003e\n      \u003c/Animated.View\u003e\n    );\n  }}\n\u003c/Droppable\u003e\n```\n\n### Props\n\n| Prop          | Type       | Description   |      \n| ------------- | ---------- | ------------- |\n| `onEnter`     | `Function` | Callback that is triggerd when a draggable enters the droppable area |\n| `onLeave`     | `Function` | Callback that is triggerd when a draggable leaves the droppable area |\n| `onDrop`      | `Function` | Callback that is triggerd when a draggable is dropped onto the droppable area |\n\n# Fun Fact!\n\nI wrote most of the code on a flight from Toronto to St. John's in March 2019. ✈\n\n# License\n\nLicensed under the [MIT License](https://github.com/mohebifar/react-native-easy-dnd/blob/master/LICENSE), Copyright © 2019 Mohamad Mohebifar.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohebifar%2Freact-native-easy-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohebifar%2Freact-native-easy-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohebifar%2Freact-native-easy-dnd/lists"}