Skip to content

fix: iOS honor RCTI18nUtil RTL on New Architecture - #803

Merged
BartoszKlonowski merged 1 commit into
callstack:mainfrom
kashmiry:fix/rtl-newArch
Oct 16, 2026
Merged

BartoszKlonowski merged 1 commit into
callstack:mainfrom
kashmiry:fix/rtl-newArch

Conversation

@kashmiry

@kashmiry kashmiry commented Apr 26, 2026 •

Copy link
Copy Markdown
Contributor

Summary:

On the New Architecture (Fabric) on iOS, the slider follows the device language instead of the app's language.
So if the app is in (RTL) and forced with:

I18nManager.forceRTL(true)

but the device is in English (LTR), the slider appears flipped — the filled side and drag direction don't match the rest of the app's UI. Same problem in reverse: English app on an Arabic device.

This fix makes the slider follow the app's direction (I18nManager.forceRTL) regardless of what the device is set to.

  • Android already works correctly, so no changes there.
  • The old architecture (Paper) is unaffected.
issue.mov
fixed.mov

Test Plan:

Tested on the New Architecture (Fabric) on iOS with all four combinations of device locale × app forced direction. The slider's filled track grows from the value-minimum side as defined by the app's direction in every case:

Device locale App forced direction Expected filled-from-side Result
LTR (en_US) LTR Left ✅
LTR (en_US) RTL (forceRTL(true)) Right ✅
RTL (ar_SA) LTR (forceRTL(false)) Left ✅
RTL (ar_SA) RTL Right ✅

Also verified:

  • Dragging toward the maximum side increases the value, regardless of device locale.
  • tapToSeek taps land at the correct value in all four combinations.
  • The inverted prop still works on top of the new baseline direction.
  • No regressions on Android.

Repro steps (before the fix):

  1. Run on iOS with New Architecture enabled.
  2. Ensure iOS project has a localized Info.plist example for Arabic (RTL language)
  3. Set device language to English; in the app, call I18nManager.forceRTL(true) and restart.
  4. Observe the slider's filled track is on the left (incorrect — should be on the right to match the app's RTL UI).
  5. Apply this patch, rebuild, and observe the filled track is now on the right.

@BartoszKlonowski BartoszKlonowski left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

There can still be an issue with the original thumb with the RTL approach, but this is not related to that PR. We also still support inverted prop, which works fine on iOS platform in that case.
Still, I see the point of this PR and I see no stopping issues with it 👍
Thank you, @kashmiry for handling this :)

@BartoszKlonowski

Copy link
Copy Markdown
Member

I don't see a way to approve the workflow for some reason, so let me reopen hoping to fix it...

@BartoszKlonowski
BartoszKlonowski merged commit be35eac into callstack:main Oct 16, 2026
11 of 12 checks passed
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.

2 participants