react-native-web: infinite FlatList with inverted prop becomes crazy

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:

just go to the top of the list to load more messages.
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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 15 (4 by maintainers)

Commits related to this issue

[fix] layout measurement API consistency with React Native * Ignore CSS transforms in measurement. * Cancel measurement if elements are unmounted. Close #2501 Fix #1254 — committed to necolas/react-native-web by LucioChavezFuentes a year ago

Most upvoted comments

I actually found a pretty neat workaround making “inverted lists” work nicely with RNW - even in a shared code environment along with RN.

The solution is to achieve the inverted style in a different way with the very same effect. I hope this helps some of you:

  const isWeb = Platform.OS === 'web';

  const listStyle: ViewStyle | undefined = isWeb
    ? { flexDirection: 'column-reverse' }
    : undefined;

  const contentContainerStyle: ViewStyle | undefined = isWeb
    ? { flexDirection: 'column-reverse' }
    : undefined;

        <SectionList
          {...otherListProps}
          inverted={!isWeb} // <-- do not invert to prevent transform: [{scaleY: -1}]
          contentContainerStyle={contentContainerStyle} // <-- 'column-reverse' to make it scroll to the bottom
          style={listStyle} // <-- 'column-reverse' to reverse you list array
        />

jgo80 on Dec 6, 2021

  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?

Sharcoux on Feb 23, 2019

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 on Mar 6, 2019

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

Sharcoux on Feb 25, 2019