Version: 7.25.4

Overlay

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#

Alert
Toast
Tooltip

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.

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;

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.

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;

The example below demonstrates how to create a tooltip, (Attached overlay) using the Overlay API.

The component will be anchored to anchorId in a layerId level, at gravity side of the anchor, see.

You can use the returned id inorder to maintain the tooltip state, show/hide.

    const tooltipId = await Navigation.showOverlay(
      {
          component:{
            name: Screens.Tooltip
          }
      },
      {
        overlay: {
          attach: {
            layoutId: layoutId,
            anchor: {
              id: anchor,
              gravity: gravity,
            },
          },
        },
      }
    );
    ....