question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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® Core™ 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!)
Screen Shot 1401-05-09 at 13 31 54

Here’s the IOS result which is fine : Screen Shot 1401-05-09 at 13 33 41

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

2reactions
Stevemoretzcommented, Aug 2, 2022

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!!!

0reactions
Stevemoretzcommented, Jul 31, 2022

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native flat list horizontal RTL auto scroll issue
Hi, you can check my solution. Here is how i created my RTL friendly Flatlist component github.com/facebook/react-native/issues/… – Ozan ...
Read more >
Optimizing Flatlist Configuration - React Native
It is a VirtualizedList prop that can be passed through FlatList . This controls the amount of items rendered per batch, which is...
Read more >
flatlist horizontal RTL react native Code Example
Answers related to “flatlist horizontal RTL react native” ... fatal error: opencv2/core/version.hpp: No such file or directory ...
Read more >
A deep dive into React Native FlatList - LogRocket Blog
To solve this problem, check if you are loading images from the local storage or from the network (an API). React Native's Image...
Read more >
Newest 'react-native' Questions - Stack Overflow
I encounter an error when I want to retrieve data from my expo-sqlite database Row too big to fit into CursorWindow requiredPos=0, totalRows=1...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found