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

Question

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"?

Answer 1

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: {
      gesturesEnabled: false,
    },
  },
);

Answer 2

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

Answer 3

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>

Answer 4

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
      },
    }
}