Detectar idioma automáticamente en React Native con @react-native-localize + i18next

Tiempo de lectura: 2 minutos

Vamos a aprender la forma más fiable para obtener el idioma del dispositivo y ademas utilizarlo junto con la libreria de idiomas i18next.

---

Instalar dependencias

npm install i18next react-i18next @react-native-localize

Si usas TypeScript, instala también los tipos:

npm install -D @types/react-i18next

---

Estructura recomendada

src/
│
├── i18n/
│   ├── index.ts       # Configuración principal
│   ├── translations/
│   │   ├── es.ts
│   │   └── en.ts
│
└── App.tsx

---

Crear los archivos de idioma (es.ts, en.ts)

src/i18n/translations/es.ts

export default {
  saludo: "Hola",
  bienvenido: "Bienvenido a la app",
};

src/i18n/translations/en.ts

export default {
  saludo: "Hello",
  bienvenido: "Welcome to the app",
};

---

Configurar i18next con detección automática

src/i18n/index.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as RNLocalize from "react-native-localize";

import es from "./translations/es";
import en from "./translations/en";

// Detectar el idioma del sistema
const locales = RNLocalize.getLocales();
const defaultLanguage = locales[0]?.languageCode || "en";

i18n
  .use(initReactI18next)
  .init({
    compatibilityJSON: "v3",
    lng: defaultLanguage,
    fallbackLng: "en",
    resources: {
      es: { translation: es },
      en: { translation: en },
    },
    interpolation: {
      escapeValue: false, // React ya hace esto
    },
  });

export default i18n;

---

Usar las traducciones en la app

src/App.tsx

import React from "react";
import { Text, View } from "react-native";
import "./i18n"; // Importante: inicializar antes de usar
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>{t("saludo")}</Text>
      <Text>{t("bienvenido")}</Text>
    </View>
  );
}

---

Resultado esperado

Si el idioma del sistema es español, verás:

Hola
Bienvenido a la app

Si es inglés:

Hello
Welcome to the app

---

Bonus: Detectar cambio de idioma del sistema en caliente

RNLocalize.addEventListener("change", () => {
  const locales = RNLocalize.getLocales();
  const newLang = locales[0]?.languageCode || "en";
  i18n.changeLanguage(newLang);
});

---

Alternativas útiles

• react-native-localize también te permite:
  • Obtener la zona horaria: RNLocalize.getTimeZone()
  • Saber si usa formato 24h: RNLocalize.uses24HourClock()
  • Obtener preferencias de calendario, moneda, etc

---