Using Intl properly in Android React Native app

Question

I'm trying to use number formatter of Intl, which works perfectly on iOS and when debugger is attached to either iOS or Android, but only fails on Android without debugger attached due to outdated JSC in Android.

After a bit research I've found two possible solutions:

Use Intl polyfill
Use custom JSC in Android

I tried Intl polyfill first like this after installing intl and react-intl using yarn:

//in my app's index.js
if (!global.Intl) {
    global.Intl = require('intl');
}

Though it still says ReferenceError: Can't find variable: Intl.

Then I gave up and tried to include custom JSC (I've confirmed that custom AAR is referenced correctly) though I still get the same error. No matter what I do I can't get Intl to get running on Android without debugger attached.

What am I doing wrong? (I'm on React Native 0.59.9)

score 49 · Answer 1 · answered Jan 28 '20 at 16:47

49

Small update, as of React Native v0.60+ you can define intl+ version of the lib.

In your app/build.gradle:

def jscFlavor = 'org.webkit:android-jsc-intl:+'

and have it implemented below in your dependencies:

dependencies {
    ...
    if (enableHermes) {
        ...
    } else {
        implementation jscFlavor
    }
}

answered Jan 28 '20 at 16:47

Simon

6,413
6
34
57

2

Thank you! This was a lifesaver as well as the simplest possible solution. – bend Feb 12 '20 at 18:52
I saw this solution in other places, but they don't mention this dependencies step. Why? – Henrique Bruno Nov 28 '20 at 21:59
@HenriqueBruno for me the dependencies step was already there. `jscFlavor` already exists, this is just changing the value – John Harding Dec 03 '20 at 23:39
@Simon I am getting semantic error after this. – Rohit Aggarwal Jan 12 '21 at 04:17
1

**WARNING** It will increase your app size by around 25 MBs, which was my case, need to figure out some other way around. – Siraj Alam Feb 01 '21 at 07:27
Thanks, this works. Is this documented somewhere? If so, could you please link to it? – Sri Sep 06 '22 at 04:12
Instead of 'org.webkit:android-jsc-intl:+' I would use a specific version BECAUSE the latest version of the library is SDK 21+ (in preview currently). Therefore, I am using `org.webkit:android-jsc-intl:r250230.2.1` to stay on SDK 19 – Someone Somewhere Oct 17 '22 at 21:25

Hamid Tavakoli · Answer 2 · 2021-01-05T15:41:17.677

20

If disabling Hermes is not an option in your app/build.gradle, and you cant use org.webkit:android-jsc-intl:+ then Intl polyfill can fix the issue:

npm install intl

in the code:

import 'intl';
import 'intl/locale-data/jsonp/en'; // or any other locale you need

edited Jan 05 '21 at 15:41

answered Jan 05 '21 at 15:06

Hamid Tavakoli

4,567
1
33
34

3

Can this be done for android only? e.g. if (Platform.android) { require('intl').default } – MDalt Mar 22 '21 at 18:21

score 11 · Answer 3 · edited Aug 09 '21 at 11:21

11

npm i intl

After that import

import "intl";

import "intl/locale-data/jsonp/en";

And then use Intl

For eg:-

{new Intl.NumberFormat("en-IN", {
                  style: "currency",
                  currency: "INR",
                }).format(
                  (travelTimeInformation?.duration.value *
                    SURGE_CHARGE_RATE *
                    multiplier) /
                    100
                )}

edited Aug 09 '21 at 11:21

MashukKhan

1,946
1
27
46

answered Aug 04 '21 at 18:08

jay

257
3
5

This worked in Expo app. Cheers man – TrevorDeTutor Jan 11 '23 at 05:33

score 2 · Answer 4 · answered Jun 23 '22 at 08:59

If you are using React Native v0.60+

In app/build.gradle if you already has jscFlavor

like, def jscFlavor = 'org.webkit:android-jsc:+'

replace it with, def jscFlavor = 'org.webkit:android-jsc-intl:+'

and implemented in dependencies

dependencies {
  if (enableHermes) {
    ...
  } else {
    implementation jscFlavor
  }
}

score 1 · Answer 5 · answered Jul 09 '19 at 13:42

If you're using custom JSC then don't forget to import the international version as explained in the read me of JSC Android Buildscripts:

For React Native version 0.59, replace original artifact id with android-jsc-intl

dependencies {
+   // Make sure to put android-jsc at the the first
+   implementation "org.webkit:android-jsc-intl:r241213"
+
    compile fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

score 0 · Accepted Answer · answered Jul 10 '19 at 09:36

I wanted to delete this question but I can't since there's already another answer.

It had nothing to do with JSC. My build script wasn't updating the APK properly while I thought it was, and I was trying an old bogus APK over and over again. Otherwise, apparently I was doing everything properly as it works now with the new APK.

Using Intl properly in Android React Native app

6 Answers6

Linked