hub / github.com/IjzerenHein/react-navigation-shared-element
github.com/IjzerenHein/react-navigation-shared-element @v3.1.4
Chat with this repo
172 symbols
554 edges
101 files
3 documented · 2%
1 cross-repo links
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
LOOKING FOR A NEW HOME OR MAINTAINER
Both react-native-shared-element and react-navigation-shared-element are looking for a new Home or Maintainer. It is no longer possible for me to maintain these repositories. Please reach out to me personally if you want to take over maintenance or have ideas or suggestions for a new home.
Read the full statement here.
React Navigation Shared Element
React Navigation bindings for react-native-shared-element 💫
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-elementuses the JS based Stack Navigator. The Native Stack Navigator is currently under development here. Also see this issue.- React Navigation 6
Groupcomponents are not yet supported. - On detaching inactive screens a blink may occur on Android. Because of this
detachInactiveScreensis set tofalseby default on Android.
Demo App
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)
Sponsors
This library is made possible by these wonderful people and companies.
License
React navigation shared element library is licensed under The MIT License.
Extension points exported contracts — how you extend this code
ISharedElementRendererData (Interface)
(no doc) [4 implementers]
src/SharedElementRendererData.ts
SharedElementCompatRoute (Interface)
(no doc) [2 implementers]
src/types.ts
Item (Interface)
(no doc)
example/src/data/types.ts
Core symbols most depended-on inside this repo
createScreen
called by 36
example/src/screens/createScreen.tsx
createSharedElementStackNavigator
called by 27
src/v4/createSharedElementStackNavigator.tsx
createSharedElementStackNavigator
called by 26
src/createSharedElementStackNavigator.tsx
addListener
called by 10
src/utils/EventEmitter.ts
updateRoute
called by 8
src/SharedElementSceneData.ts
updateSceneState
called by 6
src/SharedElementRendererData.ts
debug
called by 6
src/SharedElementRendererData.ts
getScene
called by 6
src/SharedElementRendererData.ts
Shape
Languages
TypeScript87%
Java13%
Modules by API surface
src/SharedElementRendererData.ts25 symbols
src/SharedElementSceneData.ts13 symbols
src/createSharedElementScene.tsx10 symbols
example/android/app/src/main/java/nl/ijzerenhein/navigationsharedelementexample/MainApplication.java10 symbols
src/v4/createSharedElementScene.tsx9 symbols
src/SharedElementRendererProxy.ts9 symbols
src/v4/createSharedElementStackNavigator.tsx8 symbols
src/SharedElementCompatRouteProxy.ts8 symbols
src/createSharedElementStackNavigator.tsx5 symbols
src/SharedElementRendererView.tsx5 symbols
src/SharedElement.tsx5 symbols
example/android/app/src/main/java/nl/ijzerenhein/navigationsharedelementexample/MainActivity.java5 symbols
Used by 1 indexed graphs manifest dependencies, hub-wide
For agents
$ claude mcp add react-navigation-shared-element \
-- python -m otcore.mcp_server <graph>