Implementing Internationalization (i18n)

npm install i18next
npm install react-i18next

{
  "expo": {
    "locales": {
      "en": "./locales/en.json",
      "es": "./locales/es.json",
      "fr": "./locales/fr.json"
    },
    "defaultLocale": "en"
  }
}

{
  "welcome": "Welcome to our app",
  "greeting": "Hello, {name}!",
  "settings": "Settings",
  "logout": "Logout"
}

{
  "welcome": "Bienvenido a nuestra aplicación",
  "greeting": "Hola, {name}!",
  "settings": "Configuración",
  "logout": "Cerrar sesión"
}

import { useTranslation } from 'expo-i18n';

export default function MyComponent() {
  const { t } = useTranslation();

  return (
    <View>
      <Text>{t('welcome_message')}</Text>
    </View>
  );
}

import { useTranslation } from 'expo-i18n';

export default function LanguageSwitcher() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <View>
      <Text>{t('current_language', { lng: i18n.language })}</Text>
      <Button title="Switch to Spanish" onPress={() => changeLanguage('es')} />
    </View>
  );
}

I18n.switchLanguage('es');

import { formatDate } from 'expo-localization';

const date = new Date('2025-04-15');

console.log(formatDate(date, { locale: 'en-US' })); // "4/15/2025"
console.log(formatDate(date, { locale: 'fr-FR' })); // "15/04/2025"
console.log(formatDate(date, { locale: 'ja-JP' })); // "2025/04/15"

import { formatDate } from 'expo-localization';

const date = new Date('2025-04-15');

console.log(formatDate(date, {
  locale: 'en-US',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})); // "April 15, 2025"

import { Intl } from 'intl';

const number = 1234567.89;

// US locale
console.log(new Intl.NumberFormat('en-US').format(number));
// Output: 1,234,567.89

// German locale
console.log(new Intl.NumberFormat('de-DE').format(number));
// Output: 1.234.567,89

// Currency formatting
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number));
// Output: $1,234,567.89

const formatter = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 4
});

console.log(formatter.format(1234.56789));
// Output: 1,234.5679

import * as Localization from 'expo-localization';

const locale = Localization.locale;
console.log("Device locale:", locale); // e.g. "en-US"

import { I18nManager } from 'react-native';

I18nManager.forceRTL(true);

<Trans>
  {count, plural,
    one{# item}
    other{# items}
  }
</Trans>

// locales/en.json
{
  "common": {
    "welcome": "Welcome",
    "loading": "Loading..."
  },
  "auth": {
    "login": "Login",
    "logout": "Logout"
  }
}

<Trans i18nKey="greeting" values={{ name: "John", count: 5 }}>
  Hello {{name}}, you have {{count}} messages
</Trans>

<Trans i18nKey="userProfile" values={{
  firstName: "Alex",
  lastName: "Johnson",
  age: 30
}}>
  {{firstName}} {{lastName}} is {{age}} years old
</Trans>