zIndex doesn't work in component

Question

I have a blue header which i want to take part of that on another view with an animate event. but before i execute animate function i set the zIndexes manually and knew it doesn't work at all!! means nothing will change when i give 1 or 100 or other value to zIndex property of my components :(

   <View style={{ flex: 1 }}>
    <Animated.View style={{
      position: 'absolute',
      top: 0,
      left: 0, right: 0,
      backgroundColor: 'lightskyblue',
      height: headerHight,
      zIndex: 1,//Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      alignItems: 'center',
    }}>

      <Animated.View style={{ position: 'absolute', top: titleTop }}>

        <Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>

      </Animated.View>

    </Animated.View>

    <ScrollView style={{ flex: 1 }}
      scrollEventThrottle={16}

      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
      )}>
      <Animated.View style={{
        height: profileImageHight,
        width: profileImageHight,
        borderRadius: PROFILE_IMAGE_MAX_HIGHT / 2,
        borderColor: 'white',
        borderWidth: 3,
        overflow: 'hidden',
        marginTop: profileImageMarginTop,
          zIndex:0, //Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
        marginLeft: 10,

      }}>

        <Image source={require('./assets/avatar.jpg')} style={{ flex: 1, width: null, height: null}} />
      </Animated.View>
      <Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
      <View style={{ height: 1000 }}></View>
    </ScrollView>
  </View>

like you see above: there are two components which has zIndex. so taking one which has zIndex:1 on the other is expected but there is no change bout them in run time.

Answer 1

Try elevation with zIndex and absolute position.

Apply below style on component which you want to show on front layer

style={{ position: 'absolute', elevation: 100,zIndex:100, //other style }}

Let me know if still facing issue