CODEWITHSUNDEEP
react-nativeoverlay
Deepak
Deepak

Reputation: 436

react-native trasparent overlay exposing some component

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.

demo tutorial screen

Upvotes: 2

Views: 6084

Answers (1)

c-chavez
c-chavez

Reputation: 7506

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.

Upvotes: 5

Related Questions