Inverted FlashLists do not interact correctly with Sticky Item Headers

[gjbadros]

Current behavior

Sticky item headers, when using FlashList.inverted=true prop, show up on the bottom upside down. See the blue rectangle in the bottom right of

Expected behavior

Ideally, there'd be a prop about headersAt='top'|'bottom' and we could specify that and you'd apply the scaleTransform -1 a second time on the headers and get them in the right place.

You can see how the app behaves more generally by looking at the currently-in-production FlatList-based version (see https://gluroo.com )

To Reproduce

Just use inverted prob with sticky headers.

Platform:

• [ X ] iOS
• [ X ] Android

Environment

1.2.2

[gjbadros]

BTW, I also suspect that resizing an element when Inverted=true will result in the opposite "gravity" of what is desired -- that the element's top will move up on the physical screen instead of staying in place, and ideally the gravity would be inverted, too, so an element being clicked to get bigger keeps the top of its bounding box in place instead of the bottom of its bounding box in place.

[naqvitalha]

@gjbadros We don't support sticky headers in the inverted mode right now. It's not being removed due to a bug but ideally, it shouldn't even show up.

[gjbadros]

That should either be mentioned here: https://shopify.github.io/flash-list/docs/known-issues or https://shopify.github.io/flash-list/docs/usage#inverted

Consider updating your docs, at least, to make this shortcoming clear.

[naqvitalha]

The idea was to throw a warning. I'm going to look into adding it soon. Thanks for the suggestion!

[gjbadros]

I don't think it's so hard to fix, FWIW, but I already had a workaround for FlatList and it adapted easily for FlashList because scrollToOffset() is already exposed, so it's not worth implementing in FlashList in the short term for me.

Regardless, the warning would certainly be nice, but documenting it, too, is at least as important for folks considering switching and hoping for inverted to work better than FlatList's partial implementation.

[naqvitalha]

Can you post your solution here? It might help others as well

[gjbadros]

My solution just uses onViewableItemsChanged to track what's on screen and set a specific header element at the top to the element with a stickyIndex after (i.e., above) the last element that's on screen. Then any time an element changes size I manually compute the difference in height and do the compensating scrollToOffset(). Right now I use an onScroll prop to updateContentOffset notion (but that shouldn't be necessary if there's a lookup to the current contentOffset -- FlatList didn't seem to have one.

But I don't want to make it too easy to do my hack, since without it, the easier fix is just to fix FlashList, which is better for everyone :-)

[ramssutharr]

any update on this ? I'm using flash list for chat and badly need this without a custom solution.

[thanhloc-17]

up

[pavelustenko]

All chat developers would be happy if this could be implemented.

[gunnartorfis]

Figured I'd bump since it's been a while, for my fellow chat developers.

[kamelmojawaz1]

Pump it