mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1# Internationalization
2
3We want the official Bluesky app to be supported in as many languages as possible. If you want to help us translate the app, please open a PR or issue on the [Bluesky app repo on GitHub](https://github.com/bluesky-social/social-app)
4
5## Tools
6We are using Lingui to manage translations. You can find the documentation [here](https://lingui.dev/).
7
8### Adding new strings
9When adding a new string, do it as follows:
10```jsx
11// Before
12import { Text } from "react-native";
13
14<Text>Hello World</Text>
15```
16
17```jsx
18// After
19import { Text } from "react-native";
20import { Trans } from "@lingui/macro";
21
22<Text><Trans>Hello World</Trans></Text>
23```
24
25The `<Trans>` macro will extract the string and add it to the catalog. It is not really a component, but a macro. Further reading [here](https://lingui.dev/ref/macro.html)
26
27However sometimes you will run into this case:
28```jsx
29// Before
30import { Text } from "react-native";
31
32const text = "Hello World";
33<Text accessibilityLabel="Label is here">{text}</Text>
34```
35In this case, you can use the `useLingui()` hook:
36```jsx
37import { msg } from "@lingui/macro";
38import { useLingui } from "@lingui/react";
39
40const { _ } = useLingui();
41return <Text accessibilityLabel={_(msg`Label is here`)}>{text}</Text>
42```
43
44If you want to do this outside of a React component, you can use the `t` macro instead (note: this won't react to changes if the locale is switched dynamically within the app):
45```jsx
46import { t } from "@lingui/macro";
47
48const text = t`Hello World`;
49```
50
51We can then run `yarn intl:extract` to update the catalog in `src/locale/locales/{locale}/messages.po`. This will add the new string to the catalog.
52We can then run `yarn intl:compile` to update the translation files in `src/locale/locales/{locale}/messages.js`. This will add the new string to the translation files.
53The configuration for translations is defined in `lingui.config.js`
54
55So the workflow is as follows:
561. Wrap messages in Trans macro
572. Run `yarn intl:extract` command to generate message catalogs
583. Translate message catalogs (send them to translators usually)
594. Run `yarn intl:compile` to create runtime catalogs
605. Load runtime catalog
616. Enjoy translated app!
62
63### Common pitfalls
64These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing stale translations to be shown.
65
66```jsx
67import { msg } from "@lingui/macro";
68import { i18n } from "@lingui/core";
69
70const welcomeMessage = msg`Welcome!`;
71
72// ❌ Bad! This code won't work
73export function Welcome() {
74 const buggyWelcome = useMemo(() => {
75 return i18n._(welcomeMessage);
76 }, []);
77
78 return <div>{buggyWelcome}</div>;
79}
80
81// ❌ Bad! This code won't work either because the reference to i18n does not change
82export function Welcome() {
83 const { i18n } = useLingui();
84
85 const buggyWelcome = useMemo(() => {
86 return i18n._(welcomeMessage);
87 }, [i18n]);
88
89 return <div>{buggyWelcome}</div>;
90}
91
92// ✅ Good! `useMemo` has i18n context in the dependency
93export function Welcome() {
94 const linguiCtx = useLingui();
95
96 const welcome = useMemo(() => {
97 return linguiCtx.i18n._(welcomeMessage);
98 }, [linguiCtx]);
99
100 return <div>{welcome}</div>;
101}
102
103// 🤩 Better! `useMemo` consumes the `_` function from the Lingui context
104export function Welcome() {
105 const { _ } = useLingui();
106
107 const welcome = useMemo(() => {
108 return _(welcomeMessage);
109 }, [_]);
110
111 return <div>{welcome}</div>;
112}
113```
114
115
116### Credits
117Please check each individual `messages.po` file for the credits of the translators. We are very grateful for their help!
118
119If you would like to translate the Bluesky app into your language, please open a PR or issue on this repo.