React Navigation - navigate and set history for the back button

Question

I have a react-native app using [email protected]

I have a TabNavigator (nested inside a stack navigator) with multiple tabs. Each tab contains another StackNavigator. One of these tab stacks has a list screen and a details screen.

The app is setup to receive push notifications when the app is in the background. When a user presses a push notification it opens the app and navigates them to the details/:id screen.

The problem is, if the user was not already on the list screen the back button does not have the proper history and does not appear.

How would I go about ensuring that the back button for the details screen always takes the user to the list screen?

Here is a depiction of my nested navigators

<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen name="loading">
    <Stack.Screen name="auth">
    <Stack.Screen name="app">
      <Tabs.Navigator>
         <Tabs.Screen name="community">
           <Stack.Navigator>
              <Stack.Screen name="list">.  <- list
              <Stack.Screen name="detail"> <- detail
           </Stack.Navigator>
         </Tabs.Screen>
         <Tabs.Screen name="profile">
           <Stack.Navigator>
              <Stack.screen name="edit">  <- user may already be on this screen
              ...
           </Stack.Navigator>
         </Tabs.Screen>
         ... more tabs and stacks
    </Stack.Screen>
 </Stack.Navigator>
</NavigationContainer>

Any time a user receives a push notification they will already be on one of the Stack Navigators inside the Tab Navigator. Again, the issue is the user might be on the edit screen inside the profile tab. I need to redirect them to the detail screen of the community tab but ensure the history contains the list screen for the back functionality.

GitGitBoom GitGitBoom · Accepted Answer · 2020-07-09T22:04:15

You can replace the route history using the reset action. This should get you started:

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(state => {
  // Assuming you only have the current screen in state.routes
  const routes = [{name: 'home-or-wherever'}, ...state.routes];

  return CommonActions.reset({
    ...state,
    routes,
    index: routes.length - 1,
  });
});

https://reactnavigation.org/docs/navigation-actions/#reset

React Navigation - navigate and set history for the back button

1 Answers