horizontal FlatList scrolls on its own and is cropped on the left

[Melazeta]

The problem

Any flatlist in horizontal mode scrolls to the right on its own and results cropped on the left, it looks like the list starts halfway through an element and you can't scroll past behind it to the first element of the list.

How to reproduce

Simplified test case: https://codesandbox.io/s/charming-cdn-1bz88

Steps to reproduce:

1. simply open the test case and wait until it starts scrolling on its own
2. you may have to hover the mouse over the output window

Expected behavior

The flatlist should not scroll on its own and one should be able to scroll back to the first element

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.17.0
• React (version): 17.0.2
• Browser: Chrome, Firefox

[DavidRieman]

Your FlatList is rendering massively wide - it sounds like you want it to be scrolling. Setting a more constrained width of the FlatList itself like style={{ width: 300 }} (or better yet one based on 100% of width of window or useWindowDimensions hook or something like that) will give you a scroll bar for scrolling through the FlatList contents.

I think it starts "scrolling on its own" because it's trying to center, and the virtualization system keeps trying to add items, which re-centers it, which adds more items at the edge of the virtualization window, etc. With a width set, and you manually operate the scroll bar, the virtualization will add items as needed for this mode.