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