Navigating from a nested screen to another nested screen in a different Tab Stack (react-navigation)

Question

I'm using react navigation 5 (with react native) and my navigation set up looks like this:

// Root
<NavigationContainer>
  <RootStack.Navigator mode="modal" headerMode="none">
    <RootStack.Screen name="Auth" component={AuthStackNavigator} />
    <RootStack.Screen name="App" component={BottomTabsNavigator} />
  </RootStack.Navigator>
</NavigationContainer>

// App
<Tab.Navigator tabBar={bottomTabBar}>
  <Tab.Screen name="ScreenA1" component={StackA} />
  <Tab.Screen name="ScreenB1" component={StackB} />
</Tab.Navigator>

// TAB A
<StackA.Navigator headerMode="none">
  <StackA.Screen name="ScreenA1" component={ScreenA1} />
  <StackA.Screen name="ScreenA2" component={ScreenA2} />
</StackA.Navigator>

// TAB B
<StackB.Navigator headerMode="none">
  <StackB.Screen name="ScreenB1" component={ScreenB2} />
  <StackB.Screen name="ScreenB2" component={ScreenB2} />
</StackB.Navigator>

So inside my App i have 2 Bottom Tabs (Tab A and Tab B) each having 2 nested screens (Screen A1>A2 and B1>B2). So when i tap on Tab A i go to ScreenA1 then in there i can move on to ScreenA2. Same for Tab B. Now on ScreenB2 from Tab B i have a button that should navigate the user to Screen A2 with some data to prefill on that screen.

If i do it like this:

navigation.navigate('ScreenA1', {
  screen: 'ScreenA2',
  params: { data },
});

I'll land on ScreenA2 with the data, but:
If i visited ScreenA2 before, the previous state persists and i can see its old state and data.
If i never visited ScreenA2 before it's now not inside the Tab A Stack, but instead pushed on top of ScreenB2.

So i guess i would need to reset the screen before i navigate to it (or unmount whenever i leave it) and also make sure that it gets put inside the Tab A Stack on creation, so when i try to call goBack from Screen A2 i land on Screen A1. Maybe navigate back to root first and call the screen from there without the user seeing all screens flashing up.

sanjar · Accepted Answer · 2021-10-15 22:38:01Z

0

You can replace

navigation.navigate('ScreenA1'...

By

navigate.push('ScreenA1'...

That way, a new route will be added to your navigation stack, with new state and props.

answered Oct 15, 2021 at 22:38

sanjar

1,1012 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reenav0815 Over a year ago

But then it'll just add more screens (and i would have to unmount them somehow anyways) and issue 2 would also not be solved

reenav0815 · Accepted Answer · 2021-10-18 16:43:51Z

0

Resolved it with this:

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: 'ScreenA1',
        state: {
          routes: [
            {
              name: 'ScreenA1',
            },
            {
              name: 'ScreenA2',
              params: { data },
            },
          ],
        },
      },
    ],
  }),
);

Notice how i have 'ScreenA1' twice in there. I guess that's necessary because the Navigator and the first Screen inside the Navigator share the same route name

answered Oct 18, 2021 at 16:43

reenav0815

1112 silver badges7 bronze badges

Collectives™ on Stack Overflow

Navigating from a nested screen to another nested screen in a different Tab Stack (react-navigation)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related