React-Native and Intl polyfill required on Android device

Question

I recently updated my Android Studio and many components/sdk and since then React-Intl complains about intl library missing, even though it was working fine before.

I have installed the intl polyfill and I import it at the very top of my main file App.js. I also import the localeData from react-intl and add it. Then, I render my view within the IntlProvider specifying the locale with no messages (I only use FormattedNumber for now)

This is a simplified version of my code:

import 'intl';
import { IntlProvider, FormattedNumber, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';

addLocaleData(en);

[...]

render() {
    return (
        <IntlProvider locale="en">
            <Text>
                <FormattedNumber value={123} />
            </Text>
        </IntlProvider>
    )
}

I get the following error:

[React Intl] Error formatting number. ReferenceError: No locale data has been provided for this object yet.

I don't understand what's going on. Anyone encounter the same issue?

Thanks

Procurator

Answer 1

Instead of importing locale-data from react-intl, I have resolved the issue importing the polyfill and the locale data from intl

Install intl

npm install intl

Add this at the very top of your app:

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

Procurator

Thank you for saving whole my life. – Sharynshashlik

And how do you do the addLocaleData part? Just ignore it? or import es from 'int/locale-data/jsonp/es' ? – Fukien

What if we don't know the locale in advance? e.g. I'd like Intl to behave depending on the phone language. – Kurdistan

@kunambi I gave up on that solution. – Kurdistan

@CanPoyrazoğlu did you find a workaround? It is pretty annoying we have to do so much work to display an amount as a function of a locale. – Visible

@Visible unfortunately not. Intl apparently just doesn't play well with RN when language isn't known in advance. – Kurdistan

Beware that this lib is discontinued, and its last update was on 2016 – Spadefish

Answer 2

Modifying the "build.gradle"

On android, you can modify the "build.gradle" file inside /android/app/build.gradle. Remember, it is NOT the file in /android/app/gradle/build.gradle.

then, go to the sited file and search for:

      /**
     * The preferred build flavor of JavaScriptCore.
     *
     * For example, to use the international variant, you can use:
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * The international variant includes ICU i18n library and necessary data
     * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
     * give correct results when using with locales other than en-US.  Note that
     * this variant is about 6MiB larger per architecture than default.
     */
     def jscFlavor = 'org.webkit:android-jsc:+'

now, modify the last line, or simply comment it out and copy and paste the similar one above. And the result will be this:

      /**
     * The preferred build flavor of JavaScriptCore.
     *
     * For example, to use the international variant, you can use:
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * The international variant includes ICU i18n library and necessary data
     * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
     * give correct results when using with locales other than en-US.  Note that
     * this variant is about 6MiB larger per architecture than default.
     */
     //def jscFlavor = 'org.webkit:android-jsc:+'
     def jscFlavor = 'org.webkit:android-jsc-intl:+'

Imine

thank you sooooo much, i solved my problem finally :) – Siderostat

Thanks a lot. This should be the correct answer for 2022. This solution is tested for "react-native": "0.61.5" and it's working great! – Satellite

Answer 3

Heads up, this works now with just doing the import 'intl'; at the top and still loading the locale-data from react-intl. Using the following versions:

"intl": "^1.2.5",
"react-intl": "^2.2.2",

Cindacindee

Answer 4

Update to React Native 0.65 or newer

Finally "intl" is now included in Hermes, which comes with React Native 0.65 or newr - More in React Native Blog

Dragging

Do you have any tips/pointers on how to use it? Just calling Intl.DateTimeFormat doesn't seem to work. I'm on RN68 with Hermes 0.11.0. Do I need to import something? I checked the Blog but wasn't able to make sense of it. – Straub

@HansBouwmeester, have you already tried this lib? npmjs.com/package/date-time-format-timezone – Entrails

@ThomazCapra, I have not. Thanks for pointing it out. Do you have good experiences with it? – Straub

Yes I have, since hermes still don't have polyfill for all functions, you can use this library. Be careful with your bundle size, it can increase in 1MB – Entrails