Search code examples
reactjsreact-nativeinternationalizationi18nextreact-i18next

ForceRTL on iOS isn't working in React Native App


Android is responding well to direction change, however iOS isn't switching RTL correctly, iOS keep restarting and when I checked the state of isRTL is doesn't change

 useEffect(() => {
    initializingSet(true);
    const languageSetter = async () => {
      const storageLang = await AsyncStorage.getItem("appLang");
      const systemLanguage = getLocales()[0].languageCode;
      const { isRTL } = I18nManager;
      console.log(
        storageLang,
        storageLang,
        appLang,
        I18nManager.isRTL,
        "<<=Lang"
      );
      if (appLang) {
        changeLanguage(appLang);
        if (appLang !== storageLang) {
          AsyncStorage.setItem("appLang", appLang);
        }
        if ((appLang === "en" && isRTL) || (appLang !== "en" && !isRTL)) {
          I18nManager.allowRTL(!isRTL);
          I18nManager.forceRTL(!isRTL); // FIXNOW: iOS not switching to RTL
          RNRestart.restart();
        }
        initializingSet(false);
      } else {
        if (storageLang) {
          appLangSet(storageLang as AppLanguagesType);
        } else {
          if (systemLanguage) {
            AsyncStorage.setItem("appLang", systemLanguage).finally(() =>
              appLangSet(systemLanguage as AppLanguagesType)
            );
          } else {
            appLangSet("en");
          }
        }
      }
    };

    languageSetter();
  }, [appLang]);

my app.json has the supportsRTL

   "extra": {
      "supportsRTL": true,
           }

The same app run on Android just fine! Any thoughts?


Solution

  • After alot of search I found this issue https://github.com/expo/expo/issues/26532

    removing expo-localization fixed it, now I am using native modules to detect language

    const systemLanguage = (
            (Platform.OS === "ios"
              ? NativeModules.SettingsManager.settings.AppleLocale ||
                NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
              : NativeModules.I18nManager.localeIdentifier) as string | undefined
          )?.substring(0, 2) as AppLanguagesType | undefined;