From 14f06e1b33a3fc202f18aa0eeaf4ea02f4ce2f32 Mon Sep 17 00:00:00 2001 From: Vojtech Novak Date: Fri, 28 Apr 2023 20:55:35 +0200 Subject: [PATCH] docs: more rn updates --- website/docs/ref/macro.md | 4 +-- website/docs/tutorials/react-native.md | 49 +++++++++++--------------- 2 files changed, 23 insertions(+), 30 deletions(-) diff --git a/website/docs/ref/macro.md b/website/docs/ref/macro.md index 6d38e9a52..cb0beec6e 100644 --- a/website/docs/ref/macro.md +++ b/website/docs/ref/macro.md @@ -609,9 +609,9 @@ const message = t({ ### `defineMessage` alias: `msg` {#definemessage} -`defineMessage` macro allows to define message for later use. It returns a `MessageDescriptor` that you can pass to `i18n._` to get a translated string at any time later. +`defineMessage` macro allows to define message for later use. It has the same signature as `t` and returns a `MessageDescriptor` that you can pass to `i18n._` to get a translated string at any time later. -In another words, `t` returns a translated string at the time when it's called, while `msg` returns a ``MessageDescriptor` that can produce translated strings later. +In other words, `t` returns a translated string at the time when it's called, while `msg` returns a ``MessageDescriptor` that can produce translated strings later. ```ts import { defineMessage } from "@lingui/macro" diff --git a/website/docs/tutorials/react-native.md b/website/docs/tutorials/react-native.md index ac666b9df..b3d3ec4d4 100644 --- a/website/docs/tutorials/react-native.md +++ b/website/docs/tutorials/react-native.md @@ -5,7 +5,7 @@ In this tutorial, we'll learn how to add internationalization to an existing app The React Native tutorial is similar to the one for [React](/docs/tutorials/react.md) and we highly recommend you read that one first because it goes into greater detail on many topics. Here, we will only cover parts that are relevant for React Native. :::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). +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). It showcases more functionality than this guide. ::: :::caution Note @@ -17,16 +17,17 @@ If some `Intl` feature is not supported by your runtime, you can [polyfill it](h See [here](https://github.com/facebook/hermes/issues/23) for details about `Intl` support in the Hermes engine. ::: -## Metro bundler support - -Lingui packages make use of the `exports` keyword in `package.json`. Metro bundler versions before 0.76.2 (before React Native 0.72) do not support this feature. You need to make sure that (1) you're running metro 0.76.2 or newer and (2) that `unstable_enablePackageExports` is enabled in your `metro.config.js` file. See the [example](https://github.com/vonovak/js-lingui-demo/blob/main/metro.config.js). - ## 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). Please note that installing the `Intl` polyfills can significantly increase your bundle size. Follow the polyfill installation instructions and then import them at the top of your application entry file. +## Metro bundler support + +Lingui packages make use of the `exports` keyword in `package.json`. Metro bundler versions before 0.76.2 (before React Native 0.72) do not support this feature. You need to make sure that (1) you're running metro 0.76.2 or newer and (2) `unstable_enablePackageExports` is enabled in your `metro.config.js` file. See the [example](https://github.com/vonovak/js-lingui-demo/blob/main/metro.config.js). + + ## Example component We're going to translate the following contrived example: @@ -53,9 +54,9 @@ export const AppRoot = () => { { - setMessages((msgs) => msgs.concat([`message # ${msgs.length + 1}`])); - }} + addMessage={() => { + setMessages((msgs) => msgs.concat([`message # ${msgs.length + 1}`])); + }} /> ); } @@ -68,13 +69,7 @@ const Inbox = ({ messages, markAsRead }) => { Message Inbox - {messages.map((message, index) => { - return ( - {message} - ); - })} - -