react navigation 5 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

Answer 1

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> 

Answer 2

/* -------------------------------------------------------------------------- */ /*                                 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>   ); }