Language Packs in Expo with expo-localization and i18next

import React from "react";
import { View, Text, Button } from "react-native";
import { initReactI18next, useTranslation } from "react-i18next";
import { getLocales } from "expo-localization";
import i18n from "i18next";
 
const resources = {
  en: {
    translation: {
      welcome: "Welcome to the app!",
    },
  },
  ko: {
    translation: {
      welcome: "앱에 오신 것을 환영합니다!",
    },
  },
  ar: {
    translation: {
      welcome: "مرحبًا بك في التطبيق!",
    },
  },
};
 
i18n.use(initReactI18next).init({
  resources,
  lng: getLocales()[0].languageCode || "ko",
	fallbackLng: {
		"en-*": ["en"],
		"ko-*": ["ko"],
		"ar-*": ["ar"],
		default: ["en"],
	},
  interpolation: {
    escapeValue: false,
  },
  react: {
    useSuspense: false,
  },
});
 
const App = () => {
  const { t, i18n } = useTranslation();
 
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        gap: 20,
      }}
    >
      <Text>{t("welcome")}</Text>
      <Button title="English" onPress={() => i18n.changeLanguage("en")} />
      <Button title="Korean" onPress={() => i18n.changeLanguage("ko")} />
      <Button title="Arabic" onPress={() => i18n.changeLanguage("ar")} />
    </View>
  );
};
 
export default App;

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as Localization from "expo-localization";
import AsyncStorage from "@react-native-async-storage/async-storage";
import translationEn from "./locales/en-US/translations.json";
import translationKo from "./locales/ko-KR/translations.json";
import translationAr from "./locales/ar-SA/translations.json";
 
const resources = {
  en: { translation: translationEn },
  ko: { translation: translationKo },
  ar: { translation: translationAr },
};
 
const LANGUAGE_KEY = "@app_language";
 
const initI18n = async () => {
  try {
    const savedLanguage = await AsyncStorage.getItem(LANGUAGE_KEY);
    let selectedLanguage = savedLanguage;
 
    if (!selectedLanguage) {
      const deviceLocales = Localization.getLocales();
      const deviceLocale = deviceLocales[0]?.languageTag || "en-US";
      const languageCode = deviceLocale.split("-")[0];
 
      if (languageCode in resources) {
        selectedLanguage = languageCode;
      } else {
        selectedLanguage = "en";
      }
    }
 
    await i18n.use(initReactI18next).init({
      resources,
      lng: selectedLanguage,
      fallbackLng: {
        "en-*": ["en"],
        "ko-*": ["ko"],
        "ar-*": ["ar"],
        default: ["en"],
      },
      interpolation: {
        escapeValue: false,
      },
      react: {
        useSuspense: false,
      },
    });
 
    if (!savedLanguage) {
      await AsyncStorage.setItem(LANGUAGE_KEY, selectedLanguage);
    }
  } catch (error) {
    await i18n.use(initReactI18next).init({
      resources,
      lng: "en",
      fallbackLng: "en",
      interpolation: {
        escapeValue: false,
      },
      react: {
        useSuspense: false,
      },
    });
  }
};
 
initI18n();
 
export default i18n;

import React from "react";
import "@/src/i18n";
import { View, Text, Button } from "react-native";
import { useTranslation } from "react-i18next";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const App = () => {
  const { t, i18n } = useTranslation();
 
  const changeLanguage = async (language: "en" | "ko" | "ar") => {
    i18n.changeLanguage(language);
    await AsyncStorage.setItem("@app_language", language);
  };
 
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        gap: 20,
      }}
    >
      <Text>{t("welcome")}</Text>
      <Button title="English" onPress={() => changeLanguage("en")} />
      <Button title="Korean" onPress={() => changeLanguage("ko")} />
      <Button title="Arabic" onPress={() => changeLanguage("ar")} />
    </View>
  );
};
 
export default App;