animation react-navigation JavaScript React Native
Need help with react-navigation-magic-move?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.


Bindings for using react-navigation with react-native-magic-move 🐰🎩✨

129 Stars 4 Forks MIT License 15 Commits 1 Opened issues

Services available

Need anything else?

react-navigation-magic-move <!-- omit in toc -->

Bindings for using react-navigation with react-native-magic-move 🐰🎩✨

Why is this needed

triggers its animations whenever it detects that a new MagicMove view has been mounted. However, navigation libraries such as
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



$ yarn add react-navigation-magic-move

Import the library somewhere at the top of your code

import "react-navigation-magic-move";

And make sure that your scenes are wrapped with


const Scene1 = () => (

const Scene2 = () => ( <magicmove.scene> ... <magicmove.view id="myView" style="{{" height: backgroundcolor:></magicmove.view> ... </magicmove.scene> );

That's it!

Magic-move will now animate your components when transitioning from one scene to another. If you want to opt-out of transitions, then use the

prop to turn off transitions towards that scene or component.


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.