1

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:

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:

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>
)}
sbgib
  • 5,580
  • 3
  • 19
  • 26
Buster
  • 11
  • 1

0 Answers0