javascript – React-Native and Intl polyfill required on Android device-ThrowExceptions

Exception or error:

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.

enter image description here

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

Thanks

How to solve:

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

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *