react-native trasparent overlay exposing some component - react-native

Question

how can I create a transparent overlay exposing some component like buttons, icons? So that it can be used as a tutorial screen.
I want to achieve something like shown in the image.

Answer 1

You need a modal overlay. To achieve this, you must add a <View> with an opacity style over your current component. In that <View>, you must add your own custom images (with the arrows for example) and position them as you want.
To add an opacity, you can add a style with the opacity property, like this:
overlay: {
opacity: 0.5,
}
You can set the value of the opacity as you like (between 0 and 1).
If you want it to be as big as the screen and to be positioned over your component, you can add something like this:
overlay: {
position: 'absolute',
height: '100%',
width: '100%',
backgroundColor: '#fff',
opacity: 0.5,
}
or:
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#fff',
opacity: 0.5,
}
Now, for the holes in the overlay, that can be achieved by properly using the z-index property. As long as a component has a higher value of z-index, it will be on top of a component that has a lower value.
To assign the z-index to a style, use it like this:
onTop: {
zIndex: 2
}
below: {
zIndex: 1
}
Complete example
This is a working example of a modal overlay, where the text This is always on top, is always on top:
import React, { Component } from 'react';
import { Image, StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.mainText}>This is always on top</Text>
<View style={styles.overlay}>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
<Text>This is an overlay</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: "#00ff00",
top: 0,
right: 0,
bottom: 0,
left: 0,
justifyContent: "center",
alignItems: "center",
zIndex: 1
},
mainText:{
fontSize: 30,
zIndex: 3,
backgroundColor: '#ff0000',
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#fff',
color: '#000',
opacity: 0.5,
justifyContent: "center",
alignItems: "center",
fontSize: 24,
zIndex: 2
}
});
Apply these ideas to your working app, and you can achieve what you are looking for.