React Native (Expo) - Lingo.dev CLI

What is Expo?

Expo is a framework and platform for creating React Native applications. It provides tools and services to build, deploy, and iterate on iOS, Android, and web apps from the same JavaScript codebase.

What is Lingo.dev CLI?

Lingo.dev is an AI-powered translation platform. The Lingo.dev CLI reads source files, sends translatable content to large language models, and writes translated files back to your project.

About this guide

This guide explains how to set up Lingo.dev CLI in a React Native project using Expo. You'll learn how to scaffold a project with Expo, configure a translation pipeline, and view the results.

Step 1. Set up an Expo project

Create a new Expo app:
```
npx create-expo-app@latest my-app
```
Navigate into the project directory:
```
cd my-app
```

Install the localization dependencies:

npx expo install expo-localization
npx expo install i18n-js

Step 2. Create source content

Create a directory for storing localizable content:
```
mkdir -p app/i18n
```

Create a file that contains some localizable content (e.g., app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

Step 3. Configure the CLI

In the root of the project, create an i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

This file defines:

the files that Lingo.dev CLI should translate
the languages to translate between

In this case, the configuration translates JSON files from English to Spanish.

It's important to note that:

[locale] is a placeholder that's replaced at runtime. It ensures that content is read from one location (e.g., app/i18n/en.json) and written to a different location (e.g., app/i18n/es.json).
Lingo.dev CLI supports various file formats including JSON, MDX, and more.

To learn more, see i18n.json configuration.

Step 4. Translate the content

Sign up for a Lingo.dev account.
Log in to Lingo.dev via the CLI:
```
npx lingo.dev@latest login
```
Run the translation pipeline:
```
npx lingo.dev@latest run
```
The CLI will create an app/i18n/es.json file for storing the translated content and an i18n.lock file for keeping track of what has been translated (to prevent unnecessary retranslations).

Step 5. Use the translations

In the tsconfig.json file, enable JSON imports:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Create a function that loads the translated content for a specific locale:

// app/lib/i18n.ts
import { getLocales } from "expo-localization";
import { I18n } from "i18n-js";

import en from "../i18n/en.json";
import es from "../i18n/es.json";

const i18n = new I18n({ en, es });

i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = getLocales()[0]?.languageCode ?? "en";

export default i18n;

Use the function to display the translated content:

// App.tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import i18n from "./app/lib/i18n";

export default function App() {
  const [locale, setLocale] = useState(i18n.locale);

  const toggleLocale = () => {
    const next = locale === "en" ? "es" : "en";
    i18n.locale = next;
    setLocale(next);
  };

  return (
    <View>
      <Text>{i18n.t("home.title")}</Text>
      <Text>{i18n.t("home.subtitle")}</Text>

      <Pressable onPress={toggleLocale}>
        <Text>
          {locale === "en" ? "Switch to Español" : "Cambiar a English"}
        </Text>
      </Pressable>
    </View>
  );
}

Start the development server:
```
npx expo start
```
Navigate to http://localhost:8081.
Toggle between the available languages.