I'm facing an issue with RTL (Right-to-Left) language switching in my React Native-only app. The layout direction change works perfectly on Android, but on iOS (tested on iPhone 7 Plus), the RTL direction does not apply immediately after the language is changed. It only works after I manually close and reopen the app, which is not an ideal experience.
I'm currently testing the app using a debug build, not a release version.
What I’ve tried so far (none worked on iOS): Forcing reload with DevSettings.reload()
Restarting with RNRestart.Restart()
Exiting using BackHandler.exitApp()
Clearing data via AsyncStorage.clear()
Using RTLManager.forceRestart()
Trying RNHardReload.hardReload()
Forcing component re-render
Custom closeAppState() function
react-exit-app package
Manually reloading language
Displaying an alert asking users to close and reopen the app (this works but is not ideal)
I also tried applying RTL immediately after detecting language change using I18nManager.allowRTL(true) and I18nManager.forceRTL(true), followed by app reloads — but this still doesn't reflect the RTL layout immediately on iOS.
Question: How can I apply RTL layout direction on iOS immediately after changing the language in a React Native-only app (debug build) without asking the user to manually close and reopen the app?
Any help or workaround would be Here is my language change code please check it
useEffect(() => {
const handleLanguageChange = (lng: string) => {
const isRTL = lng === 'ar';
// Ensure RTL and LTR switching works properly
I18nManager.allowRTL(true);
I18nManager.forceRTL(isRTL);
if (I18nManager.isRTL !== isRTL) {
setTimeout(() => {
DevSettings.reload(); // Reload app
}, 2000);
}
};
i18n.on('languageChanged', handleLanguageChange);
return () => {
i18n.off('languageChanged', handleLanguageChange);
};
}, []);