Skip to content

fix(rtl): horizontal list renders blank in a native-RTL app - #483

Open
Mohamed-kassim wants to merge 1 commit into
LegendApp:mainfrom
Mohamed-kassim:fix/horizontal-rtl-native-blank
Open

fix(rtl): horizontal list renders blank in a native-RTL app#483
Mohamed-kassim wants to merge 1 commit into
LegendApp:mainfrom
Mohamed-kassim:fix/horizontal-rtl-native-blank

Conversation

@Mohamed-kassim

@Mohamed-kassim Mohamed-kassim commented Jun 27, 2026

Copy link
Copy Markdown

Horizontal lists show up completely blank in a native‑RTL app (I18nManager.isRTL === true, e.g. an Arabic or Urdu locale). Nothing paints, though onViewableItemsChanged keeps firing, so the items are there, just positioned offscreen. LTR apps (and LTR apps using the rtl prop) 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 (in Container.tsx). On native that step is missing, so when the app is RTL the ScrollView flips 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:

- style={autoOtherAxisStyle ? [autoOtherAxisStyle, style] : style}
+ style={[
+     isHorizontalRTL(ctx.state) && Platform.OS !== "web" ? { direction: "ltr" } : null,
+     autoOtherAxisStyle ? [autoOtherAxisStyle, style] : style,
+ ]}

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 rtl list of 604 pages → blank on Android (happens in every config, even at initialScrollIndex=0).

Tested on a real Android device and that repro on 3.2.0: blank before, renders after; scrollToIndex and paging both work.

One heads‑up: direction: "ltr" inherits down to item content. In practice that's fine, items are positioned with physical left, and RN Text auto‑detects its own direction , but I'm happy to also reset direction: "rtl" on the content wrapper if you'd rather keep it fully contained.

Fixes #477

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread src/components/ListComponent.tsx Outdated
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
Mohamed-kassim force-pushed the fix/horizontal-rtl-native-blank branch from db744fa to 0b5ca97 Compare June 27, 2026 21:19
@Radwan-Albahrani

Copy link
Copy Markdown

i was looking into this. it doesnt work on ios.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Horizontal list renders blank in a native-RTL app (I18nManager.isRTL), Android

2 participants