<!-- To show the guide to configure the Overlay Component to a project.
This is not added as description in comments of the component so is added here. -->

---

> **Web-platform specific note**:
>
> You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation
> into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web`

```jsx
...
import Modal from 'modal-react-native-web';

...

<Overlay ModalComponent={Modal} ... />
...
```

```SnackPlayer name=RNE Overlay
import React, { useState } from 'react';
import { Button, Overlay, Icon } from '@rneui/themed';
import { View, Text, StyleSheet } from 'react-native';

type OverlayComponentProps = {};

const OverlayComponent: React.FunctionComponent<OverlayComponentProps> = () => {
const [visible, setVisible] = useState(false);

const toggleOverlay = () => {
  setVisible(!visible);
};

return (
  <View>
    <Button
      title="Open Overlay"
      onPress={toggleOverlay}
      buttonStyle={styles.button}
    />
    <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
      <Text style={styles.textPrimary}>Hello!</Text>
      <Text style={styles.textSecondary}>
        Welcome to React Native Elements
      </Text>
      <Button
        icon={
          <Icon
            name="wrench"
            type="font-awesome"
            color="white"
            size={25}
            iconStyle={{ marginRight: 10 }}
          />
        }
        title="Start Building"
        onPress={toggleOverlay}
      />
    </Overlay>
  </View>
);
};

const styles = StyleSheet.create({
button: {
  margin: 10,
},
textPrimary: {
  marginVertical: 20,
  textAlign: 'center',
  fontSize: 20,
},
textSecondary: {
  marginBottom: 10,
  textAlign: 'center',
  fontSize: 17,
},
});

export default OverlayComponent;
```
