CODEWITHSUNDEEP
react-nativereact-navigation
GollyJer
GollyJer

Reputation: 26682

How do you disable "Swipe down to close" on the Modal component in React Native?

I'm using the core React Native Modal component. Within the modal content I have a Done button.

Pressing Doneis the only way we want users to close the modal. But the Modal component allows swiping down from the top of the screen to close.

How do you turn off "swipe to close"?

Upvotes: 26

Views: 27580

Answers (4)

GollyJer
GollyJer

Reputation: 26682

To answer @Nikolai in the comments, I am using React Navigation.

I didn't realize the gesture settings from the navigator also controls the gestures of the react native modal.

Turning off gestures solved my problem.

const HomeScreenContainer = StackNavigator(
  {
    HomeScreen: { screen: Screens.HomeScreen },
    PostScreen: { screen: Screens.PostScreen },
    CameraScreen: { screen: Screens.CameraScreen },
    CameraRollScreen: { screen: Screens.CameraRollScreen },
  },
  {
    navigationOptions: {
      gestureEnabled: false,
    },
  },
);

Upvotes: 34

Mazin Luriahk
Mazin Luriahk

Reputation: 878

Since React Navigation Version 5.x, they have changed it to gestureEnabled instead of gesturesEnabled (without the 's) for both StackNavigator and DrawerNavigator

Sample usage:

<Stack.Navigator mode="modal" screenOptions={{ gestureEnabled: false }}>
    <Stack.Screen name="HomeNav" component={HomeNavigator} />
</Stack.Navigator>

Upvotes: 11

HumanCEO
HumanCEO

Reputation: 2561

Struggled with it a bit too. Here is what worked for me:

If you have root navigator as modal and inside it another stacked navigator for which you want to disable gestures, then put this inside root navigator for the stacked navigator, worked for me in v2.12 iOS
navigationOptions: { gesturesEnabled: false, },

here's full code:

const RootStack = createStackNavigator(
  {
    LoginNavigator: {
      screen: LoginNavigator,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
    ModerationNavigator: {
      screen: ModerationNavigator,
    },
    WalletNavigator: {
      screen: WalletNavigator,
    },
    FloatingNavigator: {
      screen: FloatingNavigator,
    },
    UIKitNavigator: {
      screen: UIKitNavigator,
    },
    MainMapViewScreen: {
      screen: MainMapViewScreen,
    },
    FullscreenPhotoScreen: {
      screen: FullscreenPhotoScreen,
    },
  },
  {
    mode: 'modal',
    initialRouteName: 'MainMapViewScreen',
    headerMode: 'none',
    header: null,
  },
);

Upvotes: 12

Sam Bellerose
Sam Bellerose

Reputation: 1812

In addition to @GollyJer's answer, if you want to disable the swipe gesture for a single Modal you can also do this:

const AppNavigator = StackNavigator({
    ModalScreen: {
      screen: ModalScreen,
      navigationOptions: {
        gesturesEnabled: false
      },
    }
}

Upvotes: 7

Related Questions