Android RTL: Large horizontal list issue

[Ozaoujal]

Hey folks

I’m currently working with a large list in my React Native project, so I decided to use this excellent library to provide a smooth experience for our users. Everything works well on iOS in both LTR and RTL directions, and on Android in LTR mode, the list functions perfectly without any issues or bugs.

However, on Android in RTL mode, an issue arises: initially, when entering the list for the first time, the first item briefly appears and then quickly disappears, leaving only a blank space. You can see exactly what happens in the video below ↓↓↓:

Android RTL: (unexpected)

Screenrecorder-2024-11-01-10-00-48-775.mp4

Android LTR: (expected)

aaaaaaaaa.mp4

Here is how I used the component:

<View style={{ direction: 'ltr', flex: 1 }}>
    <FlashList
      data={quran}
      extraData={focusedVerse}
      horizontal={true}
      pagingEnabled
      disableHorizontalListHeightMeasurement={true}
      estimatedListSize={
        Platform.OS === 'android' && I18nManager.isRTL
          ? { width: windowWidth, height: RH(100) }
          : { width: RW(100), height: RH(100) }
      }
      renderItem={renderItem}
      estimatedItemSize={windowWidth}
      keyExtractor={keyExtractor}
      // inverted={true}
      disableIntervalMomentum
      decelerationRate="fast"
      snapToInterval={RW(100)}
      showsHorizontalScrollIndicator={true}
      removeClippedSubviews={true}
      disableAutoLayout={true}
      onBlankArea={(b) => {
        console.log('-----', b);
      }}
    />
  </View>

The result of onBlankArea logs:

• iOS (RTL and LTR) + Android LTR: {"blankArea": 392.3636363636364, "offsetEnd": 392.3636363636364, "offsetStart": 0}
• Android RTL: {"blankArea": 2356, "offsetEnd": 2356, "offsetStart": -1963.6363636363637}

Additional Note:
When I set horizontal to false, the list items reappear as expected. :)

Versions:

• "@shopify/flash-list": "^1.7.1"
• "expo": "^50.0.21",
• "react-native": "0.73.6",

Please let me know if I need to provide more information.
I’ve been stuck on this issue for over 3 days without any resolution.

Thank you for your time!

[chanphiromsok]

can you try to remove removeClippedSubviews ? by default, FlashList is recycling renderItem