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

GollyJer picture GollyJer · Mar 14, 2018 · Viewed 13k times · Source

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

GollyJer picture GollyJer · Apr 6, 2018

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