NeXTSTEP Programming Mastermind

    react-navigation-magic-move

    0.4.1 • Public • Published

    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.

    MagicMoveGif

    Install

    npm i react-navigation-magic-move

    DownloadsWeekly Downloads

    8

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • ijzerenhein