IjzerenHein / IjzerenHein/react-navigation-shared-element

[v4] Normal react-navigation transition when using createBottomTabNavigator

Open
#76 2 comments 1 reaction 0 assignees View on GitHub
tabs
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

Hey there, amazing module!

I'm having problems with getting this working with a combination of stacks and bottom tabs.

I have my stack/tab structure set up like so:

```jsx
const TestBottom = createBottomTabNavigator({
Test1: {
screen: Test1
},
})

const RootStack = createSharedElementStackNavigator(
{
TestBottom: TestBottom,
Test2: Test2,
},
)

const AppContainer = createAppContainer(RootStack)
```

My goal is to transition from `Test1` to `Test2`.

With the current setup, the transition is the normal wipe transition from react-navigation.

If I change `TestBottom: TestBottom` to `Test1: Test1` in the `RootStack` it works perfectly!

Ideally I also need `Test1` and `Test2` to be stacks but this seems to be the root of the problem.

I can see that you do have this setup [in this example](https://github.com/IjzerenHein/react-navigation-shared-element/blob/master/example/src/tests/BottomTabs2.v4.tsx) however it's not working in my case.

Any ideas?

---

I am using the following modules:

```
"react-native": "0.61.2",
"react-native-shared-element": "^0.7.0",
"react-navigation": "4",
"react-navigation-shared-element": "2.3.0",
"react-navigation-stack": "2",
"react-navigation-tabs": "^2.8.13",
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Compare the reported navigator structure with example/src/tests/BottomTabs2.v4.tsx, then reproduce it using the listed dependency versions. Trace how the transition behaves when TestBottom contains Test1 and Test2 is in RootStack; done means the Test1-to-Test2 navigation uses the shared-element transition while the nested navigator structure remains supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.