React Native & Expo

Integrate i1n with React Native and Expo using the i1n SDK or Bridge Mode with i18n-js.

Setup

Run i1n init in your React Native project. The CLI auto-detects expo-localization if present and configures JSON format in the locales/ directory.

You can use the i1n SDK in standalone mode or connect it to i18n-js via Bridge Mode.

Standalone Mode

Use the i1n SDK directly with expo-localization for device locale detection. Initialize with init(), load your resources, and use t() in your components.

The React provider pattern works identically to React web projects. Use the useI1n() hook for type-safe translations and runtime locale switching.

Bridge Mode with i18n-js

If your project uses i18n-js, connect it with: registerI1n((key, params) => i18n.t(key, params)). The i1n t() function delegates to i18n-js while providing strict type checking and autocomplete.

i1n manages the translation files and type generation. i18n-js continues to handle runtime pluralization and interpolation. Works with both Expo managed and bare React Native workflows.

Deployment

Run i1n pull before building your app. Translations are bundled with the application binary.

For over-the-air translation updates, combine i1n pull with your OTA update strategy (e.g., Expo Updates or CodePush).

App.tsx

import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
i18n.locale = Localization.locale

<Text>{i18n.t('welcome')}</Text>

Bridge Mode — src/i18n.ts

import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'

const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))

Dashboard

Guide to the i1n web dashboard: account creation, organizations, API keys, translation editing, and team management.

Bridge Mode

Keep your existing i18n library while adding i1n's type-safe autocomplete, AI translation, and file management.