ios-hermes-intl

[nandorojo]

Library

hermes

Summary

Hermes still doesn't support Intl for iOS (it does for Android).

The polyfills out there feel very hacky. It's possible this shouldn't actually be a config plugin, since the solution may just be a bunch of imports in a JS file. But if it could, it would be a nice way to make the upgrade to Hermes smoother for iOS.

Any existing examples?

No response

[nandorojo]

Exciting news, React Native 0.70 now supports Intl for iOS! So this issue is no longer needed. (Link).

The only question is, will Expo support React Native 0.70...👀

[kbrandwijk]

The only question is, will Expo support React Native 0.70...👀

Not in the upcoming SDK, but I imagine some time after.

[nandorojo]

Thanks for the update! Is this the case for custom dev clients too?

[kbrandwijk]

Thanks for the update! Is this the case for custom dev clients too?

As always, custom dev clients don't lock you in to a specific RN version, unless there's breaking changes that cause incompatibility issues. I don't think there's been any research into 0.70 yet, so I can't comment on that other than with: YMMV.

[GollyJer]

It's funny. I spent 3 days developing many features in our app using Intl with Hermes enabled. My primary dev device is Android. Little did I expect, when firing up my iOS simulators, I'd be presented with Property 'intl' doesn't exist.

My first attempt at fixing this without having to do a polyfill was to use react-native: 0.7.1 (eas build). It didn't make a difference. Not sure why. 😕

[GollyJer]

To get the pollyfills working...

yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-datetimeformat

Add this to your entry point file. I'm using index.js.

/* eslint-disable import/no-unused-modules */
/* eslint-disable @typescript-eslint/no-unused-expressions */

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // Polyfills required to use Intl with Hermes engine
  require('@formatjs/intl-getcanonicallocales/polyfill').default;
  require('@formatjs/intl-locale/polyfill').default;
  require('@formatjs/intl-pluralrules/polyfill').default;
  require('@formatjs/intl-pluralrules/locale-data/en').default;
  require('@formatjs/intl-numberformat/polyfill').default;
  require('@formatjs/intl-numberformat/locale-data/en').default;
  require('@formatjs/intl-datetimeformat/polyfill').default;
  require('@formatjs/intl-datetimeformat/locale-data/en').default;
  require('@formatjs/intl-datetimeformat/add-all-tz').default;
}

[hexadecy]

With react-native 0.70.x and Hermes, we can do without this line:

require('@formatjs/intl-getcanonicallocales/polyfill').default;

Tested on iOS 13.7 and iOS 16.2

[nandorojo]

hermes now has Intl support on iOS

[basbase]

still need a bunch of polyfills:

import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-datetimeformat/polyfill';
import '@formatjs/intl-datetimeformat/locale-data/en'; // one for each locale to support
import '@formatjs/intl-datetimeformat/add-all-tz';

[anatooly]

It's great https://reactnative.dev/blog/2022/07/08/hermes-as-the-default#ios-intl now bundle size less 1.34Mb after remove polyfill.

[andrewdavidcostello]

Using specific Intl calls still fail without polyfills. Creating a duration in luxon and calling toHuman results in a prototype undefined error.