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

[x] I have reviewed the documentation
[x] I have searched existing issues
[x] 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:

kapture 2018-04-19 at 13 46 22

Actual Behavior

The section headers are footers instead of headers. They are sticky because of https://github.com/facebook/react-native/pull/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:

kapture 2018-04-19 at 13 43 42

Apr 19 '18 10:04 terrysahaidak

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

Jun 25 '18 09:06 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: https://github.com/facebook/react-native/issues/18943

Jun 25 '18 10:06 terrysahaidak

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

Jun 25 '18 10:06 terrysahaidak

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.

Sep 23 '18 10:09 stale[bot]

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

Sep 23 '18 18:09 terrysahaidak

Any workaround on this?

Nov 12 '18 14:11 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.

Nov 12 '18 19:11 terrysahaidak

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?

Jan 15 '19 11:01 brunoro

I've been able to use this as a workaround:

<SectionList>
renderSectionFooter={<View style={{transform: [{ scaleY: -1 }]}}>...</View>}
renderItem={<View style={{transform: [{ scaleY: -1 }]}}>...</View>}
inverted={true}
</SectionList>

Jul 08 '19 16:07 die20

Could you please provide an example with that fix applied to my repro?

Here is what I've got:

Jul 16 '19 15:07 terrysahaidak

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Oct 14 '19 15:10 stale[bot]

This hasn't been fixed yet.

Oct 19 '19 17:10 terrysahaidak

just simple use renderSectionFooter then header and make inverted true simple

Dec 02 '19 10:12 stepupithubapp

I'm having the same issue with inverted sticky headers.

just simple use renderSectionFooter then header and make inverted true simple

This doesn't address the issue. We're looking to have sticky section headers on inverted lists

Jan 02 '20 19:01 je7ov

+1

Jan 08 '20 12:01 ydv0121

opened this issue on 19 Apr 2018

Jan 31 '20 14:01 djhr

Not able to find a good solution here. What we really need is the ability to make sticky footers a possibility. Then, when a list is inverted, you can switch stickyFooters on to keep it sticky at the top and start above the content of the section.

Mar 12 '20 00:03 irfaan

I just checked this issue on 0.62 and seems like it's still there.

Apr 16 '20 17:04 terrysahaidak

Please provide us a new param stickySectionFooterEnabled

Apr 27 '20 08:04 deniscreamer

If someone is still stuck on it, Medium has posted a workaround: https://medium.com/@smali.kazmi/react-native-sticky-date-like-whatsapp-using-inverted-sectionlist-c141f5933d55

in which I've made some changes to make it desappear when not needed anymore: just setting it to null when lastItem is the sectionHeader (sectionFooter)

function updateCurrentDate({ viewableItems, changed }: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) {
        if (viewableItems && viewableItems.length) {
            const lastItem = viewableItems.pop()
            if (lastItem && lastItem.item.title && lastItem.item.title === currentDate) setCurrentDate(null) 
            else if (lastItem && lastItem.section) setCurrentDate(lastItem.section.title)
            else setCurrentDate(null)
        }
        else setCurrentDate(null)
    }

also, changed the style of the date header to be absolute, so it appears over the list.

May 27 '20 07:05 fsolla

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Aug 29 '20 09:08 stale[bot]

Still an issue.

Aug 29 '20 09:08 terrysahaidak

If someone is still stuck on it, Medium has posted a workaround: https://medium.com/@smali.kazmi/react-native-sticky-date-like-whatsapp-using-inverted-sectionlist-c141f5933d55

in which I've made some changes to make it desappear when not needed anymore: just setting it to null when lastItem is the sectionHeader (sectionFooter)
function updateCurrentDate({ viewableItems, changed }: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) {
        if (viewableItems && viewableItems.length) {
            const lastItem = viewableItems.pop()
            if (lastItem && lastItem.item.title && lastItem.item.title === currentDate) setCurrentDate(null) 
            else if (lastItem && lastItem.section) setCurrentDate(lastItem.section.title)
            else setCurrentDate(null)
        }
        else setCurrentDate(null)
    }
also, changed the style of the date header to be absolute, so it appears over the list.

yo man, this is the solution I was looking for, you're a lifesaver. Thanks, buddy 👍🏻

Oct 11 '20 04:10 vibinjoby

It is a shame that is hasn't been officially fixed yet.

There should be a new "inverted" prop to make the life of us who make "chat-like" components better. Inverted just sucks.

Nov 24 '20 04:11 ftzi

Still an issue on stock installs

Oct 24 '21 16:10 icecapp

Hey folks 👋

This issue troubled me as I also need the sticky header to work for inverted section list for the app I am building. To solve the problem, I create an InvertedSectionList component for fixing this issue outside of RN code base. I open sourced it here

https://github.com/LaunchPlatform/inverted-section-list

For now I only built it to make it works for my app, didn't test it with other corner cases. My InvertedSectionList component is basically copying source code from RN repo and made critical changes only to make the sticky header (footer actually) works. So in theory, if I port the changes back to RN, it should fix this. I am trying my best to see if I can find time to create PRs to fix this issue. However, if you want, please feel free to port the changes I made and open PRs to RN's repo. In the mean time hopefully the component I made can solve your problem as well before it's fixed in the upstream.