import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

~~~

i18n.translations = {
  en: { welcome: 'Hello' },
  ja: { welcome: 'こんにちは' },
};
i18n.locale = Localization.locale;

~~~

      <Text style={styles.text}>
        {i18n.t('welcome')}
      </Text>

i18n に対して言語ごとのテキスト情報を定義した上で、使用する言語の種類を設定します。使用する言語については、端末に設定されている言語を expo-localization にて取得して反映します。

使用言語の設定はアプリの中で 1度だけ行えばいいので、それぞれの画面で用意するよりも共通化して置けると便利です。テキストの用意もまとめて書いておくと、追加・変更などの運用時も快適になります。

確認の際は、シミュレータなどで設定から端末の言語設定を変更することで確認ができます。

テキストの用意

i18nを共通化すると以下のようにできます。これを必要な画面で import して利用します。

import { locale } from "expo-localization";
import i18n from "i18n-js";

import { translations } from "./translations";

// Set the key-value pairs for the different languages you want to support.
i18n.translations = translations;

// Set the locale once at the beginning of your app.
i18n.locale = locale;

// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;

export { i18n };

テキストを別ファイル translations として用意すると以下のようになります。ついでにテキストの型定義を用意しておくと、定義漏れを発見できるのでおすすめです。

type TextDefinition = {
  drawer: {
    policy: string;
    reviewRequest: string;
    licenses: string;
  };
  placeholder: string;
};

type Translations = {
  en: TextDefinition;
  ja: TextDefinition;
};

export const translations: Translations = {
  en: {
    drawer: {
      policy: "privacy policy",
      reviewRequest: "Please cooperate with the review",
      licenses: "licenses",
    },
    placeholder:
      "Enter it and tap the button below to enlarge it on the screen.",
  },
  ja: {
    drawer: {
      policy: "プライバシーポリシー",
      reviewRequest: "レビューにご協力ください",
      licenses: "ライセンス",
    },
    placeholder: "入力して下のボタンをタップすると、画面に大きく表示できます。",
  },
};