How to Disable back swipe option or pop a route in React Navigation?

Question

I have a Login Page(StackNavigator) and a Tabbed pages(TabNavigator).

export const Root = StackNavigator({
  LoginScreen: {screen: Login},
  Tabs: {screen: Tabs}
},
  {
  initialRouteName: 'LoginScreen'
  }
)

After logging the user in there is still a possibility for the user to go back(to Login Page) by swiping back. What is the way of popping the login route from the Route Stack or disabling the back swipe option. Thanks

score 2 · Accepted Answer · answered Jun 12 '17 at 19:29

2

Dispatch a reset action instead of the normal navigation dispatch. That way you can set the stack to the state you want it to be after logging in and remove your LoginScreen from the stack.

Example related answers:

answered Jun 12 '17 at 19:29

Michael Cheng

9,644
6
46
48

Thanks for great resources, helped out a lot. – Nikasv Jun 13 '17 at 04:51

score 0 · Answer 2 · answered Jun 29 '22 at 22:04

The official way to handle it from React Navigation (v6) is to define the screens in the navigator based on an isSignedIn condition so that the Login screen will not exist within the navigator once the isSignedIn variable has been set to true.

For example:

<Stack.Navigator>
  {isSignedIn ? (
    <Stack.Screen name="Tabs" component={TabsScreen} />
  ) : (
    <Stack.Screen name="Login" component={LoginScreen} />
  )}
</Stack.Navigator>

See the Authentication Flows section for more information.

How to Disable back swipe option or pop a route in React Navigation?

2 Answers2