[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted

I have reviewed the documentation
I have searched existing issues
I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.6.0
Yarn: 1.5.1
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Steps to Reproduce

Clone this repository and run it via react-native run-ios.
Observe the section separators are in wrong (randomly?) places.

Expected Behavior

The section list headers should be in the top of the section instead of the bottom like section footers do with an inverted list (but they aren't sticky).

Expected gif:

Actual Behavior

The section headers are footers instead of headers. They are sticky because of #17762 but still footers, not headers.

Sample code:

export default class App extends React.Component {
  render() {
    return (
      <View style={s.container}>
        <SectionList
          inverted
          sections={mock.sections}
          maxToRenderPerBatch={10}
          initialNumToRender={10}
          style={{ flex: 1 }}
          keyExtractor={(item) => item.messageId}
          renderSectionHeader={sectionProps => (
            <SectionHeader
              {...sectionProps}
            />
          )}
          renderItem={({ item }) => (
            <ListItem
              item={item}
            />
          )}
          ItemSeparatorComponent={ItemSeparator}
        />
        />
      </View>
    );
  }
}

Problem Gif:

try:
set sectionlist stickySectionHeadersEnabled={false}
use renderSectionFooter instead of renderSectionHeader with inverted case

@almorak

@almorak thanks for your advice, but it won't fix the bug at all.
Sticky headers are common behavior for chat date headers, I still need them.

Also, see my second issue:
#18943

@janicduplessis

Hi @janicduplessis, you have worked on support of inverted sticky headers, but there are some issues, could you please look at them?

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

Still there is no any workaround or fix for that, so it can't be closed.

Any workaround on this?

@iamolegga

@iamolegga I just don't use section list with sticky headers currently. Just simply FlatList with custom functions for creating sections and then render it.

Also struggling with this here, I'm implementing infinite scroll to the top and need sticky headers (or inverted footers, apparently). Any solutions so far?

I've pinged a couple of folks internally to look into this 👍

Problem: renderSectionHeader is appearing after messages instead of before them
This problem occurs because SectionList is inverted (inverted={true}), which reverses the rendering order of both:
So use renderSectionFooter instead of actually renderSectionHeader which moves the footer upwards

`

  <SectionList
                sections={messageSections}
                keyExtractor={(item) => item._id}
                inverted 
                renderSectionFooter={({ section: { title } }) => (
                    <View key={title} style={{ alignItems: "center", marginVertical: 10, padding:5}}>
                        <View style={{backgroundColor: Colors.subThemeColor, padding: 8, borderRadius: 25}}>
                        <CustomText style={{ fontSize: 13,fontWeight: "bold", color: "#555"}}>{title}</CustomText>
                        </View>
                    </View>
                )}
                renderItem={({ item, index }) => renderMessageBubble(item, index)}
                onEndReached={onLoadMore}
                onEndReachedThreshold={0.8}
                ListFooterComponent={loading ? <ActivityIndicator size="small" /> : null}
            />`

@Vinay-Gurjar

Hey @Vinay-Gurjar thanks for reviewing it. I will find a time looking into this issue and address it.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Still an issue

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Not stale

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Not stale

Navigation Menu

Repository navigation

[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted #18945

Environment

Steps to Reproduce

Expected Behavior

Expected gif:

Actual Behavior

Problem Gif:

50 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted #18945

Description

Environment

Steps to Reproduce

Expected Behavior

Expected gif:

Actual Behavior

Problem Gif:

Activity

almorak commented on Jun 25, 2018

terrysahaidak commented on Jun 25, 2018

terrysahaidak commented on Jun 25, 2018

stale commented on Sep 23, 2018

terrysahaidak commented on Sep 23, 2018

iamolegga commented on Nov 12, 2018

terrysahaidak commented on Nov 12, 2018

brunoro commented on Jan 15, 2019

50 remaining items

cortinico commented on Oct 29, 2024

Vinay-Gurjar commented on Feb 4, 2025

fangpenlin commented on Feb 6, 2025

react-native-bot commented on Aug 6, 2025

SimpleCreations commented on Aug 6, 2025

react-native-bot commented on Feb 3, 2026

SimpleCreations commented on Feb 3, 2026

react-native-bot commented on Aug 3, 2026

SimpleCreations commented on Aug 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions