AstrOOnauta / react-native-international-phone-number

⚛️ International mobile phone number input component for React Native 📱
https://snack.expo.dev/@astroonauta/react-native-international-phone-number
ISC License
262 stars 45 forks source link

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

Open Bilal-Abdeen opened 6 months ago

Bilal-Abdeen commented 6 months ago

Thank you for the excellent library. If the user has an RTL (Right-To-Left) language as the default language on the device, 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. add an RTL language, e.g. Arabic, from the device's settings to your device/emulator
  2. 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. Otherwise, you would need to reset the device/emulator to remove that language.
  3. enter 123 456 in <PhoneInput>. What will be displayed is 456 123.

Notes:

  1. A customMask with no spaces, e.g. "#######", can be used as a workaround. However, we lose the excellent masking capability of the library!
  2. Using a TextInput component from React-Native works fine! I could not find which part of the library's code causes the issue.
  3. 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("I18nManager.isRTL:", I18nManager.isRTL, "localesList[0]?.isRTL", localesList[0]?.isRTL, "localesList[0]?.languageCode", localesList[0]?.languageCode, );

// force LTR and restart the app (for the setting to have an effect.) I18nManager.allowRTL(false); I18nManager.forceRTL(false); RNRestart.restart();