IjzerenHein / IjzerenHein/react-navigation-shared-element

Shared Element Stack nested in MaterialTopTabNavigator not working

Open
#170 6 comments 0 reactions 0 assignees View on GitHub
tabs
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

When i have my shared element Stack Nested in a MaterialTopTabNavigator the transition does not work. instead it just looks like a normal navigation

Exact same code somewhat working when the Share Element Stack Nav is return instead of from the Tab navigator

Not Working:
https://user-images.githubusercontent.com/43228761/120902147-c3b10e80-c60c-11eb-9519-b6caf5a1a3ff.mp4

Somewhat Working:
https://user-images.githubusercontent.com/43228761/120902251-36ba8500-c60d-11eb-9a28-231043a1d230.mp4

the difference in navigation "tree":
Not Working:
1) Stack Nav
2) -- MaterialTopTabNavigator
3) -- -- Shared Element Stack Nav

Somewhat Working:
1) Stack Nav
2) -- Shared Element Stack Nav

in fact in the not working example if i just replace "createMaterialTopTabNavigator" with "createStackNavigator" the Not Working example works so now:
Somewhat Working:
1) Stack Nav
2) -- Stack Nav
3) -- -- Shared Element Stack Nav

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the two linked videos and the navigation trees described in the issue. Reproduce the case with MaterialTopTabNavigator, then compare it with the working StackNavigator variant. Done means the nested shared-element stack performs the intended transition instead of a normal navigation.

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.