4

I have just moved from React Native 5.x to 6.x and now my Navigation stack is giving me issues. When I navigate a few screens deep in my drawer navigator, and then press the back button on android (haven't tried IOS yes), it leads me right back to my first screen. My Navigation stack is as follows

 <NavigationContainer theme={MyTheme}>
        <Drawer.Navigator
          initialRouteName="NewsFeed"
          drawerContent={(props) => <SideNav {...props} />}
          screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        >
          <Drawer.Screen name="NewsFeed" component={NewsFeedScreen} />
          <Drawer.Screen name="Post" component={PostScreen} />
          <Drawer.Screen name="Users" component={UsersScreen} />
          <Drawer.Screen name="User" component={UserScreen} />
    ...
        </Drawer.Navigator>
      </NavigationContainer>

I'm unsure what the issue is and haven't found any answers anywhere. Some say to wrap each screen in it's Stack navigator, others say it's a bad idea.

Emad Said
  • 41
  • 2

1 Answers1

6

I am not sure if this is what you are asking for, but as for changes listed in the React Navigation Upgrading from 5.x help page:

The default value for backBehavior is now firstRoute for tabs and drawer

and then:

To preserve old behavior, you can pass backBehavior="history" prop to the navigators

So you can properly set backBehavior prop in your code like below:

<NavigationContainer theme={MyTheme}>
    <Drawer.Navigator
        initialRouteName="NewsFeed"
        drawerContent={(props) => <SideNav {...props} />}
        screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        backBehavior="history"  // <-- ADDED PROP
    >
    ...
</NavigationContainer>
KoappesT
  • 106
  • 6