React Native disable swiping StackNavigator in TabNavigator
Each screen in the tab can have a navigation option swipeEnabled
set individually.
Take a look at the Tab Navigator Screen Navigation Options docs.
MyScreen.navigationOptions = ({navigation}) => ({
swipeEnabled: false
});
You can set that value to be the result of a function that checks whether the stack navigator has been navigated into or not.
Update - react-navigation 3
This property was removed, and replaced with gesturesEnabled
.
You can set the value for each screen individually, or set a default at the navigator configuration level.
const navigator = createStackNavigator(
{
Main: { screen: Main },
...
},
{
defaultNavigationOptions: {
gesturesEnabled: false,
},
...
}
);
In React Navigation v5 is gestureEnabled
and not gesturesEnabled
.
https://reactnavigation.org/docs/stack-navigator/#gestureenabled
Although it's a bit old thread, I wanted to maybe save some folks from rushing through old and useless GitHub posts where old React Navigation versions are discussed.
For React Navigation 5, just create StackNavigator and pass options
prop with { gestureEnabled: false }
value to screen which should not react to gestures:
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const MyStack = () => {
return (
<Stack.Navigator
initialRouteName="Home"
headerMode="screen"
>
<Stack.Screen
name="Settings"
component={Settings}
// disable gestures for one specific screen
options={{
gestureEnabled: false,
}}
/>
</Stack.Navigator>
);
}
Read more here: https://reactnavigation.org/docs/stack-navigator/#example