'zIndex on component incorrectly stacking

// renderItem
<View>
  <Image source={image} style={{position: 'absolute', zIndex: 40}} />
</View>

<View>
    <ImageBackground source={image} style={{position: 'absolute', zIndex: 50}}/>
    <Image source={image} style={{position: 'absolute', zIndex: 30}} />
    <Image source={image} style={{position: 'absolute', zIndex: 20}} />
</View>

<FlatList renderItem={renderItem}/>

Idea is that the code above FlatList is fixed in place and image in renderItem can change position with scroll.

Expected Behavior
renderItem is stacked between zIndex of 50 and 30.

Current Behavior
renderItem is always at the back (before zIndex 20 eventhough renderItem has a zIndex of 40)

What I tried
For testing, I added another Image tag between 50 and 30 in the same file and that seems to be working. So I am guessing the issue only happens when componentizing it. I also tried messing with elevation since my target is Android but to no effect.

Any insight would be really helpful - thank you!

cssreact-nativez-index


Solution 1:[1]

Working with zIndex sometimes happens this. For your case, I suggest you use the props ListHeaderComponent and stickyHeaderIndices to sticky the header when scrolling the list.

// Some code...

const Header = () => (
  <View style={styles.header}>
    <ImageBackground
      style={styles.imageBackground}
      source={require('./assets/image.png')}
    >
      <Text style={styles.headerTitle}>Fixed header</Text>
    </ImageBackground>
  </View>
);

// More code...

return (
  <FlatList
    ListHeaderComponent={Header}
    stickyHeaderIndices={[0]}
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
)

I create a snack on Expo for you to see the complete example. Just scan the QR Code from your smartphone.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 marcelofreires

Related Questions