In react-native, using SectionList, I want to have a sticky section header with a background color, but only when the element is sticky. What I've done so far, is to set a views position to absolute. The problem is that I can't find a way to get the items behind the view, unlike the picture nested below:
Without zIndex'es applied:
Until now, I've tried to set different zIndex'es, but it doesn't seem to work, as everything just goes behind the view including the SectionHeaders, despite having a higher zIndex, than the view. I guess, it's because, the zIndex is relative to the parent. A picture is nested below:
With zIndex'es applied:
To sum up: How do I make sure that the items goes behind the view, to simulate a background, on the sticky section header? Other solutions to get a background on the sticky section header, is also much appreciated.
I have inserted the code (with zIndex'es) below.
render () { return (
<View>
{/* Header */}
<View style={[styling.headerContainer, {zIndex: 8}]}/>
{/* List */}
<SectionList
sections={DATA}
keyExtractor={(item, index) => `${item} - ${index}`}
stickySectionHeadersEnabled
style={{marginTop: 44}}
// Section Header
renderSectionHeader={({section}) =>
<View style={[styling.sectionHeaderContainer, {zIndex: 9}]}>
<Text style={styling.title}>{section.title}</Text>
</View>
}
// Items
renderItem={({item}) =>
<Text style={[styling.text, {zIndex: 7}]}>{item}</Text>
}
/>
</View>
)}