Añadir i18next para internacionalizar una APP React Native + Expo usando TypeScript

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos internacionalizar y añadir multi lenguaje a una APP en React Native y usando TypeScript.

Lo primero que haremos es instalar i18n:

npm install i18next react-i18next --save

Una vez instalado, creamos una carpeta llamada language y dentro creamos un archivo i18next.ts

// i18next.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { Platform, NativeModules } from 'react-native';
import en from './en.json';
import es from './es.json';

function idioma(): string {
  try {
    const deviceLanguage: string =
      Platform.OS === 'ios'
        ? NativeModules.SettingsManager.settings.AppleLocale ||
          NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
        : NativeModules.I18nManager.localeIdentifier;
    var deviceLanguageSplit: string = deviceLanguage.split("_")[0];
    return deviceLanguageSplit;
  } catch (error) {
    var idiomaDevuelve: string = "es"; //Idioma por defecto
    return idiomaDevuelve; //Por defecto en navegador
  }
}

i18n
  .use(initReactI18next)
  .init({
    lng: idioma(),
    fallbackLng: 'en',
    compatibilityJSON: 'v3',
    resources: {
      en: en,
      es: es
    },
    interpolation: {
      escapeValue: false // react already safes from xss
    },
    initImmediate: false, // Añade esta línea
  });


export default i18n;

Este archivo determinará automáticamente el idioma seleccionado en el dispositivo.

El idioma por defecto es inglés (en).

Si queremos admitr mas idiomas, los añadiremos en resources.

Ahora tenemos que crear los archivos de idioma que estamos importando.

en.json

{
    "translation": {
      "app_name": "My APP",
     }
}

Dentro de translation tenemos que añadir las claves que vamos a utilizar en nuestra APP.

es.json

{
    "translation": {
      "app_name": "Mi Aplicación",
     }
}

*Para que nos permita leer archivos JSON en los imports sin dar error dentro de i18next.ts tenemos que añadir lo siguiente dentro de tsconfig.json

"compilerOptions": {
...
    "resolveJsonModule": true,
...

Ahora tenemos que importar el archivo i18next.ts a nuestro punto de entrada (suele ser app.tsx)

import '@/language/i18n';

Con este import, ya incializará correctamente i18next.

Para utilizarlo tenemos que hacer lo siguiente:

• Importamos la variable t de useTranslation()

const HomeScreen = () => {
...
  const { t } = useTranslation();
...

Y la utilizamos de la siguiente forma:

      <Text style={styles.title}>{t("app_name")}</Text>