ijzerenhein / react-navigation-magic-move

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

react-navigation-magic-move

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 <MagicMove.Scene>

Example

const Scene1 = () => (
  <MagicMove.Scene>
    ...
    <MagicMove.View
      id="myView"
      style={{
        alignSelf: "center",
        width: 100,
        height: 100,
        backgroundColor: "green",
        borderRadius: 20
      }}
    />
    ...
  </MagicMove.Scene>
);

const Scene2 = () => (
  <MagicMove.Scene>
    ...
    <MagicMove.View
      id="myView"
      style={{
        height: 300,
        backgroundColor: "purple"
      }}
    />
    ...
  </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.

react-navigation-magic-move's Issues

Animation only shown when navigating back after adding import statement

Actual behaviour

When adding import "react-navigation-magic-move"; the animation is shown when navigating back to the previous MagicMove.Scene, but the animation when navigating to a new MagicMove.Scene is not shown anymore. Without adding the import statement, the animation is showing correctly when navigating to another MagicMove.Scene, but not when navigating back.

Expected behaviour

Animation should be shown when navigating to new MagicMove.Scene as well as when going back to the previous MagicMove.Scene.

I'm seeing this behaviour on

• Device: iOS simulator iOS 11.4.
• Routing/transition library: react-navigation v3.12.1
• React-native version: v0.60.5
• react-native-magic-move version: v0.6.6
• react-navigation-magic-move version: v0.4.1

Really cool library, by the way!

Not giving the desired Animation on Modal

iam currently using @expo SDK 33 and the latest version of react native magic move , but it seems iam not getting the desired Effect with Modals , can you please upload a tested Example ? because iam not sure if it's either iam not using it the right way or the Library is Bugy with Modals . i already tried Modal with different transition effects but the Image still popup when Modal finishes loading instead of playing the Animation

Get Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator.

I'm trying to get this snack that uses this with react-native-router-flux to work: https://snack.expo.io/@mern59/react-native-magic-move-copy but I keep getting that error on the initial load.

I have a project of my own that is using react-native-router-flux that I was trying to use this on that is also experiencing this error: https://snack.expo.io/@mern59/animation:-flowers-new. On mine I don't get the error initially but as soon as I try to navigate it shows. If I remove import "react-navigation-magic-move" it works but I would like to use it so I can have animation on the back button.