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 64 · Accepted Answer · edited Nov 28 '17 at 09:59

64

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

21,612
9
111
127

answered Jan 30 '17 at 11:44

alexmngn

7,551
14
57
117

13

Thank you for saving whole my life. – suho 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
2

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 8 · Answer 2 · answered Feb 20 '17 at 10:27

8

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 0 · Answer 3 · 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:+'

React-Native and Intl polyfill required on Android device

3 Answers3

Modifying the "build.gradle"