React native - After Navigating to nested Navigation Screen , cannot go back or view the Nested Navigation Initial route

AllenPBiju
March 19, 2024
82 views
0 votes
2 Answers

I have used MainBottomTabNavigation and StackNavigation in my app. This is my navigation Layout

Main Bottom Tab Navigation

Dashboard Screen
Screen 1 ( Stack Navigation)
- Screen A (Initial Page)
- Screen B

In my dashboard screen , I have a component that navigates from Dashboard to Screen B. On first time logging in to app, if navigation is done from Dashboard to Screen B from that component, then I cannot view the screen 1 in the normal navigation flow and only screen B appears.

If I go to screen A initially and then go to the nested navigation from dashboard, everything works fine.

<Tab.Navigator
 initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={Dashboard}
        options={{tabBarLabel: 'Dashboard'}}
      />
      <Tab.Screen
        name="Screen1"
        component={Screen1}
        options={{tabBarLabel: 'Screen 1', headerShown: false}}
      />
    </Tab.Navigator>

Stack Navigation Screen 1

<Stack.Navigator
  initialRouteName="StackHome">
      <Stack.Screen
        name="ScreenA"
        component={StackHomeScreen}
      />

      <Stack.Screen name="ScreenB" component={ScreenBScreen} />


    </Stack.Navigator>

Nested Navigation Code

          <TouchableOpacity
            onPress={() => {
              navigation.navigate('StackHome', {
                screen: 'ScreenB',
              });
            }}>

React Navigation Versions

    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/material-top-tabs": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",

Answers

- jihadrobb
- March 19, 2024 at 7:13 am
- 0 votes
0
Try using CommonActions.reset instead of navigate
```
import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      {
        name: 'StackHome',
        params: { screen: 'ScreenA' },
      },
      {
        name: 'StackHome',
        params: { screen: 'ScreenB' },
      },
    ],
  })
);
```
Login or Signup to reply.

- IbrahimKhan
- March 19, 2024 at 7:31 am
- 0 votes
0
navigation.push('StackHome', { screen: 'ScreenB', });
Try using push instead of navigate
Login or Signup to reply.