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

score 86 · Accepted Answer · edited Nov 28 '17 at 09:59

86

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';

edited Nov 28 '17 at 09:59

hfossli

22,616
10
116
130

answered Jan 30 '17 at 11:44

alexmngn

9,107
19
70
130

16

Thank you for saving whole my life. – Boa Feb 14 '17 at 11:45
2

And how do you do the addLocaleData part? Just ignore it? or import es from 'int/locale-data/jsonp/es' ? – manelescuer Apr 09 '18 at 10:09
3

What if we don't know the locale in advance? e.g. I'd like `Intl` to behave depending on the phone language. – Can Poyrazoğlu Jul 08 '19 at 14:30
@kunambi I gave up on that solution. – Can Poyrazoğlu Jan 14 '20 at 09:44
@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. – pors May 08 '20 at 14:13
@pors unfortunately not. Intl apparently just doesn't play well with RN when language isn't known in advance. – Can Poyrazoğlu May 08 '20 at 18:32
Beware that this lib is discontinued, and its last update was on 2016 – Henrique Bruno Nov 28 '20 at 20:19

score 15 · Answer 2 · answered May 27 '21 at 12:22

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:+'

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! — Hashan Shalitha, Jan 13 '22 at 06:01

score 9 · Answer 3 · answered Feb 20 '17 at 10:27

9

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",

answered Feb 20 '17 at 10:27

score 7 · Answer 4 · answered Jan 15 '22 at 00:56

7

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

answered Jan 15 '22 at 00:56

Alex

513
5
5

7

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. – Hans Bouwmeester Apr 11 '22 at 06:34
@HansBouwmeester, have you already tried this lib? https://www.npmjs.com/package/date-time-format-timezone – Thomaz Capra Sep 29 '22 at 14:45
@ThomazCapra, I have not. Thanks for pointing it out. Do you have good experiences with it? – Hans Bouwmeester Sep 30 '22 at 16:37
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 – Thomaz Capra Sep 30 '22 at 17:16

React-Native and Intl polyfill required on Android device

4 Answers4

Modifying the "build.gradle"