Expensify.cash - Implement Higher-Order Component that re-renders when the locale changes

Upwork job posting

We are implementing the structure for internationalisation and localisation in Expensify.Cash. As part of that, we need to implement a Higher-Order Component that re-renders when the locale changes

This is similar to our withOnyx HOC. It’s the only place that needs to care when the preferredLocale NVP changes and when it does, it re-triggers rendering of any component using it. It will:

1. Have one prop preferredLocale and its default will be en
2. Call withOnyx passing {locale: {key: ONYXKEYS.PREFERRED_LOCALE}}. ONYXKEYS.PREFERRED_LOCALE will have the value preferredLocale
3. Do I need to handle anything in componentDidUpdate? I think not?
4. It will pass as props to the WrappedComponent (the component that’s using it) each of the methods of the libraries defined above, but with the locale already passed (we can also make this just one property with all these methods in it. Something like translations.methodName()):

• translate(phrase, variables) which will use this
• numberFormat(options). It will return a new Intl.NumberFormat object for the current locale and using the options passed.
• timestampToRelative(timestamp) which will use this
• timestampToDateTime(timestamp, includeTimezone) which will use this
• toLocalPhone(number) which will use this
• fromLocalPhone(number) which will use this

Expensify/Expensify repo issue.

[AndrewGable]

Looks great 👍

[iwiznia]

Oh nice! ok, I think we should go with that option then. @AndrewGable, @Julesssss do you agree?