Repository navigation
Commit a340eec
Resolve natural text alignment from the layout direction for LTR as well as RTL (#59249)
Summary:
0.88 made `Text` with no `textAlign` align to the right when the layout direction is RTL, which matches Android. That check only runs when the direction is RTL, so for LTR the paragraph style is left alone and iOS falls back to its own "natural" alignment. iOS works that out from the language it picked for the process, not from the layout direction React Native is using.
This shows up in apps that ship more than one language and let people choose it in the app. On an iPhone set to Arabic, with the app set to English (`I18nManager.isRTL` is false, the layout is LTR), every `Text` without `textAlign` is right-aligned inside a left-to-right layout. Android doesn't have this problem.
This change runs the same resolution whenever a layout direction is set, so natural alignment follows the layout direction both ways. Text with an explicit `textAlign` is not affected, and RTL behaves as it does today.
## Changelog:
[IOS] [FIXED] - Natural text alignment follows the layout direction for LTR text, not the process language
Pull Request resolved: #59249
Test Plan:
Our app on 0.88.0 (built from source), iOS 27 simulator with the device language set to Arabic, app set to English, `I18nManager.isRTL` false:
- Without the change, the labels and descriptions on a settings screen (`Text` without `textAlign`) are right-aligned while the rows, icons and switches are laid out left to right.
- With the change, the same text is left-aligned. Nothing else on the screen moves.
- With the app in Arabic (RTL), text is right-aligned with the change, as before (the RTL path takes the same branch it took already).
We carry this as a patch in our app's current test builds. Happy to add screenshots.
Reviewed By: christophpurrer
Differential Revision: D126698053
Pulled By: javache
fbshipit-source-id: c363af359dee730f7b1589ad40cb0ab48b53ad1a1 parent 79a5629 commit a340eec
1 file changed
Lines changed: 2 additions & 2 deletions
File tree
- packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
218 | 218 | | |
219 | 219 | | |
220 | 220 | | |
221 | | - | |
222 | | - | |
| 221 | + | |
| 222 | + | |
223 | 223 | | |
224 | 224 | | |
225 | 225 | | |
| |||
0 commit comments