RTL Layout Direction Not Updating after app reload with New React Native Architecture #45661
Comments
serhii-yalla
added
Needs: Triage 🔍
Type: New Architecture
|
react-native-bot
added
Needs: Repro
|
|
|
|
@serhii-yalla is the same behavior happening also on Old Arch? |
No. On the old arch reload forces styles to change. So it works as expected |
github-actions
bot
added
Needs: Attention
|
@serhii-yalla great thanks for the info. |
@cortinico Here it is. WithoutNewArch.1.mp4WithNewArch.1.mp4 |
|
Great thank you! it would be gold |
cortinico
added
Issue: Author Provided Repro
|
getting the same issue, in the new architecture, the Layout direction is not working |
|
maybe it is related to #39803 |
|
I am also facing the same issue in version 0.76.1. However, it works perfectly on Android; the issue only occurs on iOS. |
|
ihave the same issue on ios |
|
weirdly enough if you close and relaunch the app it works, but not with reloading. |
|
I guess we have to leave an undeclared variable after the language change to let tha app crash... and hope that user will open it again. |
I would advice against it, that will make your crash metrics go down hill and might trigger an alert in your google play console. |
|
Having facing the same issue only on iOS, android work perfectly in react native version 0.76.3... any update for iOS ?? |
|
Another reproducer: https://github.com/bhojaniasgar/RTLIssue |
|
Facing the same issue here, I use: |
|
I'm experiencing same issue on IOS with |
|
Disable newArch until it is fixed It will solve the problem add this inside your PodFile use_react_native!(:path => config[:reactNativePath], :new_arch_enabled => false) |
|
@mktufan21 After making this false react-native-mmkv is not working in Version 3.x..x and when downgrading MMKV 2.x.x then android not working is there any way to use MMKV version 3.x.x in android and 2.x.x in iOS till this issue solves in new Architecture |
|
@asgarPeerbits You have to use the new arch to be able to use rn mmkv v3. |
|
@a-eid Yes its enable in Android side |
|
@asgarPeerbits ah I didn't get your question correctly, I don't think there is a proper way to use mmkv v2 on ios & v3 on android. just downgrade back to mmkv v2 until this is fixed. |
|
I'm also experiencing same with new arch. Android seems to be working fine. |
|
Locking as we’re aware this has never worked on iOS with the new architecture. As always PRs are welcome, however it's quite a complex issue as it involves how Yoga handles LTR and how we keep things in sync with the New Architecture. You'll need to know these quite well to implement a fix. |
|
This should be fixed by #49455 |
cortinico
added
the
Resolution: Fixed
Summary: This fixes an issue in Fabric where changing the layout direction and then reloading the JS bundle did not honor the layout direction until the app was restarted on iOS. This now calls `_updateLayoutContext` whenever RCTSurfaceView is recreated which happens on bundle reload. This is not an issue on the old architecture because the layout direction is determined within the [SurfaceViews](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/Views/RCTRootShadowView.m#L18) which were recreated on bundle reload. ## Related Issues: - react-native-community/discussions-and-proposals#847 - facebook#49451 - facebook#48311 - facebook#45661 ## How can we take this further? If we want to make it so that it doesn't require an entire bundle reload for RTL to take effect I believe these are the steps that would need to be taken: - Make it so [RCTI18nManager](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/CoreModules/RCTI18nManager.mm#L52) exports isRTL as a method instead of consts - Send Notification Center notif when RTL is forced on or off - Listen for that notification RCTSurfaceView and call _updateLayoutContext similar to UIContentSizeCategoryDidChangeNotification. ## Changelog: [iOS] [FIXED] - Layout direction changes are now honored on bundle reload. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#49455 Test Plan: On the new architecture change force the layout direction and reload the bundle: ``` import React, { useCallback } from "react"; import { Button, I18nManager, StyleSheet, Text, View } from "react-native"; import RNRestart from "react-native-restart"; export default function Explore() { const onApplyRTL = useCallback(() => { if (!I18nManager.isRTL) { I18nManager.forceRTL(true); RNRestart.restart(); } }, []); const onApplyLTR = useCallback(() => { if (I18nManager.isRTL) { I18nManager.forceRTL(false); RNRestart.restart(); } }, []); return ( <View style={styles.area}> <Text>Test Block</Text> <View style={styles.testBlock}> <Text>Leading</Text> <Text>Trailing</Text> </View> <Button title={"Apply RTL"} onPress={onApplyRTL} /> <Button title={"Apply LTR"} onPress={onApplyLTR} /> </View> ); } const styles = StyleSheet.create({ area: { marginVertical: 50, paddingHorizontal: 24, }, testBlock: { paddingVertical: 10, flexDirection: "row", justifyContent: "space-between", }, }); ``` https://github.com/user-attachments/assets/0eab0d79-de3f-4eeb-abd0-439ba4fe25c0 Reviewed By: cortinico, cipolleschi Differential Revision: D69797645 Pulled By: NickGerleman fbshipit-source-id: 97499621f3dd735d466f5119e0f2a0eccf1c3c05
|
Will this fix be released in 0.76 or 0.77 |
|
@Linuhusainnk I think it'll be released to both 0.76 & 0.77 cc @cortinico |
|
@a-eid @Linuhusainnk Guys any idea how to make a patch with this until its released? i have tried adding this line |
|
@ahmamedhat I am not sure TBH, could you share your patch file and some details about your setup ? |
|
Hi @a-eid will it take long time, we are waiting for long or should we go for making patch for now? |
|
If you want for the patch to be released, you need to open pick requests for each version using this template. We release new patches of older version periodically, when there is a critical commit or when there are enough commits to ship to justify the release. |
Summary: This fixes an issue in Fabric where changing the layout direction and then reloading the JS bundle did not honor the layout direction until the app was restarted on iOS. This now calls `_updateLayoutContext` whenever RCTSurfaceView is recreated which happens on bundle reload. This is not an issue on the old architecture because the layout direction is determined within the [SurfaceViews](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/Views/RCTRootShadowView.m#L18) which were recreated on bundle reload. ## Related Issues: - react-native-community/discussions-and-proposals#847 - #49451 - #48311 - #45661 ## How can we take this further? If we want to make it so that it doesn't require an entire bundle reload for RTL to take effect I believe these are the steps that would need to be taken: - Make it so [RCTI18nManager](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/CoreModules/RCTI18nManager.mm#L52) exports isRTL as a method instead of consts - Send Notification Center notif when RTL is forced on or off - Listen for that notification RCTSurfaceView and call _updateLayoutContext similar to UIContentSizeCategoryDidChangeNotification. ## Changelog: [iOS] [FIXED] - Layout direction changes are now honored on bundle reload. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #49455 Test Plan: On the new architecture change force the layout direction and reload the bundle: ``` import React, { useCallback } from "react"; import { Button, I18nManager, StyleSheet, Text, View } from "react-native"; import RNRestart from "react-native-restart"; export default function Explore() { const onApplyRTL = useCallback(() => { if (!I18nManager.isRTL) { I18nManager.forceRTL(true); RNRestart.restart(); } }, []); const onApplyLTR = useCallback(() => { if (I18nManager.isRTL) { I18nManager.forceRTL(false); RNRestart.restart(); } }, []); return ( <View style={styles.area}> <Text>Test Block</Text> <View style={styles.testBlock}> <Text>Leading</Text> <Text>Trailing</Text> </View> <Button title={"Apply RTL"} onPress={onApplyRTL} /> <Button title={"Apply LTR"} onPress={onApplyLTR} /> </View> ); } const styles = StyleSheet.create({ area: { marginVertical: 50, paddingHorizontal: 24, }, testBlock: { paddingVertical: 10, flexDirection: "row", justifyContent: "space-between", }, }); ``` https://github.com/user-attachments/assets/0eab0d79-de3f-4eeb-abd0-439ba4fe25c0 Reviewed By: cortinico, cipolleschi Differential Revision: D69797645 Pulled By: NickGerleman fbshipit-source-id: 97499621f3dd735d466f5119e0f2a0eccf1c3c05
and others
Description
When using I18nManager to switch the layout direction between RTL (Right-to-Left) and LTR (Left-to-Right), the changes do not reflect after reload on the UI(doesn't force styles), but apply for animations. This issue appears specifically with the new React Native architecture. The styles and layout directions are only applied correctly after the app is fully restarted.
Steps to reproduce
react-native-restart. to restart the app.text-align: right).React Native Version
0.74.0
Affected Platforms
Runtime - iOS, Build - MacOS
Areas
Fabric - The New Renderer, TurboModule - The New Native Module System, JSI - Javascript Interface, Bridgeless - The New Initialization Flow, Codegen
Output of
npx react-native infoReproducer
Screenshots and Videos
No response
The text was updated successfully, but these errors were encountered: