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:
add an RTL language, e.g. Arabic, from the device's settings to your device/emulator
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.
enter 123 456 in <PhoneInput>. What will be displayed is 456 123.
Notes:
A customMask with no spaces, e.g. "#######", can be used as a workaround. However, we lose the excellent masking capability of the library!
Using a TextInput component from React-Native works fine! I could not find which part of the library's code causes the issue.
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();
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 displays456 123
. This occurs regardless of the app's support for RTL!To reproduce:
<PhoneInput>
. What will be displayed is 456 123.Notes:
customMask
with no spaces, e.g."#######"
, can be used as a workaround. However, we lose the excellent masking capability of the library!TextInput
component fromReact-Native
works fine! I could not find which part of the library's code causes the issue.// 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();