Skip to main content
Version: 4.0.0-rc.4


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 { Overlay } from "@rneui/themed";


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} ... />



Includes all View props.

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