{"id":4802,"url":"https://github.com/IjzerenHein/react-native-magic-move","last_synced_at":"2025-08-13T23:30:50.841Z","repository":{"id":44373820,"uuid":"163304060","full_name":"IjzerenHein/react-native-magic-move","owner":"IjzerenHein","description":"Create magical move transitions between scenes in react-native 🐰🎩✨","archived":true,"fork":false,"pushed_at":"2021-12-01T18:52:17.000Z","size":39292,"stargazers_count":973,"open_issues_count":11,"forks_count":45,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-29T12:03:01.186Z","etag":null,"topics":["magic-move","react-native","scene","transitions","ui-animation"],"latest_commit_sha":null,"homepage":"https://expo.io/@ijzerenhein/react-native-magic-move-demo","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":"2018-12-27T14:34:28.000Z","updated_at":"2025-06-25T16:05:02.000Z","dependencies_parsed_at":"2022-07-12T21:40:47.803Z","dependency_job_id":null,"html_url":"https://github.com/IjzerenHein/react-native-magic-move","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/IjzerenHein/react-native-magic-move","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-native-magic-move","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-native-magic-move/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-native-magic-move/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-native-magic-move/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IjzerenHein","download_url":"https://codeload.github.com/IjzerenHein/react-native-magic-move/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Freact-native-magic-move/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270333792,"owners_count":24566487,"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-13T02:00:09.904Z","response_time":66,"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":["magic-move","react-native","scene","transitions","ui-animation"],"created_at":"2024-01-05T20:17:24.651Z","updated_at":"2025-08-13T23:30:49.793Z","avatar_url":"https://github.com/IjzerenHein.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/ijzerenhein"],"categories":["Components","JavaScript"],"sub_categories":["Animation"],"readme":"# Important `react-native-shared-element` update! \u003c!-- omit in toc --\u003e\n\nA follow up project called [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) has been created which can be considered\nthe successor to `react-native-magic-move`. It it an all native solution that provides superior\nperformance (no more passes over the react-native bridge) and transitions.\nIt however does not support some of the more exotic transition types (flip, shrinkAndGrow) that\nMagic Move does. It also doesn't support the web-platform **yet** and requires **native** extensions to run.\nNew users are advised to use `react-native-shared-element` when possible.\nAs for Magic Move, no more new developments will be started for Magic Move, merely critical bug-fixes.\nThis notification will be updated as development on `react-native-shared-element` progresses.\n\n# react-native-magic-move \u003c!-- omit in toc --\u003e\n\nCreate magical move transitions between scenes in react-native 🐰🎩✨\n\n### [Try it with Expo](https://expo.io/@ijzerenhein/react-native-magic-move-demo) \u003c!-- omit in toc --\u003e\n\n![MagicMoveGif](magicmove5.gif)\n\n- [Usage](#usage)\n- [react-navigation](#react-navigation)\n- [Documentation](#documentation)\n  - [Components](#components)\n  - [Props](#props)\n  - [Transitions](#transitions)\n  - [Scenes](#scenes)\n  - [Context](#context)\n- [Resources](#resources)\n  - [React Europe Talk](#react-europe-talk)\n  - [react-native-magic-move-presentation](#react-native-magic-move-presentation)\n  - [react-navigation-magic-move](#react-navigation-magic-move)\n  - [examples/expo/src](#examplesexposrc)\n- [Disclaimer 🐰🎩](#disclaimer-%F0%9F%90%B0%F0%9F%8E%A9)\n\n## Usage\n\nInstallation\n\n```\n$ yarn add react-native-magic-move\n```\n\nLink the native extensions *(\\* recommended but not required)*\n\n```\n$ react-native link react-native-magic-move \n```\n\n\\* *The native extensions are recommended to get the best performance, but they are not required.\nThis makes it possible to use `react-native-magic-move` with [expo](expo.io) or [react-native-web](https://github.com/necolas/react-native-web). If you're having trouble installing the native extensions, please see [this guide](./docs/NativeInstallation.md) on how to install them manually.*\n\nWrap your app with the `\u003cMagicMove.Provider\u003e` context.\n\n```jsx\nimport * as MagicMove from 'react-native-magic-move';\n\nconst App = () =\u003e (\n  \u003cMagicMove.Provider\u003e\n    {...}\n  \u003c/MagicMove.Provider\u003e\n);\n```\n\nAdd the `\u003cMagicMove.{View|Image|Text}\u003e` component to your views. Whenever the Magic Move component\nis mounted while another Magic Move component with the same `id` is already mounted, then a magic transition between the components is performed.\n\n```jsx\nimport * as MagicMove from 'react-native-magic-move';\n\nconst Scene1 = () =\u003e (\n  \u003cMagicMove.Scene\u003e\n    \u003cMagicMove.View id=\"logo\" style={{\n        width: 100,\n        height: 100,\n        backgroundColor: \"green\",\n        borderRadius: 50\n      }} /\u003e\n  \u003c/MagicMove.Scene\u003e\n);\n\nconst Scene2 = () =\u003e (\n  \u003cMagicMove.Scene\u003e\n    \u003cMagicMove.View id=\"logo\" style={{\n        width: 200,\n        height: 200,\n        backgroundColor: \"purple\",\n        borderRadius: 0\n      }} /\u003e\n  \u003c/MagicMove.Scene\u003e\n);\n```\n\n## react-navigation\n\nWhen you are using [react-navigation](https://reactnavigation.org/) (or [react-native-router-flux](https://github.com/aksonov/react-native-router-flux)), then also install the following binding:\n\n- [react-navigation-magic-move](https://github.com/IjzerenHein/react-navigation-magic-move)\n\n\n## Documentation\n\n### Components\n\nThe following magic-move components are supported out of the box.\n\n- `MagicMove.View`\n- `MagicMove.Text`\n- `MagicMove.Image`\n\nYou can also create your own custom MagicMove components.\n\n```js\nconst MyMagicMoveComponent = MagicMove.createMagicMoveComponent(MyComponent);\n\n// When creating a custom image component (e.g. FastImage) also specify the `image` attribute\n// so that the `move` transition treats this as an image.\nconst MagicMoveFastImage = MagicMove.createMagicMoveComponent(FastImage, {ComponentType: 'image'});\n\n// Full signature\n/* MagicMove.createMagicMoveComponent(Component, {\n  AnimatedComponent,\n  ComponentType,\n  ...props\n});*/\n```\n\n### Props\n\n| Property          | Type                              | Default                     | Description                                                                                                                                                      |\n| ----------------- | --------------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`              | `string`                          | **(required)**              | Unique id of the magic-move instance                                                                                                                             |\n| `transition`      | `function`                        | `MagicMove.Transition.move` | Transition effect, see below                                                                                                                                     |\n| `duration`        | `number`                          | `400`                       | Length of the animation (milliseconds)                                                                                                                           |\n| `delay`           | `number`                          | `0`                         | Amount of msec to wait before starting the animation                                                                                                             |\n| `easing`          | `function`                        | `Easing.inOut(Easing.ease)` | Easing function to define the curve                                                                                                                              |\n| `disabled`        | `bool`                            | `false`                     | Disables transitions to this component                                                                                                                           |\n| `zIndex`          | `number`                          | `0`                         | Z-index to control the drawing order of the rendered animation. A component with a greater z-index is always drawn in front of a component with a lower z-index. |\n| `useNativeDriver` | `boolean`                         | `true`                      | Use the native-driver                                                                                                                                            |\n| `debug`           | `boolean`                         | `false`                     | Enables debug-mode to analyze animations                                                                                                                         |\n| `useNativeClone`  | `boolean`                         |                             | Use this prop to disable native clone optimisations for this component (when applicable).                                                                        |\n| `imageSizeHint`   | `{width: number, height: number}` |                             | Optional size of the image that may be provided as a hint to the transition function                                                                             |\n\n### Transitions\n\nThe following transition functions are available out of the box.\n\n| Transition                                | Description                                                                                                                                                            |\n| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `MagicMove.Transition.move` **(default)** | Moves the component while adjusting for border-radii and size. Takes the image `resizeMode` into account to create a seamless image transition without any stretching. |\n| `MagicMove.Transition.morph`              | Morphs the shape, size and colours  of the target to look like the source                                                                                              |\n| `MagicMove.Transition.dissolve`           | Cross fade the source into the target                                                                                                                                  |\n| `MagicMove.Transition.flip`               | Flip the source to reveal the target on the backside (auto choose axis)                                                                                                |\n| `MagicMove.Transition.flip.x`             | Flip the source to reveal the target on the backside (over x-axis)                                                                                                     |\n| `MagicMove.Transition.flip.y`             | Flip the source to reveal the target on the backside (over y-axis)                                                                                                     |\n| `MagicMove.Transition.flip.xy`            | Flip the source to reveal the target on the backside (over x- and y-axes)                                                                                              |\n| `MagicMove.Transition.shrinkAndGrow`      | Shrink and let the source disappear while letting the target appear and grow                                                                                           |\n| `MagicMove.Transition.squashAndStretch`   | Scale the target to the size of the source and squash and stretch to give it the illusion of momentum and mass                                                         |\n\nYou can also create your own transition functions, see [`src/transitions`](./src/transitions) for examples.\n\n### Scenes\n\nUse `\u003cMagicMove.Scene\u003e` to mark the start of a scene within the rendering hierarchy.\nThis is important so that Magic Move can correctly assess the destination-position of an animation.\n`MagicMove.Scene` is implemented using a regular `View` and supports all its properties.\n\n| Property          | Type       | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `disabled`        | `bool`     | `false` | Disable transitions to this scene.                                                                                                                                                                                                                                                                                                                                                                                           |\n| `active`          | `bool`     |         | This special prop is intended for integrating magic-move with 3rd party navigators such as `react-navigation`. *Do not use it unless you know what you are doing.* By setting it to `true` or `false` the navigation package can control which scene is active and which is no longer active. See [react-navigation-magic-move](https://github.com/IjzerenHein/react-navigation-magic-move) for an example on how to use it. |\n| `debug`           | `boolean`  | `false` | Enables debug-mode to analyze animations                                                                                                                                                                                                                                                                                                                                                                                     |\n| `onWillAppear`    | `function` |         | Callback that is called when the scene is about to appear                                                                                                                                                                                                                                                                                                                                                                    |\n| `onWillDisappear` | `function` |         | Callback that is called when the scene is about to disappear                                                                                                                                                                                                                                                                                                                                                                 |\n\n### Context\n\nWhen a magic-move is performend, a temporary clone of the source and/or target component is rendered onto the screen. Now imagine you have some animations that run when your component is mounted (e.g. `Animatable.View`), that would also mean these animations are run on the cloned component. This is probably not what you want and you might want to hide those components entirely in the cloned component. To do so you can use the `\u003cMagicMove.Context\u003e` API. It allows you to detect whether the component is rendered as a clone and whether it is the source or target of a magic move animation.\n\n**Example**\n\n```jsx\n\u003cMagicMove.View\u003e\n  \u003cMagicMove.Context\u003e\n    {({isClone, isTarget}) =\u003e (\n      \u003cAnimatable.View animation={isClone ? undefined : 'zoomIn'} /\u003e\n    )}\n  \u003c/MagicMove.Context\u003e\n\u003c/MagicMove.View\u003e\n```\n\n\n## Resources\n\n### [React Europe Talk](https://www.youtube.com/watch?v=Uj7aWfrtey8\u0026list=FLsxiG7-SUK8s8xReSGAH4lQ)\n### [react-native-magic-move-presentation](https://github.com/IjzerenHein/react-native-magic-move-presentation)\n### [react-navigation-magic-move](https://github.com/IjzerenHein/react-navigation-magic-move)\n### [examples/expo/src](./examples/expo/src)\n\n## Disclaimer 🐰🎩\n\nMagic-move creates the illusion of transitioning/morphing components from one scene to another. _It however doesn't actually move components to different scenes._ As with real magic tricks, there will be situations where the illusion will not work for you. And as with magic tricks, you may need to **\"set the stage\"** (e.g. change some stuff in your app) to create the transition that you want. So now that you've received this reality check ✅, go forth and create some bad-ass illusions.\n\n\n## License \u003c!-- omit in toc --\u003e\n\n[MIT](./LICENSE.txt)\n\n## Cool? \u003c!-- omit in toc --\u003e\n\nDo you think this cool and useful? Consider buying me a coffee!\u003cbr/\u003e\u003ca href=\"https://www.buymeacoffee.com/ijzerenhein\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIjzerenHein%2Freact-native-magic-move","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIjzerenHein%2Freact-native-magic-move","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIjzerenHein%2Freact-native-magic-move/lists"}