Intl polyfills for React Native 0.63 and hermes

Question

I ran into issues when I turned on hermes in my app. Specifically with Intl support, I'm getting this error in Android ReferenceError: Property 'Intl' doesn't exist, js engine: hermes.

I've read these posts already

• Reddit comment
• Github comment
• Another Github comment

But I can't get this to work. Have anyone applied these solutions succesfully or got this to work with another appoach?

React Native 0.63.3

Bergman

Also see https://mcmap.net/q/478758/-using-intl-properly-in-android-react-native-app for a simple solution using the intl package. – Intendant

Answer 1

For those who have the same problem. I've posted the same on reddit.

I was finally able to get intl to work updating react native from 0.63.3 to 0.64.1 and installing the polyfills from @formatjs and import them in index.js in the order shown in the graph

Bergman

And something about how to handle dynamic imports in react native: github.com/facebook/metro/issues/52 – Nuriel

Thanks, this helped me. While also mentioned by Saul, importing them in the correct order means that you have to look at the requirements of your required polyfill, and including those imports above the import that you need. In my case that looked like this: import "@formatjs/intl-getcanonicallocales/polyfill"; import "@formatjs/intl-locale/polyfill"; import "@formatjs/intl-displaynames/polyfill"; import "@formatjs/intl-displaynames/locale-data/en"; – Stingo

Thank you for mentioning the import order from the graph, we had an error "Property 'Intl' doesn't exist" on iOS devices because we were importing numberformat before pluralrules. – Girish