Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months 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-08-08T13:50:03.834Z (3 months ago)
- Topics: animation, effects, magic-move, react-native, react-native-magic-move, react-navigation, transitions
- Language: JavaScript
- Homepage:
- Size: 5.25 MB
- Stars: 135
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-react-native - react-navigation-magic-move ★62 - Bindings for using react-navigation with react-native-magic-move 🐰🎩✨ (shared element transitions) (Components / Navigation)
- awesome-react-native - react-navigation-magic-move ★62 - Bindings for using react-navigation with react-native-magic-move 🐰🎩✨ (shared element transitions) (Components / Navigation)
- awesome-react-native - react-navigation-magic-move ★62 - Bindings for using react-navigation with react-native-magic-move 🐰🎩✨ (shared element transitions) (Components / Navigation)
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.
