infinite FlatList with inverted prop becomes crazy

[Sharcoux]

The problem

When loading many items in a FlatList with the inverted prop, the list gets weird behaviours. The scroll moves on its own. It is also reverted whereas it shouldn't, and to top it all, some elements of the list gets inaccessible...

How to reproduce

Simplified test case

Steps to reproduce:

1. just go to the top of the list to load more messages.
2. repeat the process a few time, and things should start to become weird.

Expected behavior

If you remove the inverted prop, you get the expected behaviour. inverted should just make the items of the list to be displayed from bottom to top and onEndReached to be called when reaching the top.

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

• React Native for Web (version): 0.10.0
• React (version): 16.5.1
• Browser: Chrome 72.0.3626.109

[Sharcoux]

  verticallyInverted: {
    transform: [{scaleY: -1}],
  },
  horizontallyInverted: {
    transform: [{scaleX: -1}],
  },

Ouch! I don't think that this is a great way to handle the inverted property!
Replacing flex-direction: column by flex-direction: column-reverse would probably do a much better job, no?

[necolas]

FlatList is a copy of what's in React Native

[Sharcoux]

Then how come it behave so differently in the browser?
Using this mirror trick is responsible for the scroll to go in the opposite way, which is very unnatural. Moreover, the onEndReach events firing become completely broken...

[Sharcoux]

Ok, I think I can fix it. I'll make a PR.

[Sharcoux]

This is the pending PR. I will try to fix this problem directly with RN team with this discussion.

[necolas]

Linking the related issue @Sharcoux created for Yoga react/yoga#866

[sdcooke]

I had this issue - some very confusing behaviour with an inverted FlatList on web only. For anyone looking for a workaround disableVirtualization={true} seems to stop the weird behaviour for me, although it's obviously not an ideal solution.

@sdcooke disableVirtualization={true} works for me too. But it is deprecated and will not be on Expo either in the near future. What can we do next?

[azesmway]

I solved this problem as follows
#1579 (comment)

[marcaaron]

Experienced something similar to this. The weird scrolling issue seemed to go away after using the getItemLayout prop or having fixed heights on all items. Unfortunately, we are trying to get variable height items to work with FlatList (they work well enough on native, but on web behave erratically after a certain length). One workaround is to cache the length + offset of each renderItem just once via onLayout and then reference this value again later.