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.
![](/img/overlay.png)
#
Usageimport { 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>;
#
PropsAlso receives all Modal props
borderRadius
children
containerStyle
fullScreen
height
isVisible
overlayBackgroundColor
onBackdropPress
overlayStyle
width
windowBackgroundColor
#
ReferenceborderRadius
#
Border radius for the overlay
Type | Default |
---|---|
number | 3 |
children
#
What the modal will render
Type | Default |
---|---|
React Element | none |
containerStyle
#
Style of the overlay container
Type | Default |
---|---|
View Style (object) | Internal Style |
fullScreen
#
If set to true, the modal will take up the entire screen width and height
Type | Default |
---|---|
boolean | false |
height
#
Height of the overlay
Type | Default |
---|---|
string or number | window height - 180 |
isVisible
#
If true, the overlay is visible
Type | Default |
---|---|
boolean | false |
overlayBackgroundColor
#
Background color of the actual overlay
Type | Default |
---|---|
string | white |
overlayStyle
#
style of the actual overlay
Type | Default |
---|---|
View Style (object) | Internal Style |
onBackdropPress
#
callback for overlay background press
Type | Default |
---|---|
function | none |
width
#
Width of the overlay
Type | Default |
---|---|
string or number | window width - 80 |
windowBackgroundColor
#
Background color for the overlay background
Type | Default |
---|---|
string | rgba(0, 0, 0, .5) |