Skip to main content

Modal

<Modal visible={isVisible} onBackgroundPress={() => console.log('background pressed')}>
 <Text text60>Content</Text>
</Modal>
TIP
This component extends the Modal props.
APIThis is the list of additional props for the component

accessibilityLabel
string
​

Overrides the text that's read by the screen reader when the user interacts with the element.\By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

blurView
JSX.Element
​

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

blurView
JSX.Element
​

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

enableModalBlur
boolean
​

Blurs the modal background when transparentiOS only

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
(event: GestureResponderEvent) => void
​

allow dismissing a modal when clicking on its background

onBackgroundPress
function
​

Allow dismissing a modal when clicking on its background

overlayBackgroundColor
string
​

The background color of the overlay

overlayBackgroundColor
string
​

The background color of the overlay

testID
string
​

The modal's end-to-end test identifier

useGestureHandlerRootView
boolean
​

Should add a GestureHandlerRootView

useGestureHandlerRootView
boolean
​

Should add a GestureHandlerRootView

useKeyboardAvoidingView
boolean
​

Should add a KeyboardAvoidingView (iOS only)