Skip to content

Commit

Permalink
docs: fix lint
Browse files Browse the repository at this point in the history
  • Loading branch information
vonovak committed Apr 28, 2023
1 parent 14f06e1 commit a6f3e9b
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 8 deletions.
2 changes: 1 addition & 1 deletion website/docs/misc/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
- [Localizing React Native apps talk from React Native EU 2022](https://www.youtube.com/live/uLicTDG5hSs?feature=share&t=7512)
10 changes: 3 additions & 7 deletions website/docs/tutorials/react-native.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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:
Expand Down Expand Up @@ -110,7 +109,6 @@ i18n.loadAndActivate({ locale: "en", messages });
<Text style={styles.heading}><Trans>Message Inbox</Trans></Text>
```


:::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).
:::
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -200,7 +198,7 @@ You'll surely agree the `Text` component looks a little redundant. That's why th
<Trans>Message Inbox</Trans>
```

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

Expand All @@ -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)
Expand All @@ -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).

0 comments on commit a6f3e9b

Please sign in to comment.