React-native: [SectionList] SectionList's sticky header dose not work well with 'inverted' option

[freeljt]

Description

When rendering SectionList with 'inverted' option and renderSectionHeader, the sticky header is upside down and sticky to the bottom. (in our App, we want them sticky at top even)

Reproduction Steps

Render SectionList with inverted option and section header.

Sample Code

        <SectionList style={styles.messageList}
                     **inverted**
                     sections={this.getSectionData()}
                     renderSectionHeader={renderSectionHeader}
                     onEndReached={this.props.loadEarlierMsgs}
                     keyExtractor={rowKey}
                     renderItem={this.renderRow} />

Solution

Maybe apply the transform scale -1 to header component and make the section header sticky to the top as well?

Additional Information

• React Native version: downloaded from master branch on June 14th, 2017
• Platform: iOS
• Development Operating System: maxOS
• Build tools: Xcode

[kholiavko-roman]

@freeljt, I trying to use SectionList with 'inverted={true}', but SectionLIst rendered as default.
Here is my code:

 <SectionList
          renderItem={this.renderItem}
          inverted={true}
          stickySectionHeadersEnabled={true}
          keyExtractor={(item, index) => `message_${index}`}
/>

It is right, in you case inverted SectionList scrolled in different direction ?

[compojoom]

@kholiavko-roman - are you on RN 0.47? It seems that inverted on sectionlist was added there. I was on 0.46 and was wondering what the inverted property is supposed to do as I wasn't seeing any difference.

@freeljt - have you found a solution already? I think that nobody tested this with sectionlist as it's implemented in the VirtualizedList. It doesn't make much sense having the Seactionheader at the bottom, but this is a consequence of the transform that is applied on the whole view

[dralletje]

I am having the same problem. Sticky headers are not implemented in VirtualizedList either, they are implemented in ScrollView, but even there they work pretty much isolated:

https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

I guess the best way to support everything we need, it making allowing for "sticky footers". Then inverted on VirtualizedList could "just" swap stickyHeaderIndices and stickyFooterIndices.
I also could imagine some people actually needing stickyFooters sometimes.

I wondered "But do we want stickyXXX for everything?!" but figured that there are really only two sides tangent to the scroll direction 🤷‍♀️

I'll try to make stickyFooterIndices based on how stickyHeaderIndices is implemented sometime soon!

[terrysahaidak]

Anybody has any solution for that?

[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.

[terrysahaidak]

Hi there. I think this issue definitely should be open because there is no way in SectionList to use some different scroll view component like ListView does. Since ListView is deprecated and SectionList still has some laggy features, each of them should be fixed. Or ListView support should be continued.

[diegolmello]

I'm having the same problem as you can see on Unread header below.

[vascogaspar]

any progress on this?

[Bessonov]

I think inverted is a workaround for a really common requirement: to build chat-like apps. You don't believe me? Look at any virtualized-list-component for react, react-native and angularjs. This requirement exists for every component. Unfortunately, I can't find any suitable solution, except workarounds with flaws.

The idea to reverse the list is quite cool, but well, that's not really fix the issue with adding elements to top without junks, because it leads to add-to-bottom issue.

I understand, that "virtual-both-directions-scrollable-list-with-dynamic-rows-height-and-you-can-go-to-desired-item" requirement is quite complex. But I can't believe that this is impossible.

For our angularjs-based app we've implemented own solution which works, but it's to specific to our internals.

It would be a killer feature for react/react-native or angular, if one of them supports chat-like virtualized lists.

[stijnvanderlaan]

Would love this.

[stale[bot]]

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.

[Bessonov]

Hey, stale bot, leave it open :)

[stale[bot]]

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.

[terrysahaidak]

Stale bot, leave it open as it still exists.

[stale[bot]]

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.

[terrysahaidak]

And again, it still exists.

[mo22]

<FlatList inverted={true} invertStickyHeaders={true} ... />

[terrysahaidak]

@mo22 Well, you're right, it forces them to stick at the top, but still, they don't work well:

Edit: just checked my old examples and it works as it was before, so that prop has worked for me already.

[stale[bot]]

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.

[terrysahaidak]

This hasn't been fixed yet.

[stale[bot]]

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.

[Bessonov]

Activity!

[ydv0121]

+1

[stale[bot]]

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.

[iamolegga]

Yes, it does still require the community's attention

[terrysahaidak]

Seems like it's almost fixed in 0.62.

The only minor problem is it seems like there is unnecessary section separator next to the ListFooterComponent.

[irfaan]

Seems like it's almost fixed in 0.62.

The only minor problem is it seems like there is unnecessary section separator next to the ListFooterComponent.

Nice. How does this look with a short (less than height of viewport) list?

[stale[bot]]

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.

[Bessonov]

further activity occurs

[gustperz]

inverted andinvertStickyHeaders work correctly when scrolling, but the first items are not rendered as expected when they are low on items

for this, the header is still represented below the items

this is how it looks when scrolling