https://github.com/ijzerenhein/react-navigation-magic-move

Bindings for using react-navigation with react-native-magic-move 🐰🎩✨
https://github.com/ijzerenhein/react-navigation-magic-move

animation effects magic-move react-native react-native-magic-move react-navigation transitions

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ijzerenhein/react-navigation-magic-move
• Owner: IjzerenHein
• License: mit
• Created: 2019-01-04T14:45:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-19T13:36:24.000Z (almost 6 years ago)
• Last Synced: 2024-10-31T18:23:14.168Z (13 days ago)
• Topics: animation, effects, magic-move, react-native, react-native-magic-move, react-navigation, transitions
• Language: JavaScript
• Homepage:
• Size: 5.25 MB
• Stars: 136
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# react-navigation-magic-move 

Bindings for using [react-navigation](https://reactnavigation.org/) with [react-native-magic-move](https://github.com/IjzerenHein/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

```jsx

import "react-navigation-magic-move";

```

And make sure that your scenes are wrapped with ``

**Example**

```jsx

const Scene1 = () => (

  

    ...

    

    ...

  

);

const Scene2 = () => (

  

    ...

    

    ...

  

);

```

## 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](react-navigation-magic-move.gif)