Htykuut

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.

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.