`inverted` option causing sticky headers, ListEmptyComponent to appear inverted, and causing scroll direction to be inverted on web

[mtourj]

Current behavior

Currently, enabling inverted on FlashList causes three issues:

• Sticky headers appear inverted (upside down)
• ListEmptyComponent appears inverted
• Scroll direction is inverted on web

I've created a pull request #1487 that resolves these issues.

Expected behavior

I expect inverted to work the same way it does in regular FlatLists, without inverting the rendered content in sticky headers and empty components, and without inverting the scroll direction in browsers.

To Reproduce

Simply set inverted on a FlashList, and set sticky headers or ListEmptyComponent, and observe that they are rendered upside-down. And on the web, your scroll direction will be inverted.

Platform:

• iOS
• Android
• Web

Environment

Latest

[qalqi]

yes! I am also facing the same issue. Here is a demo snack showing the error
https://snack.expo.dev/@qalqi/flashlist-inverted-scroll-issue

Mouse Scroll direction is inverted on web

[obibring]

In the interim, this fixes the issue for me with regards to sticky headres:

style={
  transform: [{
    scaleY: -1,
   }],
}

[naqvitalha]

Hi! 👋

We're now focusing exclusively on FlashList v2 and React Native's New Architecture. This means we're closing older issues and suggestions that aren't relevant to v2.

If this issue/suggestion is still relevant:

• Please verify it still occurs in FlashList v2
• Open a new issue with v2-specific details
• We'll be happy to take a look!

Resources:

• FlashList Documentation

Thank you for your understanding! 🙏