Internationalization

Support multiple languages in your app | Expo Starter

iOS

Web

Android

This documentation will guide you through configure internationalization (i18n) in your project.

Step 1: Configuration

Update configuration file to support multiple languages in your app.

config.ts

const config = {
  availableAppLanguages: ["en", "fr"] as const,
  // rest of the configuration
}

Step 2: Create or update Translation Files

Create translation JSON files in a locales directory (or any other directory you prefer). For example:

./i18n/locales/en/translation.json
./i18n/locales/es/translation.json

Example translation.json (English):

{
  "welcome": "Welcome to our app!",
  "login": "Login"
}

Example translation.json (Spanish):

{
  "welcome": "¡Bienvenido a nuestra aplicación!",
  "login": "Iniciar sesión"
}

Step 5: Use Translations in Your Components

Use the useTranslation hook from react-i18next to access translations:

import React from 'react';
import { useTranslation } from 'react-i18next';
 
const WelcomeMessage = () => {
  const { t } = useTranslation();
  return <Text>{t('welcome')}</Text>;
};

You can use Sherlock to manage translations in your project. Sherlock is a VS Code extension that helps you manage translations in your codebase.

Internationalization

Step 1: Configuration

Step 2: Create or update Translation Files

Step 5: Use Translations in Your Components

On this page