react-nativereact-navigation

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


Solution

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