Localization

Installation

Usage

• Install the i18n package i18n-js

  yarn add i18n-js
  

• Configure the languages for your app.

  import * as Localization from 'expo-localization';
  import i18n from 'i18n-js';
  // Set the key-value pairs for the different languages you want to support.
  i18n.translations = {
    en: { welcome: 'Hello' },
    ja: { welcome: 'こんにちは' },
  };
  // Set the locale once at the beginning of your app.
  i18n.locale = Localization.locale;
  

API Design Tips

• You may want to refrain from localizing text for certain things, like names. In this case you can define them once in your default language and reuse them with i18n.fallbacks = true;.
• When a user changes the device's language, your app will reset. This means you can set the language once, and don't need to update any of your React components to account for the language changes.
• On iOS, you can add "CFBundleAllowMixedLocalizations": true to your ios.infoPlist property in your app.json so that your app supports the retrieval of localized strings from frameworks.
  • This will allow you to translate app metadata, including the homescreen display name! Read here for details.

Full Demo

import * as React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

// Set the key-value pairs for the different languages you want to support.
i18n.translations = {
  en: { welcome: 'Hello', name: 'Charlie' },
  ja: { welcome: 'こんにちは' },
};
// Set the locale once at the beginning of your app.
i18n.locale = Localization.locale;
// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;

export default App => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {i18n.t('welcome')} {i18n.t('name')}
      </Text>
    </View>
  );
};

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  text: {
    fontSize: 20,
  },
});

API

import * as Localization from 'expo-localization';

Behavior

Methods

// When the app returns from the background on Android...

const { locale } = await Localization.getLocalizationAsync();

Types