How to localize a React Native app

i18n in React Native

The usual setup uses react-i18next + expo-localization. react-i18next loads JSON namespaces and resolves keys at runtime; a locale detector (expo-localization or react-native-localize) reads the device language at startup. Dynamic values use {{double-brace}} interpolation.

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import { getLocales } from 'expo-localization'
import en from './locales/en/translation.json'
import de from './locales/de/translation.json'

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, de: { translation: de } },
  lng: getLocales()[0]?.languageCode ?? 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
})

import { Text } from 'react-native'
import { useTranslation } from 'react-i18next'

export function Greeting() {
  const { t } = useTranslation()
  return <Text>{t('greeting', { name: 'Sam' })}</Text>
}

Translate it with nlit

1. 1Add your source-language strings to nlit as keys (import your existing files, or start fresh).
2. 2Run AI auto-translate into every target language — the credit cost is shown before each run, and your glossary keeps brand terms intact.
3. 3Review and approve, then pull the files into your repo with the CLI.

# .nlit.yaml
format: json-nested
output_dir: src/locales
platform: web        # JSON resources, not native .strings/.xml
languages:
  - de
  - fr
  - ja

src/locales/
  de/
    translation.json
  fr/
    translation.json
  ja/
    translation.json

Format for React Native: json-nested. See the CLI docs for every format and flag.

Things to watch for

• Bundle the JSON with your app (import it) so strings are available offline at first launch — don’t fetch them at runtime.
• Use react-i18next’s plural handling with nlit’s plural keys for correct CLDR forms per language.
• For RTL languages (Arabic, Hebrew), pair your translations with React Native’s I18nManager to flip layout direction.

FAQ