From 261d50ff7abab866f0609af08df8fd385da9ff8c Mon Sep 17 00:00:00 2001 From: Vojtech Novak Date: Sun, 12 Mar 2023 12:22:39 +0100 Subject: [PATCH 01/18] feat: react native docs --- website/docs/tutorials/react-native.md | 120 ++++++++++++------------- 1 file changed, 58 insertions(+), 62 deletions(-) diff --git a/website/docs/tutorials/react-native.md b/website/docs/tutorials/react-native.md index 1588959bb..b7a0c1160 100644 --- a/website/docs/tutorials/react-native.md +++ b/website/docs/tutorials/react-native.md @@ -1,14 +1,30 @@ # Internationalization of React Native apps -In this tutorial, we'll learn how to add internationalization to an existing application in React Native. The React Native tutorial is largely similar to the one for [React](/docs/tutorials/react.md), and we highly recommend you check out that tutorial first because it covers installation, setup and other topics. Here we will cover parts that are relevant for React Native and hopefully answer all questions you may have. +In this tutorial, we'll learn how to add internationalization to an existing application in React Native. Before going further, please follow the [setup guide](tutorials/setup-react.md) for installation and setup instructions. + +The React Native tutorial is similar to the one for [React](/docs/tutorials/react.md) but here we will cover parts that are relevant for React Native and hopefully answer all questions you may have. + +:::tip Hint +If you're looking for a working solution, check out the [sources available here](https://github.com/vonovak/js-lingui-demo) and the [demo app on Expo](https://exp.host/@vonovak/js-lingui-demo). +::: :::caution Note -The latest version of `@lingui/react` working out-of-the-box for React Native on Android is 2.2. Newer versions depend on the [Intl object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) which is not available on the JavaScript Core that is used on Android by default. See the [JSC build scripts for Android](https://github.com/react-community/jsc-android-buildscripts) for possible solution or use the [Intl polyfill](https://github.com/andyearnshaw/Intl.js/). +This tutorial assumes you use Lingui >=4.0 and React Native >=0.70 or Expo 47, with the Hermes JavaScript Engine. + +`@lingui/core` depends on several apis exposed by the [Intl object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). Support of the Intl object can vary across React Native and OS versions. +If some Intl feature is not supported by your runtime, you can [polyfill it](https://formatjs.io/docs/polyfills). + +See [here](https://github.com/facebook/hermes/issues/23) for details about Intl support in the Hermes engine. ::: -If you're looking for a working solution, check out the [demo on Expo](https://exp.host/@vonovak/js-lingui-demo). The source code is [available here](https://github.com/vonovak/js-lingui-demo). +## Polyfilling Intl apis + +React Native does not support all Intl features out of the box and we need to polyfill [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) using [`@formatjs/intl-locale`](https://formatjs.io/docs/polyfills/intl-locale/) and [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) using [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules). + +Follow their installation instuctions and then import the polyfills at the top of your application entry file. -## Let's Start + +## Example component We're going to translate the following app: @@ -60,61 +76,61 @@ const Inbox = ({ messages, markAsRead, username }) => { As you can see, it's a simple mailbox application with only one screen. -## Introducing internationalization +## Internationalization in React Not surprisingly, this part isn't too different from the [React tutorial](/docs/tutorials/react.md). -:::caution Note -Make sure to update `metro.config.js` resolvers with `mjs` extension to avoid [this problem](https://github.com/eemeli/make-plural/issues/15): - -``` js title="metro.config.js" -resolver: { - sourceExts: ['js', 'ts', 'tsx', 'mjs'], -}, -``` -::: - -Let's use the [`Trans`](/docs/ref/macro.md#trans) macro first. Don't forget that we need to wrap our root component with the [`I18nProvider`](/docs/ref/react.md#i18nprovider) so we can set the active locale and load catalogs: - -Let's translate the screen heading: +First we need to wrap our app with [`I18nProvider`](/docs/ref/react.md#i18nprovider) and then we can use the [`Trans`](/docs/ref/macro.md#trans) macro to translate the screen heading: ```jsx import { I18nProvider } from '@lingui/react' import { Trans } from '@lingui/macro' import { i18n } from "@lingui/core" +import { Text } from "react-native"; i18n.load('en', messages); i18n.activate('en'); - + -// later on somewhere deep in the React component tree: +// later on somewhere in the React element tree: Message Inbox ``` -This was easy. Now, the next step is to translate the `title` prop of the `