React Native Overlay Transparent

Question

I have try many times, stills can not find the solution.

In a screen, I have so many components. I separated in header and content views components.

In content components, there has map component (image), and there has other components like a people component (image).

In the map component, I want to have a transparent overlay with full screen but it only overlay with map component. In react native, there are no z-index. How can I do it?

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
       <View style={styles.overlay}>
         <Image style={styles.people} />
         <Image style={styles.destination} />
       </View>
    </Image>
  </View>
</View>

like this example which can not overlay the full screen: https://rnplay.org/apps/wHCi_A

Answer 1

Move the overlay View to the view to the root View and make sure to add it as the last child. Set position to absolute. Something like this

const styles= StyleSheet.create({
  overlay:{
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.2)'
}); 

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
    </Image>
  </View>
  <View style={styles.overlay}>
     <Image style={styles.people} />
     <Image style={styles.destination} />
  </View>
</View>