Flatlist maintainVisibleContentPosition's minIndexForVisible is ignored by ListHeaderComponent on web

[divonelnc]

The problem When using maintainVisibleContentPosition on web, the value in minIndexForVisible is ignored by the ListHeaderComponent. It will always try to maintain the position of the ListHeaderComponent if it is visible on the screen, therefore jumping to the top.

How to reproduce

Create a Flatlist using maintainVisibleContentPosition with a ListHeaderComponent then prepend data to it. If the list header is visible on the screen, the Flatlist will try to maintain its position, ignoring the value of minIndexForVisible

See snack for an example with a floating ListHeaderComponent.

Simplified test case: https://snack.expo.io/@divone/minindexforvisible-is-ignored-on-web

Steps to reproduce:

1. Create a flat list that gets data prepended to it.
2. Set maintainVisibleContentPosition's minIndexForVisible parameter to something > 0 (f.e: 10)
3. Make sure the ListHeaderComponent is visible on the screen
4. Prepend data
5. Observe that the value of minIndexForVisible does not matter. If you have a Listheader visible on screen, it's the header's position that will be maintained, causing the list to jump higher and lose the position of the items with an index greater than minIndexForVisible.

Expected behavior When prepending data to a Flatlist, every item in the view with an index lower than minIndexForVisible should be ignored. The Flatlist should try to maintain the position of the item with the lowest index ABOVE minIndexForVisible. Therefore, the ListHeaderComponent should not maintain its position if minIndexForVisible is > 0.

Environment (include versions).

• React Native for Web (version): 0.13.16
• React (version): 0.63.2
• Browser: Firefox and Chrome

[necolas]

1. FlatList isn't maintained here. It's developed out of the react native repo. But it's just not a great list solution for any platform. So I won't be looking into this unfortunately issue.
2. You should try 0.14 and see if the problem persists. Since the test case isn't on codesandbox it's not easy to update the version of rnw used

[divonelnc]

I just tried it on codesandbox with react-native-web 0.14.10 and the issue persists: https://codesandbox.io/s/quirky-leaf-770i0

You mean Flatlist is not good for making lists? What would you recommend using then?

[necolas]

Flipkart have a multi-platform list - https://github.com/Flipkart/recyclerlistview

[necolas]

Closing as this is old and VirtualizedList has been updated a few times since. Going forward VirtualizedList will be developed out of the react-native repo and imported via npm, all issues should be reported upstream.