Internationalization

Learn how to internationalize your mobile app.

TurboStarter mobile uses i18next and expo-localization for internationalization. This powerful combination allows you to leverage both i18next's mature translation framework and Expo's native device locale detection.

Why this combination?

While i18next handles the translation management, expo-localization provides seamless integration with the device's locale settings. This means your app can automatically detect and adapt to the user's preferred language, while still maintaining the flexibility to override it when needed.

The mobile app's internationalization is configured to work out of the box with:

  • Automatic device language detection
  • Right-to-left (RTL) layout support
  • Locale-aware date and number formatting
  • Fallback language handling

You can read more about the underlying technologies in their documentation:

i18next logo

Configuration

The global configuration is defined in the @turbostarter/i18n package and shared across all applications. You can read more about it in the web configuration documentation.

By default, the locale is automatically detected based on the user's device settings. You can override it and set the default locale of your mobile app in the app configuration file.

Translating app

To translate individual components and screens, you can use the useTranslation hook.

import { useTranslation } from "@turbostarter/i18n";
 
export default function MyComponent() {
  const { t } = useTranslation();
 
  return <Text>{t("hello")}</Text>;
}

It's a recommended way to translate your app.

Store presence

If you plan on shipping your app to different countries or regions or want it to support various languages, you can provide localized strings for things like the display name and system dialogs.

To do so, check the official Expo documentation as it requires modifying your app configuration (app.config.ts).

You can find the resources below helpful in this process:

Language switcher

TurboStarter ships with a language switcher component that allows you to switch between languages. You can import and use the LocaleSwitcher component and drop it anywhere in your application to allow users to change the language seamlessly.

import { LocaleSwitcher } from "@turbostarter/ui-mobile";
 
export default function MyComponent() {
  return <LocaleSwitcher />;
}

The component automatically displays all languages configured in your i18n settings. When a user switches languages, it will be reflected in the app and saved into persistent storage to keep the language across app restarts.

Best practices

Here are key best practices for managing translations in your mobile app:

  • Use clear, hierarchical translation keys for easy maintenance

    // ✅ Good
    "screen.home.welcome";
    "component.button.submit";
     
    // ❌ Bad
    "welcomeText";
  • Organize translations by app screens and features

    translations/
    ├── en/
    │   ├── layout.json
    │   └── common.json
    └── es/
        ├── layout.json
        └── common.json
  • Consider device language settings and regional formats

  • Cache translations locally for offline access

  • Handle dynamic content for mobile contexts:

    // Device-specific messages
    t("errors.noConnection"); // "Check your internet connection"
     
    // Dynamic values
    t("storage.space", { gb: 2.5 }); // "2.5 GB available"
  • Keep translations concise - mobile screens have limited space

  • Test translations with different screen sizes and orientations

Last updated on

On this page

Ship your startup everywhere. In minutes.