react-native-navigation/website/docs/docs-overlay.mdx

---
id: overlay
title: Overlay
sidebar_label: Overlay
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import useBaseUrl from '@docusaurus/useBaseUrl';

Overlays are used to layout content on top of all other layout hierarchies, while fitting the screen bounds.
The contents displayed in an Overlay can either be non-obtrusive, like Toasts and Snackbars, or an Alert that blocks all interactions with any content behind it. The view contained within it should be aligned either with absolute position, flex, or with margins, all according to your needs.

## Handling touch events outside the view
When showing views like Alert or Toast in an Overlay, you would want to configure if you want to allow users to interact with content behind the alert. This is done via the [interceptTouchOutside]() option.

## Overlay examples

<Tabs
  defaultValue="alert"
  values={[
    { label: 'Alert', value: 'alert', },
    { label: 'Toast', value: 'toast', }
  ]
}>
<TabItem value='alert'>

The example below demonstrates how to create a simple alert dialog using an Overlay. Touch events outside the alert will be blocked and won't pass through to the content behind the alert since we're specifying `interceptTouchOutside: true` in the static options of the Alert.

<img width="30%" src={useBaseUrl('/img/alert_android.png')} />

```jsx
const React = require('react');
const { Text, Button, View } = require('react-native');
const { Navigation } = require('react-native-navigation');

function Alert({ componentId, title, message }) {
  const dismiss = () => Navigation.dismissOverlay(componentId);

  return (
    <View style={styles.root}>
      <View style={styles.alert}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.message}>{message}</Text>
        <Button title='OK' onPress={dismiss} />
      </View>
    </View>
  );
}

const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000050'
  },
  alert: {
    alignItems: 'center',
    backgroundColor: 'whitesmoke',
    width: 250,
    elevation: 4,
    padding: 16
  },
  title: {
    fontSize: 18
  },
  message: {
    marginVertical: 8
  }
};

Alert.options = (props) => {
  return ({
    overlay: {
      interceptTouchOutside: true
    }
  });
}

module.exports = Alert;

```

</TabItem>
<TabItem value='toast'>

The example below demonstrates how to show a Toast using an Overlay. A user can interact with the content behind the toast since we've declared `interceptTouchOutside: false` in the static options of the Alert.

<img width="30%" src={useBaseUrl('/img/toast_android.png')} />

```jsx
const React = require('react');
const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
const Colors = require('../commons/Colors');
const Navigation = require('../services/Navigation');

const Toast = function ({componentId}) {
  return (
    <View style={styles.root}>
      <View style={styles.toast}>
        <Text style={styles.text}>This a very important message!</Text>
        <TouchableOpacity style={styles.button} onPress={() => Navigation.dismissOverlay(componentId)}>
          <Text style={styles.buttonText}>OK</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: 'column-reverse',
  },
  toast: {
    elevation: 2,
    flexDirection: 'row',
    height: 40,
    margin: 16,
    borderRadius: 20,
    backgroundColor: Colors.accent,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  text: {
    color: 'white',
    fontSize: 16,
    marginLeft: 16
  },
  button: {
    marginRight: 16
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

Toast.options = {
  layout: {
    componentBackgroundColor: 'transparent'
  },
  overlay: {
    interceptTouchOutside: false
  }
}

module.exports = Toast;
```
</TabItem>
</Tabs>