React Native Android app changes numbers' representation to be in Arabic/Persian

user_14721356 0
Viewed 41

I'm working on a multi-language React Native application. When the user's app is in Arabic or Persian language, a font with Arabic digits will be used. And when they are in other languages (like English), a font with English digits will be used. One of our customers sent me the image below. The thing is their app is in English language but their phone's language settings is set to Persian language and so I think their device's settings is messing up the fonts in application. I expect all digits to be in English (since this is the behavior on my own Android phone with English language settings), but as you can see in the image below, all the digits before decimal points are shown in Arabic numbers. Is there a way to stop such behavior? For example once I had a problem with Android's dark theme getting applied to my application and ruining the colors but I added the following code to android/app/src/main/res/values/styles.xml and the problem was fixed.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:forceDarkAllowed">false</item>
    <!-- Customize your theme here. -->
</style>

I mean, isn't there a similar solution like adding a property somewhere in AndroidManifest.xml, styles.xml, etc. to fix this issue?
Thanks in advance.

enter image description here

react-native android
1 Answers

Ok. After lots of investigation, I found that the problem was from my own code and not from Android OS. I had created a method called withCommas to format numbers with comma separation and stuff.

Number.prototype.withCommas = function () {
    const splitArray = this.toString().split('.')
    if (splitArray.length === 1) return parseFloat(splitArray[0]).toLocaleString();
    return parseFloat(splitArray[0]).toLocaleString() + '.' + splitArray[1]
}

Now the problem is obvious. You have to explicitly tell the String.toLocaleString to use en-US locale (which I forgot). If you don't specify the locale, it will use whatever locale that the user's device is on. So I changed all toLocaleString() appearances with toLocaleString("en-US") and the problem is solved now.

user_147213560
Related