CODEWITHSUNDEEP
react-nativereact-native-sectionlist
Unstableair
Unstableair

Reputation: 143

ReactNative: SectionList SectionHeaders overwriting ListFooter

I have a React Native page that contains the core component SectionList. The SectionList has sticky section headers (stickySectionHeadersEnabled) and a list footer (ListFooterComponent). As the user scrolls past the last section, the final section header remains stuck to the top of the page overwriting the footer. However I would prefer the sticky headers to be contained within the body of the section list area and not remain on screen beyond the end of the last section.

Is it possible to achieve this with SectionList or should I take another approach?

Expo snack demonstrating this behaviour (iOS & Android only)

https://snack.expo.io/@unstableair/rn-sectionlist-footer-overlay-example

    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}
      renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}
      stickySectionHeadersEnabled={true}
      ListFooterComponent={<View style={styles.footer}><Text>ListFooterComponent </Text></View>}
    />

Upvotes: 2

Views: 1606

Answers (1)

Unstableair
Unstableair

Reputation: 143

To work around this problem, I added an empty section to the bottom of the SectionList data. The last SectionHeader still overwrites the ListFooter but because it's a View with 0 height you can't see it.

Upvotes: 2

Related Questions