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

[JonnyBurger]

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.

[nihgwu]

can you test with RN0.46? several related bug-fix commits have been shipped in this release

[JonnyBurger]

Upgrading to [email protected] alone did not make it work, but in the RNTester it seems to work. From that I might be able to pinpoint the exact issue. Will look into this a bit closer as I would like to use the SectionList in my app.

I also tried AnimatedSectionList – no dice.

[kramer9x]

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

[mikelambert]

@JonnyBurger I suspect it might be fixed by https://github.com/facebook/react-native/commit/0518a0ba12e7cafc8228be0455403cc23b055a79 , which is part of the 0.46 RCs. Not sure if it's part of [email protected] as that may be a different thing? (Not sure)

[danielfttorres]

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

[mvanroon]

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

[danielfttorres]

Now, it's works for me. @mvanroon @mikelambert

[mvanroon]

@danielfeelfine what was the problem?

[danielfttorres]

It seems that my implementation was wrong @mvanroon. If you can post your code I can help you.

[mvanroon]

@danielfeelfine I already got it working mate, cheers

[chenghaohao]

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.

[pohy]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[calirec]

Hi @pohy and @chenghaohao!
I'm facing the same issue as you guys, did you find a way to fix it?
Thanks!

[danielfttorres]

@calirec can you post the code of you are using?

[calirec]

export default class EventList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      report: null,
    };
    this.loadEvents();
  }

  componentWillMount() {
    this.loadEvents().done();
  }

  async loadEvents() {
    const response = await DjangoService.getEvents();
    this.setState({ report: response });
    this.setState({ isLoading: false });
  }

  render() {
    const navigate = this.props.navigation;
    if (this.state.isLoading) {
      return <ActivityIndicator size="large" color={primary} />;
    }

    var sections = _.groupBy(this.state.report, event => startOfDay(event.date));

    sections = _.map(sections, dayEvents => ({
      data: _.orderBy(dayEvents, ['date']),
      key: dayEvents[0].date,
      title: {
        day: format(dayEvents[0].date, 'dddd', { locale: frlocale }),
        date: format(dayEvents[0].date, 'Do MMM', { locale: frlocale }),
      },
    }));

    sections = _.orderBy(sections, ['key']).filter(element => isAfter(element.key, startOfToday()));

    var month_sections = _.groupBy(sections, section => getMonth(section.data[0].date));

    month_sections = _.map(month_sections, section => ({
      data: [_.orderBy(section, ['key'])],
      key: section[0].data[0].date,
      title: {
        month: format(section[0].data[0].date, 'MMMM', { locale: frlocale }),
      },
    }));

    return (
      <SectionList
        renderItem={({ index, section }) => (
          <SectionList
            renderItem={({ item }) => <Event event={item} navigation={navigate} />}
            renderSectionHeader={({ section }) => (
              <View>
                <Text>{section.title.day.toUpperCase()}</Text>
                 <Text>{section.title.date}</Text>
              </View>
            )}
            sections={section.data[0]}
            stickySectionHeadersEnabled
          />
        )}
        sections={month_sections}
        renderSectionHeader={({ section }) => {
          if (!isThisMonth(section.key)) {
            return (
              <View>
                <Text>{section.title.month.toUpperCase()}</Text>
              </View>
            );
          }
        }}
        stickySectionHeadersEnabled
      />
    );
  }
}

There you go! I render two nested lists and only the "big" header stays on top. Thank you for your help!

[MathieuVedana]

Hello,
I have an issue with stickyHeader and nested SectionList as @calirec.
The nested header section is not sticky.
I have made a sample here : https://snack.expo.io/By2my0VV7
Can you please check if it is a bug or not?
Thank you for your help.

May be nested SectionList and stickyHeader would require a new issue creation...?

I moved to #20390