catalinmiron/react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫

React Navigation Shared Element

React Navigation bindings for react-native-shared-element 💫

⭐️ ⭐️ Support native-stack development! ⭐️ ⭐️

Do you like this library and would you like to support it? Due to popular demand we've created a money-pool to implement support for @react-navigation/native-stack. All funds will be used to implement this feature as well as for continued development this library and react-native-shared-element.

https://paypal.me/pools/c/8Cyt3ED5wV

Many thanks to all the sponsors so far! ❤️

Documentation

• Shared element for the React Navigation 5/6 API
• Shared element for the React Navigation 4 API
• Migration guide

Compatibility

The following versions or react-navigation and the stack navigator are supported.

Version	React-Navigation	Comments
3.x	4, 5 & 6	Import from react-navigation-shared-element/build/v4 to use it with 4.x.
2.x	3 & 4	This version is compatible with react-navigation-stack@2.
1.x	3 & 4	This version is compatible with react-navigation-stack@1.

Things to know

• react-navigation-shared-element uses the JS based Stack Navigator. The Native Stack Navigator is not yet supported and it is not yet clear whether this can be supported in the future.
• React Navigation 6 Group components are not yet supported.
• On detaching inactive screens a blink may occur on Android. Because of this detachInactiveScreens is set to false by default on Android.

Demo App

• ./example
• react-navigation-shared-element-demo

Videos

• Snapchat Shared Transitions - “Can it be done in React Native?” (with react-navigation v5)
• Airbnb Shared Transition - “Can it be done in React Native?” (with react-navigation v4)

License

React navigation shared element library is licensed under The MIT License.