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.
npx languine@latest init --preset expo
languine.json
file:{ "locale": { "source": "en", "targets": ["es", "fr"] } }
The preset will:
Install required dependencies:
i18n-js
- For handling translationsexpo-localization
- For detecting device localeCreate the following directory 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
Configure your app.json
for localization support:
Import the i18n instance in your components:
import i18n from './locales/i18n'; function Welcome() { return <Text>{i18n.t('welcome')}</Text>; }
The preset creates two types of translation files:
Regular translations (locales/[lang].json
):
{ "welcome": "Welcome to my app", "hello": "Hello", "settings": "Settings" }
Native translations (locales/native/[lang].json
):
{ "CFBundleDisplayName": "My App", "NSContactsUsageDescription": "We need access to contacts..." }
locales/[source].json
)npx languine@latest translate
If you see missing translations, check that:
languine translate
after adding new keysi18n.locale
is set correctlyIf native translations aren't working:
app.json
configurationThe preset supports customization through the languine.json
file:
{ "locale": { "source": "en", "targets": ["es", "fr"] }, "files": { "json": { "include": [ "locales/native/[locale].json", "locales/[locale].json" ] } } }
For more advanced configuration options, refer to the Languine configuration documentation.