navigation.goBack() not working in nested navigation

Question

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

Answer 1

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.

Answer 2

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.