react navigation v6 and v5, Disable swipe back action

user_12090310 0
Viewed 31758

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

react-navigation react-native ios
3 Answers

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>
user_97432430 
/* -------------------------------------------------------------------------- */
/*                                 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>
  );
}
user_120903100
user_51355780
Related