Expo Preset

Use-case guide: See the Expo translation workflow โ†’ for a step-by-step setup focused on shipping faster.

The Expo preset helps you set up internationalization (i18n) in your Expo project with minimal configuration. It integrates with Expo's localization system and sets up all necessary files and configurations for managing translations.

Prerequisites

  • โ—‡An Expo project
  • โ—‡Git initialized repository
  • โ—‡Node.js and npm/yarn/pnpm

Getting Started

  1. โ—‡Navigate to your Expo project root and run:
Terminal
npx @babely/cli@latest init --preset expo
  1. โ—‡Configure your source and target languages when prompted, or create a babely.json file:
babely.json
{
  "locale": {
    "source": "en",
    "targets": ["es", "fr"]
  }
}

What Gets Set Up

The preset will:

  1. โ—‡

    Install required dependencies:

    • โ—‡i18n-js - For handling translations
    • โ—‡expo-localization - For detecting device locale
  2. โ—‡

    Create the following directory structure:

    Structure
    locales/
โ”œโ”€โ”€ i18n.ts           # i18n configuration
โ”œโ”€โ”€ en.json           # Source language translations
โ”œโ”€โ”€ [lang].json       # Target language translations
โ”œโ”€โ”€ native/          # App metadata translations
โ”‚   โ”œโ”€โ”€ en.json
โ”‚   โ””โ”€โ”€ [lang].json
โ””โ”€โ”€ README.md        # Usage instructions
  3. โ—‡

    Configure your app.json for localization support:

    • โ—‡Enables mixed localizations for iOS
    • โ—‡Adds expo-localization plugin
    • โ—‡Sets up native localization paths

Usage

Basic Translation

Import the i18n instance in your components:

src/components/MyComponent.tsx
import i18n from './locales/i18n';

function Welcome() {
  return <Text>{i18n.t('welcome')}</Text>;
}

Translation Files

The preset creates two types of translation files:

  1. โ—‡

    Regular translations (locales/[lang].json):

    locales/[lang].json
    {
  "welcome": "Welcome to my app",
  "hello": "Hello",
  "settings": "Settings"
}
  2. โ—‡

    Native translations (locales/native/[lang].json):

    locales/native/[lang].json
    {
  "CFBundleDisplayName": "My App",
  "NSContactsUsageDescription": "We need access to contacts..."
}

Managing Translations

  1. โ—‡Add new translation keys to your source language file (locales/[source].json)
  2. โ—‡Run the translation command:
    Terminal
    npx @babely/cli@latest translate

Best Practices

  1. โ—‡Always use translation keys in your code instead of hardcoded strings
  2. โ—‡Keep translation keys organized and descriptive
  3. โ—‡Use the native translations for app store metadata and system permissions
  4. โ—‡Commit translation files to version control

Troubleshooting

  • โ—‡

    If you see missing translations, check that:

    • โ—‡The translation key exists in the source language file
    • โ—‡You've run babely translate after adding new keys
    • โ—‡The i18n.locale is set correctly
  • โ—‡

    If native translations aren't working:

    • โ—‡Verify your app.json configuration
    • โ—‡Rebuild your app after making changes to native translation files

Additional Configuration

The preset supports customization through the babely.json file:

babely.json
{
  "locale": {
    "source": "en",
    "targets": ["es", "fr"]
  },
  "files": {
    "json": {
      "include": [
        "locales/native/[locale].json",
        "locales/[locale].json"
      ]
    }
  }
}

For more advanced configuration options, refer to the Babely configuration documentation.

๋ฒ„์…€JSON