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)

Leone

Answer 1

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.

Leone

Answer 2

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
    }
}

Dwanadwane

Thank you! This was a lifesaver as well as the simplest possible solution. – Carpal

I saw this solution in other places, but they don't mention this dependencies step. Why? – Vinitavinn

@HenriqueBruno for me the dependencies step was already there. jscFlavor already exists, this is just changing the value – Sharisharia

@Dwanadwane I am getting semantic error after this. – Tashia

WARNING It will increase your app size by around 25 MBs, which was my case, need to figure out some other way around. – Minima

Thanks, this works. Is this documented somewhere? If so, could you please link to it? – Jacquiline

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 – All

Answer 3

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

Camise

Can this be done for android only? e.g. if (Platform.android) { require('intl').default } – Overhaul

/!\ This lib is outdated /!\ and the repo has been archived since 2021. Also It has a lot of unresolved bugs which makes it hard to work with – Codeine

Answer 4

npm i intl

After that import

import "intl";

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

And then use Intl

For example

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

Balliett

This worked in Expo app. Cheers man – Freeswimming

/!\ This lib is outdated /!\ and the repo has been archived since 2021. Also It has a lot of unresolved bugs which makes it hard to work with – Codeine

Answer 5

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
  }
}

Zeppelin

Answer 6

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
}

Claypoole

Answer 7

You'll need to setup JSC based on your React Native version.

for React native 60 or newer :

1. yarn add jsc-android (or npm i)

2. You're done, sync project with gradle files on Android studio, rebuild your app and enjoy updated version of JSC on android!

for other React Native versions, please refer to the official documentation under the How to use it with my React Native app :

https://github.com/react-native-community/jsc-android-buildscripts#international-variant

Alfilaria