Skip to content

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

@Bilal-Abdeen

Description

@Bilal-Abdeen

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();

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions