Sistema de traducciones con react-native-localize y i18n-js

14/05/2023
|Por Yoné Rocha

1. Instalar las dependencias necesarias.

Shell
1
2
3
npm install react-native-localize
npm install i18n-js
cd ios && pod install && cd ..  # Si devuelve un error compilando en iOS después de instalar Pods https://yonedev.com/snippet/primeros-pasos-react-native/#errorPodsXcode

2. A continuación, procede a generar un archivo donde se llevará a cabo la configuración inicial de i18n-js.. En mi caso, src/i18n/index.js.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import * as RNLocalize from 'react-native-localize';
import {I18n} from 'i18n-js';
 
import en from './locales/en';
import es from './locales/es';
import de from './locales/de';
 
const locales = RNLocalize.getLocales();
 
const i18n = new I18n({
  en,
  es,
  de,
});
 
i18n.enableFallback = true;
 
i18n.locale = Array.isArray(locales)
  ? locales[0].languageTag
  : 'en';
 
export default i18n;

2. En la carpeta src/i18n/locales/, se deben crear archivos JS correspondientes a cada idioma, como por ejemplo en.js, es.js y de.js. Utilizaré el archivo es.js como ejemplo.

JavaScript
1
2
3
export default {
  hi: "hola"
};

3. Cómo usar las traducciones en un componente.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from "react";
import I18n from "./I18n";
class Example extends Component {
  render() {
    return (
      <View>
        <Text>{I18n.t("hi")}</Text>
      </View>
    );
  }
}
export default Example;

4. Creamos una función para recuperar el idioma actual.

JavaScript
1
2
3
4
5
getLocale() {
  const [languageCode] = I18n.locale.split('-');
  return languageCode || 'en';
}
export default Example;

Si hemos estado utilizando previamente react-native-i18n, que actualmente está obsoleto, es necesario desinstalarlo de nuestro proyecto React Native de la siguiente manera:

En las versiones más recientes de React Native, el comando “unlink” ya no está disponible y se ha optado por el enlace automático.

Shell
1
2
npm uninstall react-native-i18n
cd ios && pod install && cd ..

Fuentes: npmjs i18n-js , react-native-localize

JavaScript macOS Node.js React Native Xcode