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?
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;