React Native Internationalization

Your app can reach people in dozens of countries when it speaks their language. Internationalization, often shortened to i18n, prepares an app to support many languages, date styles, and number formats. Translation text lives outside the screens, so adding a language means adding a file rather than rewriting code.

What Changes Between Regions

Item        United States      Germany          Japan
──────────────────────────────────────────────────────────
Greeting    Hello              Hallo            こんにちは
Date        11/07/2026         07.11.2026       2026/11/07
Number      1,234.50           1.234,50         1,234.50
Currency    $12.00             12,00 €          ¥1,200
Direction   Left to right      Left to right    Left to right

Arabic and Hebrew read from right to left, so layouts must mirror. Plan for that early.

Never Hard-Code Text

Hard-coded                       Translated
───────────────────              ───────────────────────────
<Text>Welcome</Text>             <Text>{t('welcome')}</Text>
Edit every screen per language   Edit one file per language

Install the Libraries

npm install i18next react-i18next
npx expo install expo-localization

Step 1: Create Translation Files

// src/i18n/locales/en.json
{
  "welcome": "Welcome",
  "login": { "title": "Sign in", "button": "Log in" },
  "items_one": "{{count}} item",
  "items_other": "{{count}} items"
}

// src/i18n/locales/es.json
{
  "welcome": "Bienvenido",
  "login": { "title": "Iniciar sesión", "button": "Entrar" },
  "items_one": "{{count}} artículo",
  "items_other": "{{count}} artículos"
}

Keys stay identical in every file. Values change per language.

Step 2: Configure i18next

// src/i18n/index.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'expo-localization';
import en from './locales/en.json';
import es from './locales/es.json';

const deviceLanguage = getLocales()[0]?.languageCode ?? 'en';

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, es: { translation: es } },
  lng: deviceLanguage,
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

export default i18n;

The app starts in the language of the phone. The fallbackLng setting supplies English when a translation is missing.

Import the file once at the top of App.js: import './src/i18n';

Step 3: Translate in Screens

import { useTranslation } from 'react-i18next';

function LoginScreen() {
  const { t } = useTranslation();

  return (
    <View>
      <Text>{t('login.title')}</Text>
      <Button title={t('login.button')} onPress={signIn} />
    </View>
  );
}

Insert Values

// en.json: "greeting": "Hello, {{name}}"
<Text>{t('greeting', { name: 'Asha' })}</Text>

Plural Rules

Languages handle plurals differently. English has two forms, while Arabic has six. Provide forms through key suffixes and pass a count.

t('items', { count: 1 });   // "1 item"
t('items', { count: 5 });   // "5 items"

Let Users Switch Language

const { i18n } = useTranslation();

<Button title="Español" onPress={() => i18n.changeLanguage('es')} />
<Button title="English" onPress={() => i18n.changeLanguage('en')} />

Screens update instantly. Save the choice in AsyncStorage and apply it at startup.

Format Dates, Numbers, and Currency

The built-in Intl tools format values for a locale.

const price = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
}).format(1234.5);                      // 1.234,50 €

const date = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'long',
}).format(new Date());                  // 7 November 2026

Right-to-Left Layouts

import { I18nManager } from 'react-native';

const isRTL = I18nManager.isRTL;

Use marginStart and paddingEnd instead of left and right values, so spacing flips automatically. A directional icon such as a back arrow needs a mirrored version.

Translation Tips

• Write short, complete sentences, since word-by-word joins break in other languages
• Give translators context for each key
• Leave room for growth, since German text often runs 30 percent longer than English
• Translate the app store listing as well
• Test every language on a real device

Summary

Internationalization moves text into translation files and loads the right one at runtime. Install i18next with expo-localization, detect the device language, call t() for every visible string, and format numbers and dates with Intl. Plan for plurals, longer text, and right-to-left layouts.