javascriptandroidreact-nativeintlreact-intl

React-Native and Intl polyfill required on Android device


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


Solution

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