Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

If the device's direction is RTL, input is reversed #76

Open
Bilal-Abdeen opened this issue Jun 14, 2024 · 0 comments
Open

If the device's direction is RTL, input is reversed #76

Bilal-Abdeen opened this issue Jun 14, 2024 · 0 comments

Comments

@Bilal-Abdeen
Copy link

Thank you for the excellent library. If the user has an RTL (Right-To-Left) language as the default language on an Android device/emulator, the different parts of the phone number are reversed. For example, if the user enters 123 456, this library displays 456 123. This occurs regardless of the app's support for RTL!

To reproduce:

  1. on an Android device/emulator add an RTL language, e.g. Arabic, from the device's settings to your device/emulator
  2. select a different country than the default one. This step is important! For some reason the issue occurs only after changing the country! Moreover, I guess it has something to do with the masking functionality!
  3. Make the RTL language the default language. If you do not know how to read the language you selected, make sure you know the sequence to change the language back to what it was. Otherwise, you would need to reset the device/emulator to remove that language.
  4. enter 123 456 as the phone number. It will be displayed as 456 123.

Notes:

  1. Using a TextInput component from React-Native works fine!
  2. For troubleshooting purposes, you can use the following to force React-Native to use LTR. This does NOT fix the problem!
import { I18nManager, } from "react-native";
import RNRestart from "react-native-restart";
import { getLocales } from "react-native-localize";

// get: (1) React-Native direction setting, & (2) the default language setting on the device
const localesList = getLocales();
// console.log("App setring for RTL:", I18nManager.isRTL, "device setting for RTL", localesList[0]?.isRTL, );

// force LTR and restart the app (for the setting to have an effect.)
I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
RNRestart.restart();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant