diff --git a/website/docs/misc/resources.md b/website/docs/misc/resources.md index 1a83ae5aa..907b6b258 100644 --- a/website/docs/misc/resources.md +++ b/website/docs/misc/resources.md @@ -9,4 +9,4 @@ - [Let React speak your language](https://www.youtube.com/watch?v=soAEB7ltQPk) - by Tomáš Ehrlich - [Internationalization is a piece of cake](https://www.youtube.com/watch?v=vhUiL_wUAjo) - by Eli Schutze -- [Localizing React Native apps talk from React Native EU 2022](https://www.youtube.com/live/uLicTDG5hSs?feature=share&t=7512) \ No newline at end of file +- [Localizing React Native apps talk from React Native EU 2022](https://www.youtube.com/live/uLicTDG5hSs?feature=share&t=7512) diff --git a/website/docs/tutorials/react-native.md b/website/docs/tutorials/react-native.md index b3d3ec4d4..50e46a664 100644 --- a/website/docs/tutorials/react-native.md +++ b/website/docs/tutorials/react-native.md @@ -1,6 +1,6 @@ # Internationalization of React Native apps -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. +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](/docs/tutorials/setup-react.md) for installation and setup instructions. 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. @@ -27,7 +27,6 @@ Follow the polyfill installation instructions and then import them at the top of 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: @@ -110,7 +109,6 @@ i18n.loadAndActivate({ locale: "en", messages }); Message Inbox ``` - :::tip Hint We're importing the default `i18n` object from `@lingui/core`. The `i18n` object is covered in greater detail in the [JavaScript tutorial](/docs/tutorials/javascript.md). ::: @@ -155,7 +153,7 @@ const Inbox = (({ markAsRead }) => { ## Internationalization outside of React -Until now, we have covered the [`Trans`](/docs/ref/react.md#trans) macro and the [`useLingui`](ref/react#uselingui) hook. Using them will make sure our components are always in sync with the currently active locale and message catalog. +Until now, we have covered the [`Trans`](/ref/react#trans) macro and the [`useLingui`](/ref/react#uselingui) hook. Using them will make sure our components are always in sync with the currently active locale and message catalog. However, often you'll need to show localized strings outside of React, for example when you want to show an Alert from some business logic code. @@ -200,7 +198,7 @@ You'll surely agree the `Text` component looks a little redundant. That's why th Message Inbox ``` -Alternatively, you may override the default locally on the i18n components, using the `render` or `component` prop, as documented in the [reference](/docs/ref/react.md#rendering-translations). Use them to apply styling to the rendered string. +Alternatively, you may override the default locally on the i18n components, using the `render` or `component` prop, as documented in the [reference](/docs/ref/react.md#rendering-translations). Use them to apply styling to the rendered string. ## Nesting components @@ -226,7 +224,6 @@ The extracted string for translation will look like this: The important point here is that the sentence isn't broken into pieces but remains together - that will allow the translator to deliver a quality result. - ## Further reading - [`@lingui/react` reference documentation](/docs/ref/react.md) @@ -235,4 +232,3 @@ The important point here is that the sentence isn't broken into pieces but remai - [Localizing React Native apps talk from React Native EU 2022](https://www.youtube.com/live/uLicTDG5hSs?feature=share&t=7512) This guide originally authored and contributed in full by [Vojtech Novak](https://twitter.com/vonovak). -