React Native FlatList header zIndex on Android

Question

I encountered an issue on Android FlatList. If there is an element in a header that extends down(In my case I have a dropdown at the bottom of the header), it always gets rendered under the flatList items on Android. I can set the contentContainerStyle zIndex to something like 99 and this fixes the issue on iOS but Android still renders the header under the list items.

The issue gets fixed somehow if zIndex is changed after the flatList is rendered but that introduces another issue. The app hard crashes when I scroll the list down. Here is an expo snack demonstrating the issue.

Initially zIndex is set to some big value and pressing on Change ZINDEX button just increase it by one. This fixes the zIndex issue but the app crashes as soon as you start scrolling the list.

https://snack.expo.dev/GalYuThms?platform=android

Any idea how this can be addressed?

Thanks.

Answer 1

One thing that does help solve this issue is by using stickyHeaderIndices, like as follows:

<FlatList
    ListHeaderComponent={() => {
      return (
        <View style={styles.header}>
          <View style={styles.headerInnerComp}/>
        </View>
      );
    }}
    ListHeaderComponentStyle={{zIndex: 99}}              
    data={[1,2,3,4,5,6]}
    stickyHeaderIndices={[0]} //Here
    renderItem={() => <View style={{width: '80%', height: 100, backgroundColor: 'red', margin: 8}}/>}
    contentContainerStyle={{zIndex: 1}}  
/>

This produces the following output:

BUT, it brings a side effect that you might not want, which is the header being at the top of the scrollview at all times.

If you don't want it to be sticky, I will try to search another solution and update this answer.

[EDIT]

Try using the removeClippedSubviews={false} on your Flatlist, this comment says it prevents crashes on Android devices, and as it looks like, it solves your problem.