RTL not forced on initial app render

[anasalaqeel]

Minimal reproducible example

https://snack.expo.dev/@stevemoretz/ltr-rtl

Summary

My app is not supporting RTL but when users have RTL languages on their phones, my app messed up so I tried to add this code at the top component (App Component) like the example below:-

import { I18nManager, Text, TextInput } from "react-native";

I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

function App({children}) {
  return (
    <View>{children}</View>
  );
}

but it's not working for the initial start of the app on production and sometimes the users need to restart the app or uninstall and re-install and restart again to take effect of forceRTL or all the above code

This is a real issue that makes the app unusable for RTL language phones which makes developers move to Flutter to prevent this from happening.

Please help with this ASAP.

Thank You in advance BR

Environment

expo-env-info 1.0.5 environment info: System: OS: Windows 10 10.0.22621 Binaries: Node: 16.17.1 - C:\Program Files\nodejs\node.EXE npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: AI-213.7172.25.2113.9123335 npmPackages: expo: ^48.0.17 => 48.0.19 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.71.8 => 0.71.8 react-native-web: ~0.18.10 => 0.18.12 Expo Workflow: managed

[arasrezaei]

Experiencing same issue it's really an annoying problem

[aleqsio]

@anasalaqeel could you provide a repository with an application that does not enable RTL, but shows as RTL for some locales? What platform does this happen on?

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[jhogervorst]

You can force-reload the React app to make it work:

import * as Updates from "expo-updates";

I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
Updates.reloadAsync();

[arasrezaei]

You can force-reload the React app to make it work:

import * as Updates from "expo-updates";

I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
Updates.reloadAsync();

It slows app start up, I ended up editing MainApplication.java directly and foreRTL before React context load

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

[XFAISAL]

i think we have to downgrade to SDK 49