feat(i18n): RTL layout for Arabic (direction switch + logical-property migration)#131
Merged
Conversation
…ty migration Completes the last i18n gap. Arabic now lays out right-to-left, not just translated LTR. Mechanism (`lib/rtl.ts`): - `syncRTL(lang)` — web sets `document.dir`; native sets `I18nManager.forceRTL` (persisted). Applied on launch from `_layout` for the active language. - `setLanguage` persists the choice (so it survives the reload), flips direction via syncRTL, and on web reloads when the direction actually changes (en↔ar). - i18n init now prefers the persisted language over device detection — without this the RTL reload reset back to the device locale. Layout — migrate physical → logical Tailwind utilities so spacing/alignment flip under RTL (and stay correct in LTR): `ml/mr→ms/me`, `pl/pr→ps/pe`, `text-left/right→text-start/end`, and the FAB / corner-badge insets `right→end`. `flex-row` auto-reverses from `dir`/`forceRTL`; symmetric `left-4 right-4` left as-is. NativeWind 4 maps the logical classes to RN `marginStart/End` etc., which honour direction on both web and native. Verified on web: zh/en LTR unchanged; switching to العربية mirrors the whole shell (header, cards, chevrons, tab bar, text alignment) and persists across reload; switching back restores LTR. Snapshots updated for the class rename. tsc + lint clean, full suite 1337 passing. Note: native applies the direction on next launch (no `expo-updates` / react-native-restart bundled to hot-reload); web is instant. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
RTL — the last i18n gap
Arabic now lays out right-to-left, not just translated LTR.
Mechanism (
lib/rtl.ts)syncRTL(lang)— web setsdocument.dir; native setsI18nManager.forceRTL(persisted). Applied on launch from_layoutfor the active language.setLanguagepersists the choice (so it survives the reload), flips direction, and on web reloads when the direction actually changes (en↔ar).Layout — physical → logical Tailwind utilities
So spacing/alignment flip under RTL and stay correct in LTR:
ml/mr → ms/me,pl/pr → ps/pe,text-left/right → text-start/end, and the FAB / corner-badge insetsright → end(~70 occurrences, 33 files).flex-rowauto-reverses fromdir/forceRTL; symmetricleft-4 right-4left as-is. NativeWind 4 maps the logical classes to RNmarginStart/Endetc., which honour direction on both web and native.Verified (browser, 375dp, dark)
ms-/me-).tsc + lint clean; snapshots updated for the class rename; full suite 1337 passing.
Note
Native applies the direction on next launch — no
expo-updates/react-native-restartis bundled to hot-reload, and adding a native module needs a rebuild. Web is instant. This is the one platform caveat; the mechanism + layout are complete.🤖 Generated with Claude Code