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.
IjzerenHein

Description

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

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
.

Usage

Installation

$ 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



Example

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

disabled
prop to turn off transitions towards that scene or component.

MagicMoveGif

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.