Skip to main content
Version: 3.4.2

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 React, { useState } from 'react';
import { Button, Overlay } from 'react-native-elements';

const OverlayExample = () => {
const [visible, setVisible] = useState(false);

const toggleOverlay = () => {
setVisible(!visible);
};

return (
<View>
<Button title="Open Overlay" onPress={toggleOverlay} />

<Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
<Text>Hello from Overlay!</Text>
</Overlay>
</View>
);
};

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

Also receives all Modal props


Reference

children

What the modal will render

TypeDefault
React Elementnone

backdropStyle

Style of the backdrop container

TypeDefault
View Style (object)Internal Style

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
booleanfalse

ModalComponent

override React Native Modal component (usable for web-platform)

TypeDefault
React Native ComponentModal

overlayStyle

style of the actual overlay

TypeDefault
View Style (object)Internal Style

onBackdropPress

handler for backdrop press (only works when fullscreen is false)

TypeDefault
functionnone

Also See

Dialog