RTL issue in android

[USB18]

Description

I am adding RTL support in an app with the default language as Arabic and RTL=true. For that, on the first render in index.js, I am forcing RTL and restarting the app.

componentDidMount() {
        try {
            this.activeLanguage();
        } catch (error) {
            console.log(error);
        }
    }
    
      async activeLanguage() {
        try {
            const activeLanguage = await getStorage('active_lan');
            const defaultLanguage = "ar";
            const languageToUse = hasValue(activeLanguage) ? activeLanguage : defaultLanguage;
            await i18n.changeLanguage(languageToUse)

            if (languageToUse === "ar") {
                I18nManager.forceRTL(true)
                !I18nManager.isRTL && restart_app();
            } else if (languageToUse === "en") {
                I18nManager.forceRTL(false);
                I18nManager.isRTL && restart_app();
            }
        } catch (error) {
            console.log("Error setting active language:", error);
        }
    }

After that user can change language b/w Arabic and English and on each language change resting the app. On restarting the app the language changes but RTL is not updated.

<LanguageDropdown languages={languages} onLanguageChange={handleLanguageSelection} />

    const handleLanguageSelection = async (selectedLanguage) => {
        try {
            clearStorage();
            const newLanguage = selectedLanguage?.code === "en" ? "en" : "ar";
            await setStorage("active_lan", newLanguage);

            await i18n.changeLanguage(newLanguage)
            if (newLanguage === "en") {
                I18nManager.allowRTL(false)
                I18nManager.forceRTL(false)
            } else if (newLanguage === "ar") {
                I18nManager.forceRTL(true)
                I18nManager.allowRTL(true)
            }
            restart_app();
        } catch (error) {
            console.log("Error toggling language:", error);
        }
    };

So I am again forcing RTL and restarting the app as above mentioned index.js code then in some devices, it's restarting the app 4,5 times in the loop and then updating RTL.

Here is my i18n.js

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { persistor } from '../redux/store'
import { I18nManager } from "react-native";

// Initialize i18next
i18next
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {},
      },
      ar: {
        translation: {},
      },
    },
    compatibilityJSON: 'v3',
    lng: I18nManager.isRTL ? "ar" : "en",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  }).then(() => {
    persistor.persist();
  });

export default i18next;

React Native Version

0.70.0

Output of npx react-native info

System: OS: macOS 14.0 CPU: (8) arm64 Apple M1 Memory: 163.63 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.5.1 - /opt/homebrew/bin/node Yarn: Not Found npm: 9.8.0 - /opt/homebrew/bin/npm Watchman: 2023.08.14.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /Users/umeshsingh/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10406996 Xcode: 15.0/15A240d - /usr/bin/xcodebuild Languages: Java: 11.0.20 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.0 => 0.70.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Mentioned above

Snack, screenshot, or link to a repository

None

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.70.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[USB18]

any one faced same issue as RTL not working in specific devices

[BohdanRozov]

Hi @USB18 I am facing similar issue, did you manage to solve it or found any workaround?

[LahmerIlyas]

Any update on this one?

[Bilal-Abdeen]

1. Regarding the issue of "the language changes but RTL is not updated," I am not sure what restart_app does. I use:

import RNRestart from "react-native-restart";
RNRestart.restart();

Moreover, some people (see #41407) suggest adding a delay before restarting.

setTimeout(RNRestart.restart, 1000);

2. The loop of many restarts could be caused by using the wrong condition to restart the app. Check if the direction changed (a restart is required) before restarting.

import { I18nManager } from "react-native";
import RNRestart from "react-native-restart";

const abc = (() => {
        if (newLanguage === "en" && I18nManager.isRTL) {
            I18nManager.allowRTL(false)
            I18nManager.forceRTL(false)
            RNRestart.restart();
        } else if (newLanguage === "ar" && !I18nManager.isRTL) {
            I18nManager.forceRTL(true)
            I18nManager.allowRTL(true)
            RNRestart.restart();
        }
};

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.