Internationalization

NativeExpress includes English and German translations using i18n-js and expo-localization .

Use a translation

Import the shared i18n instance and call t with a key:


import { Text } from 'react-native';
import { i18n } from '@/i18n';
 
export function Greeting() {
  return <Text>{i18n.t('home.greeting_morning')}</Text>;
}

Add new user-facing strings to both src/i18n/en.json and de.json. Keep the keys nested by screen, then element:


{
  "auth": {
    "update_password_title": "Set a new password",
    "update_password_button": "Update password"
  }
}

Add a language

Create the translation file

Copy src/i18n/en.json to fr.json, for example. Translate the values and keep the keys identical.

Register the language

Add the import and extend the existing map:

src/i18n/index.ts


import fr from './fr.json';
 
const localesMap = { en, de, fr };

Keep the existing English and German imports.

Extend the translation check

scripts/check-i18n.mjs compares English and German keys, checks translation references and detects certain hardcoded strings. Add your new language to its key-parity check so missing translations fail CI.

Verify

Run yarn check:i18n. Set the device language to French, fully restart the app, and check the screens you translated.

Missing translations fall back to English, but the shipped CI check still requires English and German to have identical keys.

Interpolation

Use %{name} to insert values into a translation:

src/i18n/en.json


{
  "home": {
    "plan_usage": "%{used}/%{limit} messages this month"
  }
}


i18n.t('home.plan_usage', { used: 3, limit: 10 });

Use %{used}, because {{used}} is displayed as literal text.

How the language is selected

src/i18n/index.ts reads the device language once at startup and selects it when it is present in localesMap. Other languages fall back to English. Regional variants such as de-DE use the language code, de.

There is no in-app language picker. To expose supported languages in the operating system’s per-app language settings, configure supportedLocales in the expo-localization plugin and rebuild. Expo’s localization guide covers that setup.

Right-to-left languages

Adding Arabic or Hebrew translations also requires checking the layout in a right-to-left language. The boilerplate has no app-specific I18nManager configuration or RTL layout variants.

Review directional spacing, alignment, navigation and icons. Use start and end where a layout should follow reading direction, then test on both platforms. Follow Expo’s RTL guidance for native configuration.