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)