React Native disable swiping StackNavigator in TabNavigator

10
votes

I have TabNavigator with screens 1 and 2 and inside screen 1 I have StackNavigator with screens 1.1 and 1.2. I have enabled swiping and gestures. From root I can swipe tabs between 1 and 2. When I'm on screen 1 and I open screen 1.1 I still can swipe to screen 2 and this ability I need to disabled somehow when the 1.1 screen is open.

I need it to work just like Instagram app (ios). When you are on home screen (1) you can swipe left to see Direct screen (2). When you open friends profile from home screen (1) it opens it as screen (1.1) and you can't swipe left to open Direct screen (2). You can only go back.

I have this functionality working just fine but with this "bug" where I can navigate from screen 1.1 to screen 2.

I tried a lot to solve this in different ways by reading docs and other people problems with navigation but somehow doesn't really work as I need. I suppose something is wrong with my nested screen structure or something or it's solved in different way.

Does someone has a clue?

3
reactjsreact-nativereact-navigation

3 Answers

19
votes

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,
    },
    ...
  }
);
7
votes

In React Navigation v5 is gestureEnabled and not gesturesEnabled.

https://reactnavigation.org/docs/stack-navigator/#gestureenabled

5
votes

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