-
Notifications
You must be signed in to change notification settings - Fork 24.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
rtl to ltr not working on latest version(0.77) until manual refresh #49451
Comments
Warning Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2. |
Warning Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2. |
Warning Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:
|
I think it is the same issue as here #48311 since this is new arch |
Hi @BondugulaAadhi , Thank you for reporting this issue. It looks like the RTL to LTR switching is not working as expected in React Native version 0.77 without a manual refresh. I understand that the code snippet you provided worked in previous versions but is now causing problems:
Try using a longer delay: Sometimes a longer delay can help synchronize the state changes. If the problem persists, it would be helpful to include more detailed steps to reproduce the issue, along with any additional logs or screenshots. |
I tried using |
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
Description
setTimeout(() => {
I18nManager.forceRTL(true);
RNRestart.Restart();
}, 200);
the same code worked on previous versions but when I updated my latest code to latest version 0.77 not working properly
Steps to reproduce
setTimeout(() => {
I18nManager.forceRTL(true);
RNRestart.Restart();
}, 200);
the same code worked on previous versions but when I updated my latest code to latest version 0.77 not working properly
React Native Version
0.77
Affected Platforms
Runtime - Android, Runtime - iOS
Output of
npx @react-native-community/cli info
Stacktrace or Logs
Reproducer
Screenshots and Videos
setTimeout(() => {
I18nManager.forceRTL(true);
RNRestart.Restart();
}, 200);
the same code worked on previous versions but when I updated my latest code to latest version 0.77 not working properly
The text was updated successfully, but these errors were encountered: