Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments
This commit is contained in:
Ansh 2023-11-09 10:04:16 -08:00 committed by GitHub
parent 82059b7ee1
commit 4c7850f8c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
108 changed files with 10334 additions and 1365 deletions

View file

@ -13,6 +13,8 @@ import {
import Clipboard from '@react-native-clipboard/clipboard'
import * as Toast from '../util/Toast'
import {logger} from '#/logger'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals'
export const snapPoints = ['70%']
@ -55,6 +57,7 @@ const shadesOfBlue: string[] = [
export function Component({}: {}) {
const pal = usePalette('default')
const store = useStores()
const {_} = useLingui()
const {closeModal} = useModalControls()
const [name, setName] = useState(
shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
@ -121,15 +124,19 @@ export function Component({}: {}) {
<View>
{!appPassword ? (
<Text type="lg" style={[pal.text]}>
Please enter a unique name for this App Password or use our randomly
generated one.
<Trans>
Please enter a unique name for this App Password or use our
randomly generated one.
</Trans>
</Text>
) : (
<Text type="lg" style={[pal.text]}>
<Text type="lg-bold" style={[pal.text]}>
Here is your app password.
</Text>{' '}
Use this to sign into the other app along with your handle.
<Text type="lg-bold" style={[pal.text, s.mr5]}>
<Trans>Here is your app password.</Trans>
</Text>
<Trans>
Use this to sign into the other app along with your handle.
</Trans>
</Text>
)}
{!appPassword ? (
@ -154,7 +161,7 @@ export function Component({}: {}) {
returnKeyType="done"
onEndEditing={createAppPassword}
accessible={true}
accessibilityLabel="Name"
accessibilityLabel={_(msg`Name`)}
accessibilityHint="Input name for app password"
/>
</View>
@ -163,13 +170,15 @@ export function Component({}: {}) {
style={[pal.border, styles.passwordContainer, pal.btn]}
onPress={onCopy}
accessibilityRole="button"
accessibilityLabel="Copy"
accessibilityLabel={_(msg`Copy`)}
accessibilityHint="Copies app password">
<Text type="2xl-bold" style={[pal.text]}>
{appPassword}
</Text>
{wasCopied ? (
<Text style={[pal.textLight]}>Copied</Text>
<Text style={[pal.textLight]}>
<Trans>Copied</Trans>
</Text>
) : (
<FontAwesomeIcon
icon={['far', 'clone']}
@ -182,14 +191,18 @@ export function Component({}: {}) {
</View>
{appPassword ? (
<Text type="lg" style={[pal.textLight, s.mb10]}>
For security reasons, you won't be able to view this again. If you
lose this password, you'll need to generate a new one.
<Trans>
For security reasons, you won't be able to view this again. If you
lose this password, you'll need to generate a new one.
</Trans>
</Text>
) : (
<Text type="xs" style={[pal.textLight, s.mb10, s.mt2]}>
Can only contain letters, numbers, spaces, dashes, and underscores.
Must be at least 4 characters long, but no more than 32 characters
long.
<Trans>
Can only contain letters, numbers, spaces, dashes, and underscores.
Must be at least 4 characters long, but no more than 32 characters
long.
</Trans>
</Text>
)}
<View style={styles.btnContainer}>