react navigation v6 and v5, Disable swipe back action

Question

I'm working with react navigation 5 :

I created MainStackScreen and AuthStackScreen,

const AuthStack = createStackNavigator();

function AuthStackScreen() {
  return (
    <AuthStack.Navigator headerMode="none">
      <AuthStack.Screen name="Main" component={Main} />
      <AuthStack.Screen name="Login" component={Login} />
      <AuthStack.Screen name="Registration" component={Registration} />
      <AuthStack.Screen name="Home" component={DrawerNavigator} />
      <AuthStack.Screen name="Notifications" component={Notifications} />
      <AuthStack.Screen name="SmsValidation" component={SmsValidation} />
      <AuthStack.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
    </AuthStack.Navigator>
  );
}

MainStackScreen :

const MainScreen = createStackNavigator();

function MainStackScreen({navigation}) {
  return (
    <MainScreen.Navigator>
      <MainScreen.Screen name="Main" component={Main} />
      <MainScreen.Screen name="SmsValidation" component={SmsValidation} />
      <MainScreen.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
    </MainScreen.Navigator>
  );
}

I want to prevent IOS swipe action back between Login my screens

set getureEnabled to false on any route you want to disable swiping. This might help https://reactnavigation.org/docs/stack-navigator/#gestureenabled — Sameer Kumar Jain, Sep 22 '20 at 15:12
As the answers mention, you should pass `gestureEnabled: false`, but be aware that using nested stacks might require you to do the same with parent Screens/Navigators. It took me a while to understand why the gesture was still working and it was because the gesture was disable in the child stack, but enable in the parent stack and then I was going back to the parent. — Vencovsky, Apr 07 '21 at 21:07

Arif Arifi · Accepted Answer · 2021-03-15T23:02:59.243

117

You can set gestureEnabled to false in a screen like:

<AuthStack.Screen
   name="Login"
   component={Login}
   options={{gestureEnabled: false}}
/>

Or the whole navigator like:

<AuthStack.Navigator screenOptions={{gestureEnabled: false}}>
  ...
</AuthStack.Navigator>

edited Mar 15 '21 at 23:02

answered Sep 22 '20 at 16:06

Arif Arifi

1,302
1
7
9

4

You can also tack it onto the whole navigator if you want to apply it to every screen - `` – Micheal C Wallas Mar 07 '21 at 00:27

score 4 · Answer 2 · answered Sep 23 '20 at 11:31

/* -------------------------------------------------------------------------- */
/*                                 AUTH STACK                                 */
/* -------------------------------------------------------------------------- */

const AuthStack = createStackNavigator();

function AuthStackScreen() {
  return (
    <AuthStack.Navigator headerMode="none">
      <AuthStack.Screen name="Main" component={Main} />
      <AuthStack.Screen name="Login" component={Login} options={{gestureEnabled: false}} />
      <AuthStack.Screen
        name="Registration"
        component={Registration}
        options={{gestureEnabled: false}}
      />
      <AuthStack.Screen name="Home" component={DrawerNavigator} options={{gestureEnabled: false}} />
      <AuthStack.Screen
        name="Notifications"
        component={Notifications}
        options={{gestureEnabled: false}}
      />
      <AuthStack.Screen
        name="SmsValidation"
        component={SmsValidation}
        options={{gestureEnabled: false}}
      />
      <AuthStack.Screen
        name="MoreRegistrationInfo"
        component={MoreRegistrationInfo}
        options={{gestureEnabled: false}}
      />
    </AuthStack.Navigator>
  );
}

score 1 · Answer 3 · answered Sep 22 '20 at 15:23

1

You can set a beforeRemove listener to prevent going back. React Navigation Docs

answered Sep 22 '20 at 15:23

Steven Bell

1,755
10
20

score 0 · Answer 4 · answered Jul 12 '23 at 11:14

0

Maybe this is already just for navigation v6 relevant, but swipeEnabled worked for me.

<AuthStack.Screen
  name="Login"
  component={Login}
  options={{swipeEnabled: false}}
/>

answered Jul 12 '23 at 11:14

lortschi

2,768
2
18
12

react navigation v6 and v5, Disable swipe back action

4 Answers4