Skip to main content
Version: 1.2.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​

import { Overlay } from 'react-native-elements';

<Overlay isVisible={this.state.isVisible}>
<Text>Hello from Overlay!</Text>
</Overlay>;

{
this.state.visible && (
<Overlay isVisible>
<Text>Hello from Overlay!</Text>
</Overlay>
);
}

<Overlay
isVisible={this.state.isVisible}
windowBackgroundColor="rgba(255, 255, 255, .5)"
overlayBackgroundColor="red"
width="auto"
height="auto"
>
<Text>Hello from Overlay!</Text>
</Overlay>;

<Overlay
isVisible={this.state.isVisible}
onBackdropPress={() => this.setState({ isVisible: false })}
>
<Text>Hello from Overlay!</Text>
</Overlay>;

Props​

Also receives all Modal props


Reference​

borderRadius​

Border radius for the overlay

TypeDefault
number3

children​

What the modal will render

TypeDefault
React Elementnone

containerStyle​

Style of the overlay 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

height​

Height of the overlay

TypeDefault
string or numberwindow height - 180

isVisible​

If true, the overlay is visible

TypeDefault
booleanfalse

overlayBackgroundColor​

Background color of the actual overlay

TypeDefault
stringwhite

overlayStyle​

style of the actual overlay

TypeDefault
View Style (object)Internal Style

onBackdropPress​

callback for overlay background press

TypeDefault
functionnone

width​

Width of the overlay

TypeDefault
string or numberwindow width - 80

windowBackgroundColor​

Background color for the overlay background

TypeDefault
stringrgba(0, 0, 0, .5)