Skip to main content
Version: 4.0.0-beta.0

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​


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​

Overlay​

Reference​

Overlay​

ModalComponent​

Override React Native Modal component (usable for web-platform).

TypeDefault
anyNone

backdropStyle​

Style of the backdrop container.

TypeDefault
View style(Object)None

fullScreen​

If set to true, the modal will take up the entire screen width and height.

TypeDefault
booleanfalse

isVisible​

If true, the overlay is visible.

TypeDefault
booleanNone

onBackdropPress​

Handler for backdrop press (only works when fullscreen is false).

TypeDefault
FunctionFunction

overlayStyle​

Style of the actual overlay.

TypeDefault
View style(Object)None

pressableProps​

TypeDefault
Omit<PressableProps, "onPress" or "onLongPress" or "onPressIn" or "onPressOut">None