{"id":25414092,"url":"https://github.com/aashu-dubey/react-native-animation-samples","last_synced_at":"2025-04-07T05:06:59.001Z","repository":{"id":45036822,"uuid":"504913547","full_name":"Aashu-Dubey/react-native-animation-samples","owner":"Aashu-Dubey","description":"Gesture based interruptible animation samples in React Native.","archived":false,"fork":false,"pushed_at":"2025-03-08T17:12:15.000Z","size":2249,"stargazers_count":284,"open_issues_count":0,"forks_count":37,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-31T04:04:01.079Z","etag":null,"topics":["android","animation","gesture","gesture-handler","ios","react","react-native","reanimated","samples","toolbar"],"latest_commit_sha":null,"homepage":"","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/Aashu-Dubey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Aashu-Dubey"],"patreon":"ashud","custom":["buymeacoffee.com/ashud"]}},"created_at":"2022-06-18T17:52:07.000Z","updated_at":"2025-02-20T09:02:15.000Z","dependencies_parsed_at":"2024-07-10T22:19:21.610Z","dependency_job_id":null,"html_url":"https://github.com/Aashu-Dubey/react-native-animation-samples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-animation-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-animation-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-animation-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-animation-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aashu-Dubey","download_url":"https://codeload.github.com/Aashu-Dubey/react-native-animation-samples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595332,"owners_count":20963943,"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":["android","animation","gesture","gesture-handler","ios","react","react-native","reanimated","samples","toolbar"],"created_at":"2025-02-16T14:38:40.378Z","updated_at":"2025-04-07T05:06:58.980Z","avatar_url":"https://github.com/Aashu-Dubey.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Aashu-Dubey","https://patreon.com/ashud","buymeacoffee.com/ashud"],"categories":[],"sub_categories":[],"readme":"# React Native Animation Samples\n\nSome very interesting and challenging animation samples built in react-native\n\n## 🧬 Samples\n| Project | |\n| :--- | --- |\n| **[\u003e Expo Snack](https://snack.expo.dev/@ashu_dubey/react-native-animation-samples)**\u003cbr\u003e**[\u003e YouTube Tutorial Playlist](https://www.youtube.com/playlist?list=PLpnMM6hhRcchaS1uSpMZfAKYTxZWIlzzN)** |  |\n| \u003ch3\u003e1. Custom Toolbar\u003c/h3\u003e**[\u003e YouTube Tutorial](https://youtu.be/27pTWrcEDC4)**\u003cbr\u003e\u003cbr\u003eA Custom playful, interactive toolbar with cool gesture based interruptible animations.\u003cbr\u003e\u003cbr\u003e**[\u003e Browse](./src/samples/custom_toolbar#readme)**\u003cbr\u003e**\u003e Demo: [twitter](https://twitter.com/aashudubey_ad/status/1539354978266935296) \\| youtube [short 1](https://youtube.com/shorts/i7xw93xqkRE), [short 2](https://youtube.com/shorts/QMt18WcWyGw)** | \u003ca href=\"./src/samples/custom_toolbar#readme\" title=\"Animated Toolbar\"\u003e\u003cimg alt=\"Animated Toolbar Preview\" src=\"./src/assets/demo/animated_toolbar.png\" width=\"320\"\u003e\u003c/a\u003e |\n| \u003ch3\u003e2. Color Swatch\u003c/h3\u003e**[\u003e YouTube Tutorial](https://youtu.be/lK6rAktDQJQ)**\u003cbr\u003e\u003cbr\u003eA Color Swatch that plays a circular rotation based on user gestures.\u003cbr\u003e\u003cbr\u003e**[\u003e Browse](./src/samples/color_swatch#readme)**\u003cbr\u003e**\u003e Demo: [twitter](https://twitter.com/aashudubey_ad/status/1545139506457690112) \\| [youtube](https://youtube.com/shorts/2dhPPNeOc1I)** | \u003ca href=\"./src/samples/color_swatch#readme\" title=\"Color Swatch\"\u003e\u003cimg alt=\"Color Swatch Preview\" src=\"./src/assets/demo/color_swatch.png\" width=\"320\"\u003e\u003c/a\u003e |\n| \u003ch3\u003e3. Grid Magnification\u003c/h3\u003eA grid list view that displays Magnify effect on long press \u0026 drag, focusing on the items near the touch area within a radius.\u003cbr\u003e\u003cbr\u003e**[\u003e Browse](./src/samples/grid_magnification#readme)**\u003cbr\u003e**\u003e Demo: [twitter](https://twitter.com/aashudubey_ad/status/1553434985620656128)**\u003cbr\u003e**\u003e Alternatives: [Flutter](https://github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/animations/grid_magnification)** | \u003ca href=\"./src/samples/grid_magnification#readme\" title=\"Grid Magnification\"\u003e\u003cimg alt=\"Grid Magnification Preview\" src=\"./src/assets/demo/grid_mag/grid_magnification.png\" width=\"320\"\u003e\u003c/a\u003e |\n| \u003ch3\u003e4. Rope Physics\u003c/h3\u003eA realistic looking gesture controlled, bezier based Rope UI implementation and related samples.\u003cbr\u003e\u003cbr\u003e**[\u003e Browse](./src/samples/rope_physics#readme)**\u003cbr\u003e**\u003e Demo: [twitter](https://twitter.com/aashudubey_ad/status/1571250425772544000)** | \u003ca href=\"./src/samples/rope_physics#readme\" title=\"Rope Physics\"\u003e\u003cimg alt=\"Rope Physics Preview\" src=\"./src/assets/demo/rope/rope-sockets-demo.png\" width=\"320\"\u003e\u003c/a\u003e |\n| \u003ch3\u003e5. Custom Cursor/Caret\u003c/h3\u003eA Customizable custom cursor/caret for TextFields, with intuitive validation animations for max length and password strength.\u003cbr\u003e\u003cbr\u003e**[\u003e Browse](./src/samples/custom_caret#readme)**\u003cbr\u003e**\u003e Demo: twitter ([max length](https://twitter.com/aashudubey_ad/status/1696987518548496526) \\| [password strength](https://twitter.com/aashudubey_ad/status/1697353400583942423))**\u003cbr\u003e**\u003e Alternatives: [Flutter](https://github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/animations/custom_caret)** | \u003ca href=\"./src/samples/custom_caret#readme\" title=\"Custom Cursor/Caret\"\u003e\u003cimg alt=\"Custom Cursor/Caret Preview\" src=\"./src/assets/demo/custom_caret.png\" width=\"320\"\u003e\u003c/a\u003e |\n\n## 🧬 Other samples (Incomplete) 🚧\n\n- [Cards Swap](https://github.com/Aashu-Dubey/react-native-animation-samples/tree/cards_swap/src/cards_swap):- A drag/swipe demo where the cards dodge each other with gesture based animations. [See preview](https://twitter.com/aashudubey_ad/status/1543701552820469760)\n\n## 🖥 Running locally\n\n```bash\n# after clone, cd into the directory\n# install dependencies\nyarn install\n\n# iOS only\nnpx pod-install ios\n# or\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n\n# Run iOS\nnpx react-native run-ios\n\n# Run Android\nnpx react-native run-android\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faashu-dubey%2Freact-native-animation-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faashu-dubey%2Freact-native-animation-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faashu-dubey%2Freact-native-animation-samples/lists"}