Skip to content
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

Open
BondugulaAadhi opened this issue Feb 15, 2025 · 6 comments
Open
Labels
Needs: Attention Issues where the author has responded to feedback. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Version Info Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@BondugulaAadhi
Copy link

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

"react-native-restart": "^0.0.27",

"react-native": "0.77",

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-restart": "^0.0.27",

"react-native": "0.77",

React Native Version

0.77

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx @react-native-community/cli info

warn Package react-native-sqlite-storage contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
info Fetching system and libraries information...
System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M4
  Memory: 743.67 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.6.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: ~/Desktop/tf-app/node_modules/.bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: ^18.3.1
  react-native:
    installed: 0.77.0
    wanted: ^0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.77.1 is now available (your project is running on v0.77.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.77.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.77.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
asifraza@Asifs-Mac-mini tf-app %

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

"react-native-restart": "^0.0.27",

"react-native": "0.77",
@react-native-bot
Copy link
Collaborator

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.

@react-native-bot react-native-bot added Needs: Version Info Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. and removed Needs: Triage 🔍 labels Feb 15, 2025
@react-native-bot
Copy link
Collaborator

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.

@react-native-bot
Copy link
Collaborator

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

@mzaien
Copy link

mzaien commented Feb 16, 2025

I think it is the same issue as here #48311

since this is new arch

@Ayush41
Copy link

Ayush41 commented Feb 16, 2025

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:

setTimeout(() => { I18nManager.forceRTL(true); RNRestart.Restart(); }, 200);
In the meantime, you might want to try the following workaround to see if it helps:

Try using a longer delay: Sometimes a longer delay can help synchronize the state changes.
setTimeout(() => { I18nManager.forceRTL(true); RNRestart.Restart(); }, 500); // Try increasing the delay
Check if the issue persists on the latest React Native version: As per the changelog, React Native v0.77.1 is now available. Updating to the latest version might resolve the issue.

If the problem persists, it would be helpful to include more detailed steps to reproduce the issue, along with any additional logs or screenshots.

@BondugulaAadhi
Copy link
Author

I tried using
setTimeout(() => { I18nManager.forceRTL(true); RNRestart.Restart(); }, 500);
even I tried with more delay still facing same issue

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Feb 17, 2025
@cortinico cortinico marked this as a duplicate of #49468 Feb 19, 2025
@cortinico cortinico added the Resolution: PR Submitted A pull request with a fix has been provided. label Feb 19, 2025
facebook-github-bot pushed a commit that referenced this issue Feb 19, 2025
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Attention Issues where the author has responded to feedback. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Version Info Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Development

No branches or pull requests

5 participants