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

• borderRadius
• children
• containerStyle
• fullScreen
• height
• isVisible
• overlayBackgroundColor
• onBackdropPress
• overlayStyle
• width
• windowBackgroundColor

---

Reference

borderRadius

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)