Would this work with React Native + Expo?

[claraberendsen]

Hi! I have a project with react native + expo multiplatform (Web, Android, IOS) that I need to internationalize with TS. Is there a way to compile for Android and IOS?

[ivanhofer]

To be honest: I don't know.
I haven't used React Native before. But I would expect typesafe-i18n to run there too.
Probably the best way to find out is to create a new empty project and add typesafe-i18n to it.
Feel free to share your findings in this discussion 😊

[ivanhofer]

@claraberendsen have you had the chance to try it out?

[whalemare]

I tried to use it with react-native and it works, but (!) I am configure typesafe-i18n by myself.
One additional thing I should to do for make it works, just add .cjs files support for metro-bundler, while it not enabled by default facebook/metro#535

[ivanhofer]

Can you plese share more information what is needed to make typesafe-i18n work with React Native?

[whalemare]

Ok, I try to prepare repository on next weekends

[ivanhofer]

Thanks!

[chriscoomber]

Interestingly, Expo recommends typesafe-i18n in this guide: https://docs.expo.dev/guides/localization/#complete-example (see where it says "Using other translation libraries"). It mentions that you need to be using Hermes as your javascript engine (easy to configure in expo), and I suppose the implicit requirement is that you're on the latest version of Expo (SDK 47 at time of writing).

However, that wasn't enough to get typesafe-i18n working. There were 2 issues:

CJS files

As @whalemare points out, before metro version 0.72.0, you need to add 'cjs' to your metro.config.js under sourceExts. Something like:

const { getDefaultConfig } = require('expo/metro-config');

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.resolver = {
    ...resolver,
    sourceExts: [...resolver.sourceExts, 'cjs'],
  };

  return config;
})();

The linked issue claims that this is resolved in metro version 0.72.0. Expo SDK 47 uses react-native 0.70.5, which uses metro 0.70.3. So, you still need to do this workaround.

Intl implementation

Even with Expo SDK 47 with Hermes' support for the Intl API on iOS and Android, it doesn't appear that it supports all of the Intl API. You can see that various constructors are still not supported: https://hermesengine.dev/docs/intl/#not-yet-supported. I found that I needed to use polyfill to add these in. My code was:

package.json

{
   dependencies: {
    "@formatjs/intl-getcanonicallocales": "^2.0.4",
    "@formatjs/intl-locale": "^3.0.7",
    "@formatjs/intl-pluralrules": "^5.1.4",
  }

App.tsx or App.js

// Polyfill for Intl on native. This is only the bare minimum needed for typesafe-i18n.
// This is quite bulky and inefficient. Some of this might be possible to remove in later versions of Hermes, as they
// implement more of the Intl namespace.
if (Platform.OS !== 'web') {
  import('@formatjs/intl-getcanonicallocales/polyfill');
  import('@formatjs/intl-locale/polyfill');
  import('@formatjs/intl-pluralrules/polyfill');
}

Note that I've enabled dynamic imports in my tsconfig.json with the compilerOption: "module": "ESNext". You can probably get away with using require statements instead of import if you're not using typescript.

Conclusion

I think Expo have assumed that since Hermes "supports" Intl that typescript-i18n will work just fine. But that doesn't appear to be the case. @whalemare, I'd be interested to see how you got it working, and if you needed to do this polyfill step or if something else worked for you.

[ivanhofer]

@chriscoomber Thanks for your detailed analysis.
Really cool that typesafe-i18n get's mentioned in their docs :)

Regarding the polyfills: you should only need Intl.PluralRules. Or does that package need the other two to function?

May I ask you a favor? Would you like to create a PR with a basic example inside this folder?
It would be great to have a working example somewhere instead of needing to dig through the discussion and figuring everything out step by step.

[chriscoomber]

Yep, you need the other two as dependencies for PluralRules. Though I found the docs hard to understand, they have a dependency diagram: https://formatjs.io/docs/polyfills/

By the way I really like typesafe-intl. It feels like you've thought of everything, so I don't need to worry about needing different features, and also the ergonomics are really good. I've been using the keys in the generated Translations type as types in my data models, it's very nice

[chriscoomber]

@ivanhofer here's a PR of that basic example

#522

[ivanhofer]

Thanks for the PR! I just merged it.

Yes, I have spent a lot of time trying to offer a great Developer Experience with typesafe-i18n. I think the library is really flexible and can cover a variety of use cases. Thanks for your kind words :).

I'm currently working on some concepts to improve DX even further.

[whalemare]

@ivanhofer found a time to make PR: #531

It's totally looks like #522 from @chriscoomber (thank you), but for bare react-native and contains only required set of changes with minimal reproducible example

[developerEhsan]

for anyone who is struggling to find way to implement the 18n-js in expo with the proper type safety. this article will be perfect -> https://medium.com/@your-ehsan/how-to-add-i18n-internationalization-in-the-expo-react-native-application-with-proper-c0bea72ae7ce