IjzerenHein / IjzerenHein/react-navigation-shared-element
Bottom Tabs Navigator breaking Transition
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
## Description
In v3 and v5 a [Bottom Tabs Navigator](https://reactnavigation.org/docs/tab-based-navigation/) still breaks the Shared Element Transition.
This is a known issue (see https://github.com/IjzerenHein/react-navigation-shared-element/issues/42#issuecomment-625457009), I just wanted to create a dedicated issue to this (maybe for future PRs).
## Workaround
A common workaround for this issue is to wrap the Tabs inside an extra SharedElement Stack Navigator:
```ts
const SharedElementStack = createSharedElementStackNavigator();
function HomeScreenStack(): JSX.Element {
return (
);
}
```
But even with this workaround the issue is not solved. See [demo](#demo)
## Demo
[Demo Video on streamable](https://streamable.com/nigj5q)
In this demo I'm using the following Setup:
* Shared Element Stack Navigator (with `sharedElements`)
- Bottom Tabs Navigator
+ Shared Element Stack Navigator (no configuration)
* HomeScreen (containing ``)
+ Shared Element Stack Navigator (no configuration)
* HeartScreen
+ Other Screen
+ Other Screen
- Post Details Screen (containing ``)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the linked demo with the v3/v5 Bottom Tabs Navigator setup and the documented Shared Element Stack workaround. Trace the navigator configuration around HomeScreen and Post Details Screen; done means the shared-element transition no longer breaks when tabs are present.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100