react-native: [SectionList] Sticky headers do not stick

Description

The SectionList component does have a prop called stickySectionHeadersEnabled. However when I set it to true, the section headers do not seem to stick to the top as the documentation suggests.

Reproduction Steps and Sample Code

Snack: https://snack.expo.io/rkt7_TrzZ

Additional Information

React Native version: 0.45.0
Platform: both
Things I’ve tried: Adding a stickyHeaderIndices prop, using ScrollView / View as a container.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 17 (3 by maintainers)

Most upvoted comments

@JonnyBurger Try to use <ScrollView contentContainerStyle={styles.container}> instead of <ScrollView style={styles.container}>

kramer9x on Jun 16, 2017

I ran into the same issue today and it turned out that my SectionList was inside a ScrollView. Make sure your SectionList is not a (grand)child of a ScrollView component

mvanroon on Oct 2, 2017

i have the same issue here when i use <SectionList> <SectionList /> </SectionList> the first section sticky header works, but inside one is not working. i need a big sticky header and several small group sticky header, so i use sectionList in this way. any solutions? 3ks.

chenghaohao on Oct 20, 2017

I have the same issue as @chenghaohao, when nesting <SectionList>s.

pohy on Dec 5, 2017

@mikelambert I try with RN 0.46.2 and it doesn’t work.

danielfttorres on Aug 7, 2017