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)