{"_id":"react-native-reanimated-dnd","_rev":"9-21ac847e6ce6c96a03ae7b14717e0989","name":"react-native-reanimated-dnd","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.1":{"name":"react-native-reanimated-dnd","version":"1.0.1","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.0.1","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://github.com/entropyconquers/react-native-reanimated-dnd#readme","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"55579dc85be1d529b1a4335ba1078fea75219b4f","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.0.1.tgz","fileCount":37,"integrity":"sha512-mUyMQjH5zYC5qFulTkqXdmz+CFdc5XAoty8b2zyao9UYH1WD3tIxl/hm9VFuNDmGTo+zw5T8dZb5CkX17MG+Fg==","signatures":[{"sig":"MEUCIQD75pMDpIb8/68gPF7uMHX+WcUQl+Znb02Qa/mcdzZHOAIgQl6Bz44psNFTofizWv/uF7gUEqcCU3CmIAwI/2d+0dM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":200224},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"f89cdb2528aa31c5a10bffc31924d246035de5e5","scripts":{"build":"tsc","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","type-check":"tsc --noEmit","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.0.1_1748417691399_0.4821838752510297","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"react-native-reanimated-dnd","version":"1.0.2","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.0.2","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://github.com/entropyconquers/react-native-reanimated-dnd#readme","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"09bc72e71b5af74879e4c1324f35b888da27e7c1","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.0.2.tgz","fileCount":37,"integrity":"sha512-2q0m5ZZybWg6byqkSnOSaoD3nChdZ3610jt0A9FrdXXsrQ7Zr4sLrUANk0qaPdbW+kl1Rw5H+wsrF/+jDoSD8Q==","signatures":[{"sig":"MEQCIGG1Ivb96IATd50YX9uvky1J8D+ivFVtbJMd7YaHV4OQAiAqPMH5+l8IbgsOaR1VCFwTvN+n2ivmuQQPlTJ1JZltVA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":200078},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"13d34e9ebd4914d6fb89c31a5bb938b8dddaab7c","scripts":{"build":"tsc","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","type-check":"tsc --noEmit","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.0.2_1748418174041_0.9530636867154942","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"react-native-reanimated-dnd","version":"1.0.3","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.0.3","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://react-native-reanimated-dnd.netlify.app/","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"6c3e7e06a55e7d6c9b220ecf4718965d0d3cb8c4","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.0.3.tgz","fileCount":37,"integrity":"sha512-ZRgQ63hy74EsUZ0UcnwxTWezJLxfJuKtXRglonAS98oHXJuIUSmzeI3m87BD1mp64to//zAmNkQkxz1WY0ZlNg==","signatures":[{"sig":"MEUCIDuYZWijL5n+M9ZnMFQ0Rx558z9gWrTohUtFyAo7aZ1OAiEA5Ncg7PDZfOZp5SAWnCoYxI6xrI2OGAjVySfg6m+C8PU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":200144},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"13d34e9ebd4914d6fb89c31a5bb938b8dddaab7c","scripts":{"build":"tsc","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","type-check":"tsc --noEmit","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.0.3_1748419067370_0.7667359238265528","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"react-native-reanimated-dnd","version":"1.0.4","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.0.4","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://react-native-reanimated-dnd.netlify.app/","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"6b6c3f4d6a6037d8012ad8f1dd84ad91eda1f2bc","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.0.4.tgz","fileCount":37,"integrity":"sha512-o0Igbv7+zWKSkPya8PxdDlARdd+92uxGiC1WhwsjYt8i6NncQ1LR8ycT4cA5hAxo/x9bz8/6pkVaUNmW3ZSHpA==","signatures":[{"sig":"MEYCIQDhaRA3mXIzNkULTd2bErALqfPbPBSqLY3LNXPp16BGlwIhAJ7xxd88HCnc4OvIOLFMVIVPrkZ9fjRpS6L7SkeRRm+L","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55105},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"7b130d749709262bd8f6501a4f5d8290c5aad4bd","scripts":{"build":"tsc && npm run minify","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","minify":"node scripts/build.js","type-check":"tsc --noEmit","build:clean":"rm -rf lib && npm run build","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","terser":"^5.36.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.0.4_1748419787347_0.6977408570990284","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"react-native-reanimated-dnd","version":"1.0.5","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.0.5","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://react-native-reanimated-dnd.netlify.app/","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"dff926d797bb454792d0f5ef276771e1f07561a7","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.0.5.tgz","fileCount":37,"integrity":"sha512-SjX/DBZt1AgXeuX99HsetN5XstycbUzyLiNrpwhJW8VAdw1kGKYMtH56Zy+mP3z7D1qJUyEFmOK+yyC7zvswIg==","signatures":[{"sig":"MEYCIQCmSk7bPD4KFr5TGyhMjWyKhobNhnZrV17HsLURfrZboQIhAJuOVDT+sllj6ZQ7/bDrSiEW9RTqBDlUys6h8MUFHQdj","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70388},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"36b1cf656de3c5db2ef0eeed24d8c9389ae0bf9c","scripts":{"build":"tsc && npm run minify","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","minify":"node scripts/build.js","build:safe":"tsc","type-check":"tsc --noEmit","build:clean":"rm -rf lib && npm run build","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","build:clean:safe":"rm -rf lib && npm run build:safe"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","terser":"^5.36.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.0.5_1748420061809_0.865475411044407","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"react-native-reanimated-dnd","version":"1.1.0","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","_id":"react-native-reanimated-dnd@1.1.0","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"homepage":"https://react-native-reanimated-dnd.netlify.app/","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"dist":{"shasum":"43b3395a203c999831c6a84aaca009d45afc529c","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-1.1.0.tgz","fileCount":41,"integrity":"sha512-9ZgdAFsw2rjB/0VE3wsR9+PnBOWIoO+1s6lEiyV51ptBcoz0NaUnUb8aqGocEztnXSbySSznpOh5vy6Ijo9A3Q==","signatures":[{"sig":"MEYCIQDEeQ86btchrS1IGLlUOcgqhjRXwnj0oONr6MQYdaywvgIhAPvClSScsnb2aQ2qhfOKNlGuNxpH9rgm4ctOvZJO3NIy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":99622},"main":"lib/index.js","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"gitHead":"0cd4b25fca8d79e3b094cd9bb6c0bff45cd19d3e","scripts":{"build":"tsc && npm run minify","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","minify":"node scripts/build.js","build:safe":"tsc","type-check":"tsc --noEmit","build:clean":"rm -rf lib && npm run build","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","build:clean:safe":"rm -rf lib && npm run build:safe"},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"repository":{"url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git","type":"git"},"_npmVersion":"11.4.1","description":"A powerful drag-and-drop library for React Native using Reanimated 3","directories":{},"sideEffects":false,"_nodeVersion":"24.1.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","terser":"^5.36.0","prettier":"^3.5.3","typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.2.0","react-native":"^0.72.0","@types/react-native":"^0.72.0","react-native-reanimated":"^3.5.0","react-native-gesture-handler":"^2.13.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-reanimated":">=3.0.0","react-native-gesture-handler":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-reanimated-dnd_1.1.0_1749988983392_0.947793616580707","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"react-native-reanimated-dnd","version":"2.0.0","description":"A powerful drag-and-drop library for React Native using Reanimated 4 and Worklets","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","type":"module","workspaces":["example-app"],"exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","default":"./lib/index.js"}},"sideEffects":false,"scripts":{"build":"tsc && npm run minify","build:safe":"tsc","build:watch":"tsc --watch","build:clean":"rm -rf lib && npm run build","build:clean:safe":"rm -rf lib && npm run build:safe","minify":"node scripts/build.js","prepublishOnly":"npm run build:clean","type-check":"tsc --noEmit","type-check:example":"npm run type-check --workspace example-app","doctor:example":"npm run doctor --workspace example-app","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml,yaml}\" --ignore-path .prettierignore"},"keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git"},"homepage":"https://reanimated-dnd-docs.vercel.app/","peerDependencies":{"react":">=18.0.0","react-native":">=0.80.0","react-native-gesture-handler":">=2.28.0","react-native-reanimated":">=4.2.0","react-native-worklets":">=0.7.0"},"devDependencies":{"@types/node":"^20.0.0","@types/react":"~19.2.10","prettier":"^3.5.3","react":"19.2.0","react-native":"0.83.2","react-native-gesture-handler":"~2.30.0","react-native-reanimated":"4.2.1","react-native-worklets":"0.7.2","terser":"^5.36.0","typescript":"~5.9.2"},"_id":"react-native-reanimated-dnd@2.0.0","gitHead":"86fb5ab21cc358f733c7b39148fdc7d8b2efeda3","bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FXNWZoad5RG4Z6g1xX60/ZEBVkhO9jmmftHAuTML3XrVw15dsU8LwHA5ulVpO9UtX4iBGwAn3CCr3GNRcuH/oQ==","shasum":"036c1e3d02a37efa36217d392392f37c7aba0dc4","tarball":"https://registry.npmjs.org/react-native-reanimated-dnd/-/react-native-reanimated-dnd-2.0.0.tgz","fileCount":55,"unpackedSize":138900,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDjhysbe1SdTR85lBy4wOMeELaJ7+3rcoqzjPoidPaXDgIhAKw38GSUsdfiU+ZZoA5dBkaZbsdk2fw7DF6bcFMOg3A9"}]},"_npmUser":{"name":"entropyconquers","email":"vkrraheja@gmail.com"},"directories":{},"maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-reanimated-dnd_2.0.0_1773695467265_0.8385158251881855"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-28T07:34:51.399Z","modified":"2026-03-16T21:11:07.529Z","1.0.0":"2025-05-25T19:18:45.954Z","1.0.1":"2025-05-28T07:34:51.573Z","1.0.2":"2025-05-28T07:42:54.252Z","1.0.3":"2025-05-28T07:57:47.575Z","1.0.4":"2025-05-28T08:09:47.581Z","1.0.5":"2025-05-28T08:14:21.973Z","1.1.0":"2025-06-15T12:03:03.582Z","2.0.0":"2026-03-16T21:11:07.420Z"},"bugs":{"url":"https://github.com/entropyconquers/react-native-reanimated-dnd/issues"},"author":{"name":"Vishesh Raheja","email":"github.com/entropyconquers"},"license":"MIT","homepage":"https://reanimated-dnd-docs.vercel.app/","keywords":["react-native","drag-and-drop","reanimated","sortable","dnd","gesture-handler"],"repository":{"type":"git","url":"git+https://github.com/entropyconquers/react-native-reanimated-dnd.git"},"description":"A powerful drag-and-drop library for React Native using Reanimated 4 and Worklets","maintainers":[{"name":"entropyconquers","email":"vkrraheja@gmail.com"}],"readme":"# React Native Reanimated DnD ๐ŸŽฏ\n\n

\n\nhttps://github.com/user-attachments/assets/023c0a9c-194a-45a9-bb88-ac8f16f5ffd5\n\n

\n
\n \n**A drag-and-drop library that _finally_ works on React Native** โœจ\n\n_Powerful, performant, and built for the modern React Native developer_\n\n[![npm version](https://badge.fury.io/js/react-native-reanimated-dnd.svg)](https://badge.fury.io/js/react-native-reanimated-dnd)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![React Native](https://img.shields.io/badge/React%20Native-0.80+-green.svg)](https://reactnative.dev/)\n\n
\n\n\n \"NPM\n\n\n \"Documentation\"\n\n\n \"Live\n\n\n
\n\n---\n\n## ๐Ÿš€ Why This Library?\n\nAfter countless attempts with drag-and-drop solutions that don't work or are simply outdated, this is something that _finally_ works. And it is not just another DnD library, but a **complete ecosystem** built from the ground up for React Native, offering a **best-in-class developer experience** and **production-ready performance**.\n\n**Highly feature-packed** with every interaction pattern you'll ever need, yet **simple enough** to get started in minutes. Built for developers who demand both power and simplicity.\n\n## โœจ Features\n\n- ๐Ÿš€ **High Performance** - Built with Reanimated 4 and Worklets for buttery-smooth 60fps animations\n- ๐Ÿ—๏ธ **New Architecture Ready** - Built for the modern React Native architecture used by Expo SDK 55+\n- ๐Ÿ“ฆ **Expo Compatible** - Tested against Expo SDK 55 and React Native 0.83\n- ๐Ÿชถ **Tiny Bundle Size** - Only 70kb unpacked size, won't bloat your app\n- ๐ŸŽฏ **Flexible API** - From simple drag-and-drop to complex sortable lists\n- ๐Ÿ“ฑ **React Native First** - Designed specifically for mobile, not ported from web\n- ๐Ÿ”ง **TypeScript Ready** - Full type safety with comprehensive definitions\n- ๐ŸŽจ **Infinitely Customizable** - Every animation, behavior, and style is configurable\n- ๐Ÿ“ฆ **Complete Component Suite** - Draggable, Droppable, Sortable, and more\n- ๐ŸŽช **Smart Collision Detection** - Multiple algorithms (center, intersect, contain)\n- ๐Ÿ“œ **Vertical & Horizontal Sortable Lists** - Drag and drop to sort lists in any direction with automatic scrolling\n- ๐Ÿ”ฒ **Sortable Grids** - 2D grid drag-and-drop with flexible layouts, insert and swap modes\n- โ†• **Dynamic Heights** - Sortable lists with variable item heights\n- โšก **FlatList Performance** - Optional FlatList rendering for large datasets with virtualization\n- ๐ŸŽญ **Drag Handles** - Precise control with dedicated drag areas\n- ๐ŸŽฌ **Custom Animations** - Spring, timing, or bring your own animation functions\n- ๐Ÿ“ **Pixel-Perfect Positioning** - 9-point alignment system with custom offsets\n- ๐Ÿ“ฆ **Boundary Constraints** - Keep draggables within specific areas\n- โšก **State Management** - Complete lifecycle tracking and callbacks\n- ๐ŸŽฏ **Developer Experience** - Intuitive APIs, helpful warnings, and extensive examples\n\n## ๐Ÿ“ฑ Interactive Examples\n\n**See it in action!** A comprehensive example app with **18 interactive demos** showcasing every feature and use case.\n\n
\n\n### ๐ŸŽฎ Try the Example App\n\n\n\n\n\n\n
\n\n**๐Ÿ“ฑ Scan & Play**\n\n\"Expo\n\n_Scan with Expo Go to try the demo instantly_\n\n\n\n**๐Ÿš€ Quick Start**\n\n1. Install [Expo Go](https://expo.dev/go) on your phone (SDK 55)\n2. Scan the QR code with your camera\n3. Explore 18 interactive examples!\n\n**Or browse the code:**\n[**๐Ÿ“‚ View Example App โ†’**](./example-app/README.md)\n\n
\n\n### ๐Ÿ“š Complete Documentation\n\n\n \"Documentation\"\n\n\n_Comprehensive guides, API reference, and interactive examples_\n\n
\n\nThe example app includes:\n\n- ๐ŸŽต **Sortable Music Queue** - Complete list reordering with drag handles\n- โ‡Œ **Horizontal Sortable** - Reorderable horizontal scrolling list\n- ๐Ÿ”ฒ **Sortable Grid** - 2D grid reordering with insert/swap modes\n- โ†• **Dynamic Heights** - Sortable list with variable item heights\n- ๐ŸŽฏ **Basic Drag & Drop** - Drag items to drop zones with pre-drag delay\n- ๐ŸŽช **Drag Handles** - Dedicated drag regions for precise control\n- ๐ŸŽฌ **Custom Animations** - Spring, timing, bounce & easing curves\n- โœจ **Active Drop Styles** - Visual feedback on hover\n- ๐Ÿ“ **Alignment & Offset** - Precise drop positioning with offsets\n- ๐Ÿ“ฆ **Boundary Constraints** - Axis-locked and bounded dragging\n- ๐ŸŽฏ **Collision Detection** - Center, intersect & contain algorithms\n- ๐Ÿ—บ๏ธ **Dropped Items Map** - Track items across multiple zones\n- โšก **Drag State** - State enum & onStateChange lifecycle\n- โš™๏ธ **Custom Draggable** - useDraggable hook implementation\n\n## ๐ŸŽฌ Demo Showcase\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### ๐ŸŽต Sortable Music Queue\n\n_Vertical list reordering with drag handles_\n\nhttps://github.com/user-attachments/assets/6493c05f-571c-416d-b81d-90bee98738b4\n\n**Features:** Auto-scrolling โ€ข Drag handles โ€ข Smooth transitions\n\n\n\n### โ‡Œ Horizontal Sortable\n\n_Reorderable horizontal scrolling list_\n\nhttps://github.com/user-attachments/assets/909c687e-146d-4233-a6e9-4bc3e7b69a35\n\n**Features:** Horizontal scroll โ€ข Handle & full item modes\n\n\n\n### ๐Ÿ”ฒ Grid Sortable\n\n_2D grid reordering with insert & swap_\n\nhttps://github.com/user-attachments/assets/9647af01-098c-485f-92ba-cfc39d1bba0c\n\n**Features:** Grid layout โ€ข Insert & swap modes\n\n
\n\n### โ†• Dynamic Heights\n\n_Sortable list with variable item heights_\n\nhttps://github.com/user-attachments/assets/b53078ca-51ab-4675-9389-e8fe69492370\n\n**Features:** Variable heights โ€ข Expand/collapse โ€ข Auto-scroll\n\n\n\n### ๐ŸŽฏ Basic Drag & Drop\n\n_Drag items to drop zones_\n\nhttps://github.com/user-attachments/assets/05859d25-6749-41b7-ae7e-cad5f864a268\n\n**Features:** Drop zones โ€ข Pre-drag delay โ€ข Visual feedback\n\n\n\n### ๐ŸŽญ Drag Handles\n\n_Dedicated regions for drag control_\n\nhttps://github.com/user-attachments/assets/f8be7bea-0f24-4446-83be-06ede43fa02a\n\n**Features:** Full handle โ€ข Bar handle โ€ข Header handle\n\n
\n\n### โœจ Active Drop Styles\n\n_Visual hover effects on drop zones_\n\nhttps://github.com/user-attachments/assets/d4124110-6eb7-4a15-8f97-3e58b392d62e\n\n**Feedback:** Pulse effect โ€ข Glow effect โ€ข Hover states\n\n\n\n### ๐Ÿ“ Alignment & Offset\n\n_Precise drop positioning with offsets_\n\nhttps://github.com/user-attachments/assets/07fd39d0-a0d8-471c-86be-b73d70027163\n\n**Features:** 9-point alignment โ€ข X/Y offset controls\n\n\n\n### ๐Ÿ“ฆ Bounded Dragging\n\n_Constrain movement within boundaries_\n\nhttps://github.com/user-attachments/assets/ce43a226-ec42-49c1-b528-df6599d294e1\n\n**Constraints:** Container bounds โ€ข Axis-locked โ€ข Custom limits\n\n
\n\n### ๐ŸŽช Collision Detection\n\n_Center, intersect & contain algorithms_\n\nhttps://github.com/user-attachments/assets/1ac1860a-acc1-469a-ae3e-644a22393b86\n\n**Algorithms:** Center โ€ข Intersect โ€ข Contain\n\n\n\n### ๐Ÿ—บ๏ธ Dropped Items Map\n\n_Track items across multiple zones_\n\nhttps://github.com/user-attachments/assets/e4effc88-7161-4c5c-af6e-c06152cfbd09\n\n**Features:** Multi-zone tracking โ€ข Real-time mapping\n\n\n\n### โšก Drag State\n\n_State lifecycle tracking & callbacks_\n\nhttps://github.com/user-attachments/assets/bceb9e7c-8f29-4630-81b0-945a7bcf29c5\n\n**States:** Idle โ€ข Dragging โ€ข Dropped\n\n
\n\n
\n\n## ๐Ÿš€ Installation\n\n```bash\nnpm install react-native-reanimated-dnd\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react-native-reanimated react-native-gesture-handler react-native-worklets\n```\n\nFollow the setup guides:\n\n- [React Native Worklets](https://docs.swmansion.com/react-native-worklets/docs/getting-started/installation/)\n- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)\n- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)\n\nMake sure your Babel config uses `\"react-native-worklets/plugin\"` as the last plugin and that your app is running on the New Architecture, which is required by Reanimated 4.\n\n## ๐Ÿ“‹ Requirements\n\n### Data Structure\n\nAll items in your data array **MUST** have an `id` property of type string:\n\n```typescript\ninterface YourDataType {\n id: string; // Required!\n // ... your other properties\n}\n```\n\nThis is essential for the library to track items during reordering.\n\n**Example:**\n\n```typescript\n// โœ… Good - Each item has a unique string id\nconst tasks = [\n { id: \"1\", title: \"Learn React Native\", completed: false },\n { id: \"2\", title: \"Build an app\", completed: false },\n { id: \"3\", title: \"Deploy to store\", completed: true },\n];\n\n// โŒ Bad - Missing id properties\nconst badTasks = [{ title: \"Task 1\" }, { title: \"Task 2\" }];\n\n// โŒ Bad - Non-string ids\nconst badTasksWithNumbers = [\n { id: 1, title: \"Task 1\" },\n { id: 2, title: \"Task 2\" },\n];\n```\n\nThe library includes runtime validation in development mode that will warn you if items are missing valid ID properties.\n\n## State Management Guidelines\n\n**IMPORTANT**: Sortable components maintain their own internal state for optimal performance and animation consistency.\n\n### Do NOT Do This\n\n- Never update external state (arrays, Redux, Zustand, etc.) directly in `onMove` callbacks\n- Never call `setItems()`, `setTasks()`, or similar functions during drag operations\n- Never manually splice or reorder external arrays in response to drag events\n\n### Correct Approach\n\n- Use `onMove` for logging, analytics, or side effects only\n- Use `onDrop` with `allPositions` parameter for read-only position tracking\n- Let sortable components handle their internal reordering automatically\n- Use external state only for the initial data and for non-reordering updates\n\n### Future Features\n\nProgrammatic list operations (add, update, delete, reorder items) that work correctly with internal state management will be added in upcoming releases. This will provide safe methods to modify sortable lists externally.\n\n## ๐Ÿƒโ€โ™‚๏ธ Quick Start\n\n### Basic Drag & Drop\n\n```tsx\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { Draggable, Droppable, DropProvider } from \"react-native-reanimated-dnd\";\n\nexport default function App() {\n return (\n \n \n console.log(\"Dropped:\", data)}>\n \n Drop here\n \n \n\n \n \n Drag me around!\n \n \n \n \n );\n}\n```\n\n### Sortable List\n\n```tsx\nimport { Sortable, SortableItem, SortableRenderItemProps } from \"react-native-reanimated-dnd\";\n\nconst tasks = [\n { id: \"1\", title: \"Learn React Native\" },\n { id: \"2\", title: \"Build an app\" },\n { id: \"3\", title: \"Deploy to store\" },\n];\n\nfunction TaskList() {\n const renderItem = useCallback((props: SortableRenderItemProps) => {\n const { item, id, ...rest } = props;\n return (\n \n \n {item.title}\n \n โ‹ฎโ‹ฎ\n \n \n \n );\n }, []);\n\n return ;\n}\n```\n\n### Sortable Grid\n\n```tsx\nimport { SortableGrid, SortableGridItem } from \"react-native-reanimated-dnd\";\n\nconst apps = [\n { id: \"1\", label: \"Photos\" },\n { id: \"2\", label: \"Music\" },\n { id: \"3\", label: \"Settings\" },\n { id: \"4\", label: \"Mail\" },\n];\n\nfunction AppGrid() {\n const renderItem = useCallback((props) => {\n const { item, id, ...rest } = props;\n return (\n \n \n {item.label}\n \n \n );\n }, []);\n\n return (\n \n );\n}\n```\n\n> **More examples:** [Quick Start Guide](https://reanimated-dnd-docs.vercel.app/docs/getting-started/quick-start) ยท [Sortable Lists](https://reanimated-dnd-docs.vercel.app/docs/examples/sortable-lists) ยท [Sortable Grids](https://reanimated-dnd-docs.vercel.app/docs/api/components/sortable-grid) ยท [All Examples](https://reanimated-dnd-docs.vercel.app/docs/examples/basic-drag-drop)\n\n## ๐Ÿ“š Documentation\n\nVisit **[reanimated-dnd-docs.vercel.app](https://reanimated-dnd-docs.vercel.app/)** for the full documentation:\n\n- **[Getting Started](https://reanimated-dnd-docs.vercel.app/docs/getting-started/installation)** โ€” Installation, setup, and quick start\n- **[Components](https://reanimated-dnd-docs.vercel.app/docs/api/components/draggable)** โ€” Draggable, Droppable, Sortable, SortableGrid, SortableItem\n- **[Hooks](https://reanimated-dnd-docs.vercel.app/docs/api/hooks/useDraggable)** โ€” useDraggable, useDroppable, useSortable, useGridSortable\n- **[Guides](https://reanimated-dnd-docs.vercel.app/docs/guides/animations)** โ€” Animations, collision algorithms, performance, accessibility\n- **[Examples](https://reanimated-dnd-docs.vercel.app/docs/examples/basic-drag-drop)** โ€” Interactive code examples for every feature\n- **[API Reference](https://reanimated-dnd-docs.vercel.app/docs/api/overview)** โ€” Complete types, enums, and utilities\n\n## ๐Ÿƒโ€โ™‚๏ธ Running the Example App\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/entropyconquers/react-native-reanimated-dnd.git\ncd react-native-reanimated-dnd\n```\n\n2. Install dependencies (uses npm workspaces):\n\n```bash\nnpm install\n```\n\n3. Run the example app:\n\n```bash\n# iOS\nnpm run start --workspace example-app\n# then press 'i' for iOS or 'a' for Android\n\n# Or run directly:\nnpx expo run:ios --cwd example-app\nnpx expo run:android --cwd example-app\n```\n\n**Note:** Reanimated 4 requires the New Architecture, so you must use a development build (`npx expo run:ios` / `npx expo run:android`), not Expo Go.\n\nThe example app includes all 18 interactive examples showcasing every feature of the library.\n\n## ๐Ÿ—บ๏ธ Project Roadmap\n\nI am constantly working to improve React Native Reanimated DnD. Here's what's coming next:\n\n### โœ… v2.0.0 (Current)\n\n**Reanimated 4 + Worklets Migration**\n\n- ๐Ÿš€ **Reanimated 4 & Worklets** - Migrated from Reanimated 3 to Reanimated 4 with react-native-worklets\n- ๐Ÿ—๏ธ **New Architecture** - Built for React Native's New Architecture (required by Reanimated 4)\n- ๐Ÿ“ฆ **Expo SDK 55** - Tested and compatible with Expo SDK 55 and React Native 0.83\n- ๐Ÿ”ง **Handle Registration** - Replaced tree-walking handle detection with a registration pattern\n- โšก **Improved Scheduling** - Uses `scheduleOnRN`/`scheduleOnUI` for better worklet-to-JS communication\n- ๐ŸŽฏ **Pre-drag Delay** - New `preDragDelay` prop for distinguishing taps from drags\n- ๐Ÿ“ **npm Workspaces** - Example app now uses workspace-based development setup\n- ๐Ÿ”ฒ **Sortable Grids** - 2D grid drag-and-drop with flexible layouts and insert/swap modes\n- โ†• **Dynamic Heights** - Sortable list support for variable item heights\n\n### ๐ŸŽฏ Next Release\n\n**Focus: Enhanced Functionality & New Features**\n\n- ๐Ÿ› **Bug Fixes & Issues Resolution**\n\n - Address existing reported issues\n - Performance optimizations\n - Gesture handling improvements\n - API Improvements\n\n- ๐Ÿช† **Nested Sortable Lists**\n\n - Multi-level hierarchy support\n - Collapse/expand functionality\n - Parent-child relationship management\n - Tree-like data structure handling\n\n- ๐Ÿ“‹ **Kanban Board Support**\n - Cross-list dragging capabilities\n - Multiple column support\n - Inter-list item transfer\n - Board-level state management\n\n### ๐Ÿ’ก Community Requests\n\nVote on features you'd like to see by raising an issue.\n\n**Have an idea?** [Open a feature request](https://github.com/entropyconquers/react-native-reanimated-dnd/issues/new?assignees=&labels=enhancement&template=feature_request.md) and let me know!\n\n## ๐Ÿค– AI Integration Skill\n\nSpeed up development with the official [agent skill](https://agentskills.io). It teaches AI coding agents (Claude Code, Codex, Cursor, Gemini CLI, Copilot, and 30+ more) the full API so they generate correct code โ€” no hallucinated props.\n\n```bash\n# Install via npx skills (auto-detects your agents)\nnpx skills add entropyconquers/react-native-reanimated-dnd\n\n# Or install globally\nnpx skills add entropyconquers/react-native-reanimated-dnd -g\n```\n\nOnce installed, just describe what you want:\n\n> \"Add a sortable list where I can reorder items by dragging\"\n\n> \"Create a drag and drop interface with drop zones\"\n\n> \"Make a reorderable 3-column grid\"\n\nYour agent will generate complete, working implementations with correct imports, props, and state management.\n\nThe skill ships in both `.claude/skills/` (Claude Code) and `.agents/skills/` (Codex, Cursor, Gemini CLI, Copilot, and others) for universal agent compatibility. See the [AI Integration Skill docs](https://reanimated-dnd-docs.vercel.app/docs/getting-started/ai-skill) for all installation options and the full agent compatibility table.\n\n## ๐Ÿค Contributing\n\nContributions are always welcome! We believe in building this library together with the community.\n\n**Ways to contribute:**\n\n- ๐Ÿ› Report bugs and issues\n- โœจ Suggest new features\n- ๐Ÿ”ง Submit pull requests\n- ๐Ÿ“š Improve documentation\n- ๐Ÿงช Write tests\n- ๐Ÿ’ฌ Help others in discussions\n\nPlease see our [**Contributing Guide**](CONTRIBUTING.md) for detailed information on:\n\n- Setting up the development environment\n- Code style guidelines\n- Pull request process\n- Testing requirements\n- Community guidelines\n\n## ๐Ÿ“„ License\n\nMIT ยฉ [Vishesh Raheja](https://github.com/entropyconquers)\n\n## ๐Ÿ™ Acknowledgments\n\n- Built with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) for smooth 60fps animations\n- Gesture handling powered by [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/)\n- Inspired by the React ecosystem's drag-and-drop libraries\n- Special thanks to the React Native community for feedback and contributions\n\n## โ˜• Support the Project\n\n
\n\nIf this library has helped you build amazing apps, consider supporting its development!\n

\n \n \"Buy\n \n
\n
\n Your support helps maintain and improve this library for the entire React Native community! ๐Ÿš€\n\n\n\n
\n
\n\n---\n\n
\n\n**Made with โค๏ธ for the React Native community**\n\n[โญ Star on GitHub](https://github.com/entropyconquers/react-native-reanimated-dnd) โ€ข [๐Ÿ“ฑ Try the Demo](https://github.com/entropyconquers/react-native-reanimated-dnd/tree/main/example-app) โ€ข [๐Ÿ“– Documentation](https://reanimated-dnd-docs.vercel.app/)\n\n
\n","readmeFilename":"README.md"}