Skip to main content

Modal

<Modal
  visible={visible}
  onBackgroundPress={() => setVisible(false)}
  overlayBackgroundColor="rgba(0, 0, 0, 0.7)"
>
  <View>
    <Text>Modal Content</Text>
  </View>
</Modal>
APIThis is the list of additional props for the component

blurView
JSX.Element
​

A custom view to use as a BlueView instead of the default one

enableModalBlur
boolean
​

Blurs the modal background when transparent (iOS only)

fixReanimatedInteraction
boolean
​

Fix RNModal's interaction with react-native-reanimated (Android only, default: true)

keyboardAvoidingViewProps
object
​

Send additional props to the KeyboardAvoidingView (iOS only)

onBackgroundPress
function
​

Allow dismissing a modal when clicking on its background

overlayBackgroundColor
string
​

The background color of the overlay

useGestureHandlerRootView
boolean
​

Should add a GestureHandlerRootView

useKeyboardAvoidingView
boolean
​

Should add a KeyboardAvoidingView (iOS only)