IjzerenHein / IjzerenHein/react-navigation-shared-element

Bottom Tabs Navigator breaking Transition

Open
#80 3 comments 3 reactions 0 assignees View on GitHub
tabs
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.