Skip to main content
Version: 7.7.0

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#

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;