Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ijzerenhein/react-navigation-shared-element
React Navigation bindings for react-native-shared-element 💫
https://github.com/ijzerenhein/react-navigation-shared-element
magic-move react-native react-navigation shared-element shared-element-transition
Last synced: 29 days ago
JSON representation
React Navigation bindings for react-native-shared-element 💫
- Host: GitHub
- URL: https://github.com/ijzerenhein/react-navigation-shared-element
- Owner: IjzerenHein
- License: mit
- Created: 2019-08-21T11:24:03.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-31T11:22:56.000Z (over 1 year ago)
- Last Synced: 2024-10-14T22:01:51.580Z (29 days ago)
- Topics: magic-move, react-native, react-navigation, shared-element, shared-element-transition
- Language: TypeScript
- Homepage: https://github.com/IjzerenHein/react-native-shared-element
- Size: 17.2 MB
- Stars: 1,270
- Watchers: 17
- Forks: 124
- Open Issues: 91
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# LOOKING FOR A NEW HOME OR MAINTAINER
Both [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) and [react-navigation-shared-element](https://github.com/IjzerenHein/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](mailto:[email protected]) if you want to take over maintenance or have ideas or suggestions for a new home.
> Read the [full statement here](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14#issuecomment-1081601310).
# React Navigation Shared Element
React Navigation bindings for [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element) 💫
## Documentation
- [Shared element for the React Navigation 5/6 API](./docs/API.md)
- [Shared element for the React Navigation 4 API](./docs/Navigation4.md)
- [Migration guide](./docs/Migration.md)
## 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](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v2) | 3 & 4 | This version is compatible with `react-navigation-stack@2`. |
| [1.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1) | 3 & 4 | This version is compatible with `react-navigation-stack@1`. |
## Things to know
- `react-navigation-shared-element` uses the [JS based Stack Navigator](https://reactnavigation.org/docs/stack-navigator). The [Native Stack Navigator](https://reactnavigation.org/docs/native-stack-navigator) is currently [under development here](https://github.com/IjzerenHein/react-navigation-shared-element/tree/native-stack). Also see [this issue](https://github.com/IjzerenHein/react-navigation-shared-element/issues/14).
- [React Navigation 6 `Group` components](https://reactnavigation.org/docs/group/) are not yet supported.
- On [detaching inactive screens](https://reactnavigation.org/docs/stack-navigator/#detachinactivescreens) a blink may occur on Android. Because of this `detachInactiveScreens` is set to `false` by default on Android.
## Demo App
- [./example](./example)
## Videos
- [Snapchat Shared Transitions - “Can it be done in React Native?” (with react-navigation v5)](https://www.youtube.com/watch?v=NJZfRXs7nZs)
- [Airbnb Shared Transition - “Can it be done in React Native?” (with react-navigation v4)](https://www.youtube.com/watch?v=83GNiMp-qq0)
## Sponsors
This library is made possible by these wonderful people and companies.
[](https://github.com/expo)
[](https://github.com/react-navigation)
[](https://github.com/Open-Source-Collective)
[](https://github.com/haibert)
[](https://github.com/Hirbod)
[](https://github.com/gustavo-nramires)
[](https://github.com/nandorojo)
[](https://github.com/beatgig)
[](https://github.com/nuwave)
[](https://github.com/calendee)
[](https://github.com/wibb36)
[](https://github.com/hannojg)
[](https://github.com/davitykale)
[](https://github.com/nightstomp)
[](https://github.com/SteveGreenley)
## License
React navigation shared element library is licensed under [The MIT License](./LICENSE.md).