navigation.goBack() not working in nested navigation

user_11142574 0
Viewed 721

my screens are arranged this way:

main root Stack navigator has 2 screens

  1. Login
  2. Drawer

The drawer is a Drawer Navigator, having three screens

  1. Home
  2. Profile
  3. Settings

Home is a Bottom Tab Navigator having multiple Screens like

  1. Dashboard
  2. Reminder etc ...

So the issue is whenever I am in any sub-screen of let's say reminder and I want to close it by navigation.goBack() it takes me to Dashboard, what I want is to land back on reminder

PS. the sub screen is also in the tab navigator I have hidden it with filter

react-native-tabnavigator react-native-drawer react-navigation-v5 react-native reactjs
2 Answers

Read the following code and try it, don't forget to import it. The way I've done it is putting the drawer above in the file DrawerNavigator.js:

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {
    return(
      <Drawer.Navigator initialRouteName='TabNavigator'>
        <Drawer.Screen name='Home' component={TabNavigator}/>
        <Drawer.Screen name='Profile' component={ProfileStackScreen}/> 
        <Drawer.Screen name='Settings' component={SettingsStackScreen}/>
      </Drawer.Navigator>
    )
}

export default DrawerNavigator

Here I insert the TabNavigator(Only one of the options in the Drawer will have te bottom tab navigator, the Home one. The TabNavigator.js will have all the bottom tab screens:

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator initialRouteName='Dashboard'>
                <Tab.Screen name="Dashboard" component={DashboarStackScreen} />
                <Tab.Screen name='Reminder' component={ReminderStackScreen}/>
          </Tab.Navigator>
    )
}

export default BottomTabNavigator

In the StackNavigator.js you will enter every stack screens you might want to use:

const Stack = createStackNavigator()

const DashboardStackScreen = () => {

  return (
    <Stack.Navigator >
    {/*INSERT STACK SCREENS HERE*/}
    </Stack.Navigator>
  )
}


const ReminderStackScreen = () => {
  return (
    <Stack.Navigator  >
    {/*INSERT STACK SCREENS HERE*/}
    </Stack.Navigator>
  )
}


const ProfileStackScreen = () => {
  return(
    <Stack.Navigator  >
      {/*INSERT STACK SCREENS HERE*/}
    </Stack.Navigator>
    
  )
}

const SettingsStackScreen = () => {
  return(
    <Stack.Navigator >
      {/*INSERT STACK SCREENS HERE*/}
    </Stack.Navigator>
  )
}

export {DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen}

If this doesn't solve your problem, let me know.

user_146769240

You can use a StackNavigator for each tab of the BottomTabNavigator, which contains the screens for that tab. Every tab will then have its own navigation stack.

user_43408540
Related