Fatal bug : Flatlist wrong scroll locations bug on RTL on Android

[Stevemoretz]

Description

Recently I upgraded from expo 44 to 45 which has "react-native": "0.68.2" now my app in rtl mode has a lot of problems, for flatlists.

Version

0.68.2

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 133.48 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.15.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: 2022.02.14.00 - /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 28, 29, 30, 32
Build Tools: 28.0.3, 29.0.2, 29.0.3
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Add a flatlist in rtl mode and fill it with a few or a lot of items, you'll get two different bugs. (Probably both are related though)

Snack, code example, screenshot, or link to a repository

I made a snack for it checkout :
https://snack.expo.dev/@stevemoretz/ltr-rtl

click on Devices and reload app to make sure it is restarted in rtl mode.

1. Look how the top row is attached to the left (This can be fixed by setting a flexGrow)
2. Look how the bottom row is started from 4 instead of 1 (There was no way to fix it for me!)

Here's the IOS result which is fine :

[Stevemoretz]

Also the second row issue suddenly happens when I have 11 items, on 10 it sounds fine.
Stays the same to 20 again 21 it moves to 8.
same happens from 20 to 30 and again on 31 it moves to 11.

Each 10 items it's moving a little forward!

[Stevemoretz]

Update:
Also tested via scrollview and scrollview sounds fine.
so this is a Flatlist only problem.

Updated Snack and added scrollview example at the bottom.

[Stevemoretz]

Just by checking SDK 44 instead of 45 we can see that the second row problem is gone:

So this is a recent update problem.
I don't think I can narrow it down anymore than this, hope these are useful information.

Really need a quick fix for this.

[Stevemoretz]

When having a lot of items and scrolling suddenly you get scrolled back to that first wrong position!

This is a serious issue, at least we need to disable rtl for FlatList all together until a fix is found, but there is no option to disable rtl for this component :( is there?

[Stevemoretz]

Given this a lot of thought even went for another library instead of flatlist but there is no point, as there are many libraries using flatlist internally and all of those are broken too!

React native as its current stage IS LITERALLY UNUNSABLE IN RTL MODE FOR EVERYBODY cause of this!!!

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.