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.

Usage

Import

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

Theme Key

Overlay

---

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.

Name	Type	Default	Description
ModalComponent	typeof Component		Override React Native Modal component (usable for web-platform).
backdropStyle	View Style		Style of the backdrop container.
fullScreen	boolean	false	If set to true, the modal will take up the entire screen width and height.
isVisible	boolean		If true, the overlay is visible.
onBackdropPress	Function	Function	Handler for backdrop press (only works when fullscreen is false).
onLongPress	GestureResponderEventHandler		Called when a long-tap gesture is detected.
onPressIn	GestureResponderEventHandler		Called when a touch is engaged before onPress.
onPressOut	GestureResponderEventHandler		Called when a touch is released before onPress.
overlayStyle	View Style		Style of the actual overlay.
pressableProps	PressableProps except click handlers	None