fix(rtl): horizontal list renders blank in a native-RTL app - #483
Open
Mohamed-kassim wants to merge 1 commit into
Open
fix(rtl): horizontal list renders blank in a native-RTL app#483Mohamed-kassim wants to merge 1 commit into
Mohamed-kassim wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: db744fa49c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
A horizontal list renders completely blank when the app itself is RTL (`I18nManager.isRTL === true`). The library emulates RTL in logical (LTR) coordinates and mirrors item positions in JS, which assumes a native-LTR scroll container — which is exactly why `direction: "ltr"` is already forced on web (Container.tsx). On native the scroll container also flips under `I18nManager.isRTL`, so the JS mirror and the native flip compound and the rendered window is painted offscreen → blank everywhere. Neutralize the native flip on the scroll container too (`Platform.OS !== "web"`), mirroring the existing web handling, so the library's JS mirror is the only RTL flip. LTR and vertical lists are unaffected. Fixes LegendApp#477 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mohamed-kassim
force-pushed
the
fix/horizontal-rtl-native-blank
branch
from
June 27, 2026 21:19
db744fa to
0b5ca97
Compare
|
i was looking into this. it doesnt work on ios. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Horizontal lists show up completely blank in a native‑RTL app (
I18nManager.isRTL === true, e.g. an Arabic or Urdu locale). Nothing paints, thoughonViewableItemsChangedkeeps firing, so the items are there, just positioned offscreen. LTR apps (and LTR apps using thertlprop) work fine.Why it happens: the library does its own RTL, it keeps logical (LTR) offsets and mirrors item positions in JS. That only works if the scroll container itself stays LTR, which is why it already forces
direction: "ltr"on web (inContainer.tsx). On native that step is missing, so when the app is RTL theScrollViewflips as well, the JS mirror and the native flip stack on top of each other and the rendered items end up offscreen.The fix: just do on native what web already does — keep the scroll container LTR for horizontal RTL lists, so the JS mirror is the only flip:
LTR and vertical lists are untouched.
Repro: https://github.com/Mohamed-kassim/legend-list-rtl-repro/tree/case/native-rtl-blank — forces native RTL and renders a horizontal
rtllist of 604 pages → blank on Android (happens in every config, even atinitialScrollIndex=0).Tested on a real Android device and that repro on 3.2.0: blank before, renders after;
scrollToIndexand paging both work.One heads‑up:
direction: "ltr"inherits down to item content. In practice that's fine, items are positioned with physicalleft, and RNTextauto‑detects its own direction , but I'm happy to also resetdirection: "rtl"on the content wrapper if you'd rather keep it fully contained.Fixes #477