CODEWITHSUNDEEP
react-nativereact-navigation-v5
Bayram
Bayram

Reputation: 515

How to disable swipe action in specific screen on react navigation 5?

im using react navigation 5 on my project, and somewhere in the project i need to make nested navigators like below:

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

My goal is, actually i want to have 3 static screens like instagram. On the left side will be Camera, then in the center actual content and in the right side something else. And only when you are in center i want to bottom tabs are visible thats why i created it like that. In this case in all the screens you can swipe right or left for reaching to camera or right component.

But what i want to do is, i want do "disable" swipe action in detail screens in center component. Becose center component which is material bottom tab navigator above, contains some stack navigators also, like posts, postDetail. and when i go to postDetail i want to disable swipe left or right action. Becouse in some details im using some swipeable elements like react native swiper etc.

I have tried to give gesturesEnabled: false , swipeEnabled: false in material bottom navigator as props but it doesn't work becouse it's a bottom tab navigator and doesn't take these params.

I also tried to catch state index and if its greater than 0 or 1 i would disable it but in material top tab navigator doesn't change the index when i go to postDetail for example. It's not working like previous version which is react navigation 4.

const BlogStack = createMaterialTopTabNavigator();
const BlogStackNavigator = ({ navigation, route }) => {
  return (
    <BlogStack.Navigator
      initialRouteName="Blogs"
      tabBarOptions={{
        style: {
          height: 0,
        },
      }}
      //swipeEnabled={route.state && route.state.index > 0 ? false : true}
    >
      <BlogStack.Screen name="Camera" component={Camera} />
      <BlogStack.Screen name="Blogs" component={Blog} />
      <BlogStack.Screen name="Timeline" component={Profile} />
    </BlogStack.Navigator>
  );
};

Upvotes: 3

Views: 9373

Answers (2)

Kusal Shrestha
Kusal Shrestha

Reputation: 1673

Try setting gestureEnabled to false in Screen's options.

<Screen name={key} options={{gestureEnabled: false}} component={Component} />

Upvotes: 6

Cristian
Cristian

Reputation: 291

You need to set gestureEnabled to false but it's not sent as a prop. You need to set it in the options prop. If you want to set it for all screens you can place it in the navigator like this: 

<BlogStack.Navigator
                initialRouteName="Blogs"
                tabBarOptions={{
                    style: {
                        height: 0,
                    },
                }}
                screenOptions={{gestureEnabled: false}}
            >

or for only specific screens:

<BlogStack.Screen name="Camera" options={{gestureEnabled: false}} component={Camera} />

Upvotes: 0

Related Questions