CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Ken
Ken

Reputation: 1461

React Navigation routes disappear from history on navigate

I have a screen in my app (CameraScreen) that is both in my Tab Navigator and Stack Navigator shown below (there are some more Tab Screens and Stack Screens that I removed for simplicity):

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Camera"
        component={CameraScreen}
      />
    </Tab.Navigator>
  );
};

const Navigation = () => {
  return (
    <NavigationContainer theme={Theme}>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Camera" component={TabNavigator} />
        <Stack.Screen name="Product" component={ProductScreen} />
        <Stack.Screen name="CameraStack" component={CameraScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Now if I navigate to ProductScreen, then navigate to CameraStack from there and check the navigation state I notice that ProductScreen is nowhere to be found in the routes which I checked using navigation.getState().routes. Thus if I try and use navigation.goBack() it does not go back to the ProductScreen (which would be the expected behaviour).

When I check the routes in ProductScreen, ProductScreen shows up as the last route, however this disappears when I navigate to CameraStack.

I have a hunch that this has to do with the fact that CameraScreen is in both the Tab Navigator and Stack Navigator so for some reason the navigation prop passed to Camera is the Tab Navigator.

For reference my CameraScreen (simplified):

const CameraScreen = ({ navigation, route }) => {
  // this doesn't include ProductScreen even if I navigate to CameraStack from the ProductScreen
  console.log(navigation.getState().routes);
  return (
    <View></View>
  );
};

and ProductScreen (simplified):

const ProductScreen = ({ navigation }) => {
  return (
    <View>
        <TouchableOpacity
          onPress={() => navigation.navigate("CameraStack")}
        >
        </TouchableOpacity>
    </View>
  );
};

One idea I can think of to resolve this issue is to manually pass a navigation parameter from ProductScreen but I'm wondering if there is a better way to handle this issue.

Upvotes: 2

Views: 1978

Answers (2)

Murtaza Vadnagarwala
Murtaza Vadnagarwala

Reputation: 341

Handle backBehavior prop in your Navigator

<Tab.Navigator backBehavior='history'>
    <Screen ... />
    <Screen ... />
<Tab.Navigator/>

https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior

Upvotes: 2

Ken
Ken

Reputation: 1461

I realized this had nothing to do with the fact that I had this screen in both the Tab Navigator and Stack Navigator but was occurring because I was navigating to the same screen using navigation.navigate instead of navigation.push.

The former navigates to the previous location in your stack if you navigate to a screen you've already visited before, but the latter pushes a new route to the navigation state even if it's a screen you've already visited.

Upvotes: 2

Related Questions