zIndex not working properly in react-native in IOS

Question

I only have 1 image that needs a zIndex to show it in front. It works on Android but it doesn't show up in IOS devices. Not sure why.

Here is the picture for Android:

Here is the picture for IOS:

As you can see, the user image doesn't appear in IOS.

Code is like this:

 <View>
      <Image
        source={require("./images/user-img.png")}
        style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:1}}
      />
      <ImageBackground
        source={require("./images/bg-img.png")}
        style={{ width: "100%", height: "100%"}}>
        <View>
         //extra code here
        </View>
      </ImageBackground>
 </View>

Anyone know the reason?

Answer 1

Please add zindex to parent view. In iOS, the zIndex doesn't work for nested parentView. You need to make the parentView has high zIndex, and then target View again.

<View style={{zIndex: 10}}>
  <Image
    source={require("./images/user-img.png")}
    style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:20}}
  />
  <ImageBackground
    source={require("./images/bg-img.png")}
    style={{ width: "100%", height: "100%"}}>
    <View>
     //extra code here
    </View>
  </ImageBackground>