react-i18next in React Native & Expo

Learn how to add multi-language support to React Native apps using the react-i18next library along with Expo's localization module. You'll learn how to set up language files, detecting device language, and letting users switch languages dynamically.

If your app currently supports only one language, this tutorial helps you expand your audience by speaking their language. It’s practical for React Native developers using Expo who want to internationalize their apps with TypeScript support and local storage for user preferences.

What's inside

• Why supporting multiple languages matters
• Demo of language switching in a React Native app
• Installing and configuring react-i18next and expo-localization
• Organizing translation files with TypeScript types
• Initializing i18next with device language detection
• Using the useTranslation hook to get translated strings
• Handling user language selection and storing preferences
• Tips for managing translations and adding new languages with AI

Why supporting multiple languages matters

Most of the world does not speak English as their first language, so limiting your app to one language means missing out on potential users and revenue. Users engage more with apps that speak their native language. I emphasize the importance of multi-language support to increase reach and user satisfaction.

Demo of language switching in a React Native app

The demo uses Platano, a premium Expo template, to show how users can select their preferred language or rely on the device language. Changing the language updates all UI text instantly, including controls in different screens. The app supports English and Spanish, and switching languages works seamlessly without restarting.

Installing and configuring react-i18next and expo-localization

You install dependencies with:

• npx expo install expo-localization
• bun install react-i18next i18next

Expo-localization helps detect the device’s locale, while react-i18next manages translations. I show verifying that expo-localization is added as a plugin in app.json. Since Expo Go includes expo-localization, no extra prebuild steps are needed.

Organizing translation files with TypeScript types

Translations are stored in a folder named locales with one file per language, e.g., en.ts and es.ts. Each exports an object with nested keys for screens or common actions. I recommend exporting a TypeScript type for the translation object to get type safety when accessing keys.

Example structure:

const en = {
 home: {
 title: "hello world"
 }
};
export type Translations = typeof en;
export default en;

Spanish translations mirror the keys but with localized strings.

Initializing i18next with device language detection

I copies the official i18next TypeScript example and adapts it for React Native and Expo. It imports getLocales from expo-localization to detect the device language code. This code is used as the default language, falling back to English if detection fails.

Initialization includes:

• Passing supported languages and resources
• Setting fallback language
• Using initReactI18next plugin

This setup ensures the app uses the device language automatically on startup.

Using the useTranslation hook to get translated strings

Inside components, the useTranslation hook from react-i18next provides a t function to get translated strings by key. I show logging t("home.title") to verify translations load correctly.

Make sure to import and initialize i18next in your app entry point or layout file (for Expo Router) so translations are available globally.

Handling user language selection and storing preferences

For apps like Platano, users can override the device language via a picker. The selected language is saved using Expo SQLite storage (via expo-sqlite and @react-native-async-storage/async-storage or similar). On app start, the stored language is loaded and passed to i18next as the default.

To change language dynamically, call:

i18next.changeLanguage(selectedLanguage);

This updates the UI immediately without restarting.

Tips for managing translations and adding new languages with AI

I suggest creating a command or skill for AI tools like Claude to automate adding new languages. Since translation files share the same keys with different values, AI can easily generate new language files from existing ones.

This approach helps keep translations consistent and speeds up localization as your app grows.

Resources

CourseReact Native course

Master React Native fundamentals and ship production apps with TypeScript.

NewsletterWeekly newsletter

Stay updated with React Native tips, tutorials, and news from Beto.