{"id":4389,"url":"https://github.com/IjzerenHein/react-navigation-magic-move","last_synced_at":"2025-08-04T01:32:14.323Z","repository":{"id":57341770,"uuid":"164119090","full_name":"IjzerenHein/react-navigation-magic-move","owner":"IjzerenHein","description":"Bindings for using react-navigation with react-native-magic-move 🐰🎩✨","archived":false,"fork":false,"pushed_at":"2019-01-19T13:36:24.000Z","size":5502,"stargazers_count":134,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-24T23:59:06.124Z","etag":null,"topics":["animation","effects","magic-move","react-native","react-native-magic-move","react-navigation","transitions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/IjzerenHein.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-04T14:45:00.000Z","updated_at":"2025-07-17T16:50:52.000Z","dependencies_parsed_at":"2022-09-16T03:01:12.293Z","dependency_job_id":null,"html_url":"https://github.com/IjzerenHein/react-navigation-magic-move","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/IjzerenHein/react-navigation-magic-move","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-navigation-magic-move","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-navigation-magic-move/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-navigation-magic-move/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-navigation-magic-move/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IjzerenHein","download_url":"https://codeload.github.com/IjzerenHein/react-navigation-magic-move/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-navigation-magic-move/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636322,"owners_count":24282075,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","effects","magic-move","react-native","react-native-magic-move","react-navigation","transitions"],"created_at":"2024-01-05T20:17:10.391Z","updated_at":"2025-08-04T01:32:13.833Z","avatar_url":"https://github.com/IjzerenHein.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Navigation"],"readme":"# react-navigation-magic-move \u003c!-- omit in toc --\u003e\n\nBindings for using [react-navigation](https://reactnavigation.org/) with [react-native-magic-move](https://github.com/IjzerenHein/react-native-magic-move) 🐰🎩✨\n\n## Why is this needed\n\n`react-native-magic-move` triggers its animations whenever it detects that a new MagicMove view has been mounted. However, navigation libraries such as `react-navigation` keep components mounted for better performance and faster switching. This means that actions such as back navigation, tab switching or modal popups don't trigger an animation or don't trigger it consistently. This binding solves that problem by installing a hook that forwards the navigator scene information to `react-native-magic-move`.\n\n## Usage\n\nInstallation\n\n```\n$ yarn add react-navigation-magic-move\n```\n\nImport the library somewhere at the top of your code\n\n```jsx\nimport \"react-navigation-magic-move\";\n```\n\nAnd make sure that your scenes are wrapped with `\u003cMagicMove.Scene\u003e`\n\n**Example**\n\n```jsx\nconst Scene1 = () =\u003e (\n  \u003cMagicMove.Scene\u003e\n    ...\n    \u003cMagicMove.View\n      id=\"myView\"\n      style={{\n        alignSelf: \"center\",\n        width: 100,\n        height: 100,\n        backgroundColor: \"green\",\n        borderRadius: 20\n      }}\n    /\u003e\n    ...\n  \u003c/MagicMove.Scene\u003e\n);\n\nconst Scene2 = () =\u003e (\n  \u003cMagicMove.Scene\u003e\n    ...\n    \u003cMagicMove.View\n      id=\"myView\"\n      style={{\n        height: 300,\n        backgroundColor: \"purple\"\n      }}\n    /\u003e\n    ...\n  \u003c/MagicMove.Scene\u003e\n);\n```\n\n## That's it!\n\nMagic-move will now animate your components when transitioning from one scene to another. If you want to opt-out of transitions, then use the `disabled` prop to turn off transitions towards that scene or component.\n\n![MagicMoveGif](react-navigation-magic-move.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIjzerenHein%2Freact-navigation-magic-move","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIjzerenHein%2Freact-navigation-magic-move","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIjzerenHein%2Freact-navigation-magic-move/lists"}