Skip to main content
Version: Bleeding Edge 🚧

Overlay

The Overlay is a view that floats above an app’s content. Overlays are an easy way to inform or request information from the user.

Import

import { Overlay } from "@rneui/themed";

Usage


Web-platform specific note:

You must pass a valid React Native Modal component implementation into ModalComponent prop because Modal component is not implemented yet in react-native-web

...
import Modal from 'modal-react-native-web';

...

<Overlay ModalComponent={Modal} ... />
...

Props

note

Includes all View props.

NameTypeDefaultDescription
ModalComponenttypeof ComponentOverride React Native Modal component (usable for web-platform).
backdropStyleView StyleStyle of the backdrop container.
fullScreenbooleanfalseIf set to true, the modal will take up the entire screen width and height.
isVisiblebooleanIf true, the overlay is visible.
onBackdropPressFunctionFunctionHandler for backdrop press (only works when fullscreen is false).
onLongPressGestureResponderEventHandlerCalled when a long-tap gesture is detected.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
overlayStyleView StyleStyle of the actual overlay.
pressablePropsPressableProps except click handlersNone