i18next / react-i18next

Q: i18next vs react-intl vs lingui?

Todos funcionam no RN. i18next tem a maior comunidade RN, namespaces JSON simples e carregamento sob demanda. Escolha uma biblioteca por aplicativo - não misture formatadores.

Q: Como extraio chaves para tradutores?

Use i18next-parser no CI - Translation CI. Arquivos em inglês são geralmente a localidade de origem enviada para Crowdin/Lokalise.

Q: O i18next funciona com cabeçalhos do Expo Router?

Sim - useTranslation em componentes de tela; para opções Stack.Screen use um layout filho ou navigation.setOptions em useEffect.

Q: E quanto ao fallback quando o pacote japonês falha ao carregar?

Configure fallbackLng: "en" e partialBundledLanguages: true. Veja Locale Fallbacks & Pseudolocale.

Namespaces, plurais e pacotes de idioma carregados sob demanda. i18next é o motor de tradução de facto para React Native; react-i18next o conecta a hooks e carregamento compatível com suspense. Use-o quando os catálogos excederem ~100 chaves ou quando precisar de regras de plural adequadas e fluxos de trabalho de tradutor.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npx expo install expo-localization
npm install i18next react-i18next

// src/i18n/i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { mapDeviceToAppLocale } from "./mapDeviceToApp";
import enCommon from "./locales/en/common.json";
import esCommon from "./locales/es/common.json";
 
void i18n.use(initReactI18next).init({
  resources: {
    en: { common: enCommon },
    es: { common: esCommon },
  },
  lng: mapDeviceToAppLocale(),
  fallbackLng: "en",
  defaultNS: "common",
  ns: ["common"],
  interpolation: { escapeValue: false },
  react: { useSuspense: false },
  compatibilityJSON: "v4",
});
 
export default i18n;

// app/_layout.tsx (excerto)
import "@/i18n/i18n";
import { I18nextProvider } from "react-i18next";
import i18n from "@/i18n/i18n";
 
export default function RootLayout() {
  return (
    <I18nextProvider i18n={i18n}>
      <Stack />
    </I18nextProvider>
  );
}

import { useTranslation } from "react-i18next";
 
export function SaveButton() {
  const { t } = useTranslation("common");
  return <Button title={t("actions.save")} />;
}

Quando usar isso:

Mais de uma localidade com variantes de plural, gênero ou contexto
Equipes de funcionalidade possuem arquivos de cópia separados (namespaces)
Você deseja pacotes de idioma sob demanda - envie en no pacote principal, baixe ja sob demanda
Tradutores exportam/importam via TMS com chave por namespace - veja Translation CI
Você evoluiu do t() mínimo em i18n Basics

Exemplo de Trabalho

1. Layout de Namespace

src/i18n/locales/
  en/
    common.json
    auth.json
    billing.json
  es/
    common.json
    auth.json
    billing.json

// en/auth.json
{
  "sign_in": "Sign in",
  "sign_out": "Sign out",
  "errors": {
    "invalid_email": "Enter a valid email address"
  }
}

// src/features/auth/SignInScreen.tsx
import { useTranslation } from "react-i18next";
 
export function SignInScreen() {
  const { t } = useTranslation("auth");
  return <Text>{t("sign_in")}</Text>;
}

useTranslation("auth") carrega apenas o namespace auth para essa tela
Pré-carregar múltiplos namespaces: useTranslation(["auth", "common"])
Mantenha chrome compartilhado (actions.save) em common - cópia específica da funcionalidade em namespaces de funcionalidade

2. Registrar Múltiplos Namespaces na Inicialização

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enCommon from "./locales/en/common.json";
import enAuth from "./locales/en/auth.json";
import esCommon from "./locales/es/common.json";
import esAuth from "./locales/es/auth.json";
 
void i18n.use(initReactI18next).init({
  resources: {
    en: { common: enCommon, auth: enAuth },
    es: { common: esCommon, auth: esAuth },
  },
  lng: "en",
  fallbackLng: "en",
  defaultNS: "common",
  ns: ["common", "auth"],
  interpolation: { escapeValue: false },
  react: { useSuspense: false },
  compatibilityJSON: "v4",
});

O array ns declara namespaces conhecidos - loadNamespaces pode adicionar mais em tempo de execução
defaultNS evita repetir "common" em cada chamada t("save")
compatibilityJSON: "v4" - necessário para regras de plural no i18next moderno

3. Chaves de Plural

// en/billing.json
{
  "invoice_count_one": "{{count}} invoice",
  "invoice_count_other": "{{count}} invoices"
}

const { t } = useTranslation("billing");
<Text>{t("invoice_count", { count: items.length })}</Text>

O i18next resolve _one / _other (e _zero quando necessário) a partir da opção count.

// ar/billing.json - O árabe tem regras de plural complexas; o i18next lida com formas
{
  "invoice_count_zero": "لا توجد فواتير",
  "invoice_count_one": "فاتورة واحدة",
  "invoice_count_two": "فاتورتان",
  "invoice_count_few": "{{count}} فواتير",
  "invoice_count_many": "{{count}} فاتورة",
  "invoice_count_other": "{{count}} فاتورة"
}

Nunca use ramificação em JSX (count === 1 ? ... : ...) para plurais traduzíveis
Verifique as formas plurais com falantes nativos - Translation CI pode verificar os sufixos necessários
O formato ICU está disponível via i18next-icu quando o TMS exporta strings ICU

4. Variantes de Contexto

{
  "status": "Open",
  "status_male": "Open",
  "status_female": "Open",
  "friend": "Friend",
  "friend_male": "Friend",
  "friend_female": "Friend"
}

t("friend", { context: "female" }); // resolve friend_female quando presente

Use contexto para idiomas com gênero e desambiguação - mais limpo do que árvores de chaves separadas
Prefira chaves explícitas (close_dialog) quando o contexto for incerto para os tradutores - i18n Basics

5. Pacotes de Idioma Sob Demanda

Mantenha o inglês no pacote principal; importe dinamicamente outros idiomas quando o usuário mudar de idioma ou na primeira necessidade.

// src/i18n/loadLanguage.ts
import i18n from "./i18n";
 
const loaders: Record<string, () => Promise<{ default: Record<string, unknown> }>> = {
  es: () => import("./locales/es/common.json"),
  ja: () => import("./locales/ja/common.json"),
  ar: () => import("./locales/ar/common.json"),
};
 
export async function ensureLanguage(lang: string) {
  if (i18n.hasResourceBundle(lang, "common")) return;
  const load = loaders[lang];
  if (!load) return;
  const bundle = await load();
  i18n.addResourceBundle(lang, "common", bundle.default, true, true);
}
 
export async function changeAppLanguage(lang: string) {
  await ensureLanguage(lang);
  await i18n.changeLanguage(lang);
}

// LanguagePicker com carregamento sob demanda
import { changeAppLanguage } from "@/i18n/loadLanguage";
 
<Pressable onPress={() => void changeAppLanguage("ja")}>
  <Text>日本語</Text>
</Pressable>

addResourceBundle mescla sem substituir chaves existentes quando o último argumento é true
Mostre um estado de carregamento durante a importação - pacotes de idioma podem ter de 50 a 200 KB cada
Pré-carregue o idioma provável em Wi-Fi após o onboarding - tarefa opcional InteractionManager

6. Namespaces Sob Demanda por Tela

import i18n from "@/i18n/i18n";
 
export async function preloadNamespaces(lang: string, namespaces: string[]) {
  await Promise.all(
    namespaces.map(async (ns) => {
      if (i18n.hasResourceBundle(lang, ns)) return;
      const mod = await import(`./locales/${lang}/${ns}.json`);
      i18n.addResourceBundle(lang, ns, mod.default, true, true);
    }),
  );
}

// src/features/billing/BillingScreen.tsx
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { preloadNamespaces } from "@/i18n/loadNamespaces";
 
export function BillingScreen() {
  const { i18n, t } = useTranslation("billing");
  const [ready, setReady] = useState(i18n.hasResourceBundle(i18n.language, "billing"));
 
  useEffect(() => {
    void preloadNamespaces(i18n.language, ["billing"]).then(() => setReady(true));
  }, [i18n.language]);
 
  if (!ready) return <ActivityIndicator />;
  return <Text>{t("title")}</Text>;
}

Divida os namespaces de faturamento, configurações e onboarding para divisão de código
Telas do Expo Router podem pré-carregar em useFocusEffect antes da renderização
Namespace ausente mostra a string da chave - falhe no CI em vez disso - Translation CI

7. Persistir a Escolha de Idioma do Usuário

import AsyncStorage from "@react-native-async-storage/async-storage";
import i18n from "./i18n";
import { changeAppLanguage } from "./loadLanguage";
import { mapDeviceToAppLocale } from "./mapDeviceToApp";
 
const KEY = "user:locale:v1";
 
export async function initI18n() {
  const saved = await AsyncStorage.getItem(KEY);
  const lang = saved ?? mapDeviceToAppLocale();
  await changeAppLanguage(lang);
  await i18n.changeLanguage(lang);
}
 
export async function setAppLanguage(lang: string) {
  await changeAppLanguage(lang);
  await i18n.changeLanguage(lang);
  await AsyncStorage.setItem(KEY, lang);
}

// app/_layout.tsx
const [ready, setReady] = useState(false);
useEffect(() => {
  void initI18n().then(() => setReady(true));
}, []);
if (!ready) return null;

Chame initI18n antes de renderizar a navegação localizada - mesmo portão de inicialização que i18n Basics
O idioma do dispositivo de expo-localization é o padrão quando não há salvamento

8. Chaves com Tipagem Segura

// src/i18n/i18next.d.ts
import "i18next";
import type common from "./locales/en/common.json";
import type auth from "./locales/en/auth.json";
 
declare module "i18next" {
  interface CustomTypeOptions {
    defaultNS: "common";
    resources: {
      common: typeof common;
      auth: typeof auth;
    };
  }
}

const { t } = useTranslation("common");
t("actions.save"); // autocompletar + erros de digitação

Gere ou verifique tipos no Translation CI quando a origem em inglês mudar
JSON em inglês é a fonte da verdade para as formas das chaves

9. Mudança de Idioma RTL

import { I18nManager } from "react-native";
import * as Updates from "expo-updates";
import { setAppLanguage } from "./persistLanguage";
 
export async function setAppLanguageWithRtl(lang: string) {
  const isRtl = lang === "ar" || lang === "he";
  if (I18nManager.isRTL !== isRtl) {
    I18nManager.allowRTL(isRtl);
    I18nManager.forceRTL(isRtl);
    await setAppLanguage(lang);
    await Updates.reloadAsync();
    return;
  }
  await setAppLanguage(lang);
}

RTL requer recarregamento nativo - veja RTL Layouts
expo-updates reloadAsync funciona no cliente de desenvolvimento e em atualizações de produção

10. Testando Com react-i18next

// __tests__/SignInScreen.test.tsx
import { render, screen } from "@testing-library/react-native";
import i18n from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import { SignInScreen } from "../SignInScreen";
import enAuth from "@/i18n/locales/en/auth.json";
 
beforeAll(async () => {
  await i18n.use(initReactI18next).init({
    lng: "en",
    resources: { en: { auth: enAuth } },
    interpolation: { escapeValue: false },
  });
});
 
test("renders sign in label", () => {
  render(
    <I18nextProvider i18n={i18n}>
      <SignInScreen />
    </I18nextProvider>,
  );
  expect(screen.getByText("Sign in")).toBeOnTheScreen();
});

Use testID no Detox para E2E cross-locale - Detox E2E
Simule changeLanguage em testes unitários - testes de integração carregam pacotes JSON reais

Armadilhas

escapeValue: true (padrão) - Quebra apóstrofos em Text do RN. Correção: escapeValue: false - React faz o escape.
useSuspense: true no RN - Limites de suspense são estranhos sem streaming do React 19. Correção: useSuspense: false até adicionar fallbacks explícitos.
Importação antecipada de todos os idiomas - Incha a inicialização. Correção: import() sob demanda por idioma em changeAppLanguage.
Namespace translation único para sempre - Conflitos de mesclagem e sincronização lenta de TMS. Correção: Namespaces de funcionalidade desde o início.
Chamadas t() concatenadas - Inválido em idiomas com gênero. Correção: Uma chave por frase com interpolação.

FAQs

i18next vs react-intl vs lingui?

Todos funcionam no RN. i18next tem a maior comunidade RN, namespaces JSON simples e carregamento sob demanda. Escolha uma biblioteca por aplicativo - não misture formatadores.

Como extraio chaves para tradutores?

Use i18next-parser no CI - Translation CI. Arquivos em inglês são geralmente a localidade de origem enviada para Crowdin/Lokalise.

O i18next funciona com cabeçalhos do Expo Router?

Sim - useTranslation em componentes de tela; para opções Stack.Screen use um layout filho ou navigation.setOptions em useEffect.

E quanto ao fallback quando o pacote japonês falha ao carregar?

Configure fallbackLng: "en" e partialBundledLanguages: true. Veja Locale Fallbacks & Pseudolocale.

Relacionados

i18n Basics - externalização e portão de inicialização
expo-localization - idioma padrão do dispositivo
RTL Layouts - inversão de direção na mudança de idioma
Locale Fallbacks & Pseudolocale - cadeias de fallback
Translation CI - extrair e verificar chaves
../design-systems/theming-and-brand-flavors/theming-and-brand-flavors.md - pacotes de cópia por marca
i18n Best Practices - resumo da seção

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npx expo install expo-localization
npm install i18next react-i18next

// src/i18n/i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import { mapDeviceToAppLocale } from "./mapDeviceToApp";
import enCommon from "./locales/en/common.json";
import esCommon from "./locales/es/common.json";
 
void i18n.use(initReactI18next).init({
  resources: {
    en: { common: enCommon },
    es: { common: esCommon },
  },
  lng: mapDeviceToAppLocale(),
  fallbackLng: "en",
  defaultNS: "common",
  ns: ["common"],
  interpolation: { escapeValue: false },
  react: { useSuspense: false },
  compatibilityJSON: "v4",
});
 
export default i18n;

// app/_layout.tsx (excerto)
import "@/i18n/i18n";
import { I18nextProvider } from "react-i18next";
import i18n from "@/i18n/i18n";
 
export default function RootLayout() {
  return (
    <I18nextProvider i18n={i18n}>
      <Stack />
    </I18nextProvider>
  );
}

import { useTranslation } from "react-i18next";
 
export function SaveButton() {
  const { t } = useTranslation("common");
  return <Button title={t("actions.save")} />;
}

Quando usar isso:

Mais de uma localidade com variantes de plural, gênero ou contexto
Equipes de funcionalidade possuem arquivos de cópia separados (namespaces)
Você deseja pacotes de idioma sob demanda - envie en no pacote principal, baixe ja sob demanda
Tradutores exportam/importam via TMS com chave por namespace - veja Translation CI
Você evoluiu do t() mínimo em i18n Basics

Exemplo de Trabalho

1. Layout de Namespace

src/i18n/locales/
  en/
    common.json
    auth.json
    billing.json
  es/
    common.json
    auth.json
    billing.json

// en/auth.json
{
  "sign_in": "Sign in",
  "sign_out": "Sign out",
  "errors": {
    "invalid_email": "Enter a valid email address"
  }
}

// src/features/auth/SignInScreen.tsx
import { useTranslation } from "react-i18next";
 
export function SignInScreen() {
  const { t } = useTranslation("auth");
  return <Text>{t("sign_in")}</Text>;
}

useTranslation("auth") carrega apenas o namespace auth para essa tela
Pré-carregar múltiplos namespaces: useTranslation(["auth", "common"])
Mantenha chrome compartilhado (actions.save) em common - cópia específica da funcionalidade em namespaces de funcionalidade

2. Registrar Múltiplos Namespaces na Inicialização

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enCommon from "./locales/en/common.json";
import enAuth from "./locales/en/auth.json";
import esCommon from "./locales/es/common.json";
import esAuth from "./locales/es/auth.json";
 
void i18n.use(initReactI18next).init({
  resources: {
    en: { common: enCommon, auth: enAuth },
    es: { common: esCommon, auth: esAuth },
  },
  lng: "en",
  fallbackLng: "en",
  defaultNS: "common",
  ns: ["common", "auth"],
  interpolation: { escapeValue: false },
  react: { useSuspense: false },
  compatibilityJSON: "v4",
});

O array ns declara namespaces conhecidos - loadNamespaces pode adicionar mais em tempo de execução
defaultNS evita repetir "common" em cada chamada t("save")
compatibilityJSON: "v4" - necessário para regras de plural no i18next moderno

3. Chaves de Plural

// en/billing.json
{
  "invoice_count_one": "{{count}} invoice",
  "invoice_count_other": "{{count}} invoices"
}

const { t } = useTranslation("billing");
<Text>{t("invoice_count", { count: items.length })}</Text>

O i18next resolve _one / _other (e _zero quando necessário) a partir da opção count.

// ar/billing.json - O árabe tem regras de plural complexas; o i18next lida com formas
{
  "invoice_count_zero": "لا توجد فواتير",
  "invoice_count_one": "فاتورة واحدة",
  "invoice_count_two": "فاتورتان",
  "invoice_count_few": "{{count}} فواتير",
  "invoice_count_many": "{{count}} فاتورة",
  "invoice_count_other": "{{count}} فاتورة"
}

Nunca use ramificação em JSX (count === 1 ? ... : ...) para plurais traduzíveis
Verifique as formas plurais com falantes nativos - Translation CI pode verificar os sufixos necessários
O formato ICU está disponível via i18next-icu quando o TMS exporta strings ICU

4. Variantes de Contexto

{
  "status": "Open",
  "status_male": "Open",
  "status_female": "Open",
  "friend": "Friend",
  "friend_male": "Friend",
  "friend_female": "Friend"
}

t("friend", { context: "female" }); // resolve friend_female quando presente

Use contexto para idiomas com gênero e desambiguação - mais limpo do que árvores de chaves separadas
Prefira chaves explícitas (close_dialog) quando o contexto for incerto para os tradutores - i18n Basics

5. Pacotes de Idioma Sob Demanda

Mantenha o inglês no pacote principal; importe dinamicamente outros idiomas quando o usuário mudar de idioma ou na primeira necessidade.

// src/i18n/loadLanguage.ts
import i18n from "./i18n";
 
const loaders: Record<string, () => Promise<{ default: Record<string, unknown> }>> = {
  es: () => import("./locales/es/common.json"),
  ja: () => import("./locales/ja/common.json"),
  ar: () => import("./locales/ar/common.json"),
};
 
export async function ensureLanguage(lang: string) {
  if (i18n.hasResourceBundle(lang, "common")) return;
  const load = loaders[lang];
  if (!load) return;
  const bundle = await load();
  i18n.addResourceBundle(lang, "common", bundle.default, true, true);
}
 
export async function changeAppLanguage(lang: string) {
  await ensureLanguage(lang);
  await i18n.changeLanguage(lang);
}

// LanguagePicker com carregamento sob demanda
import { changeAppLanguage } from "@/i18n/loadLanguage";
 
<Pressable onPress={() => void changeAppLanguage("ja")}>
  <Text>日本語</Text>
</Pressable>

addResourceBundle mescla sem substituir chaves existentes quando o último argumento é true
Mostre um estado de carregamento durante a importação - pacotes de idioma podem ter de 50 a 200 KB cada
Pré-carregue o idioma provável em Wi-Fi após o onboarding - tarefa opcional InteractionManager

6. Namespaces Sob Demanda por Tela

import i18n from "@/i18n/i18n";
 
export async function preloadNamespaces(lang: string, namespaces: string[]) {
  await Promise.all(
    namespaces.map(async (ns) => {
      if (i18n.hasResourceBundle(lang, ns)) return;
      const mod = await import(`./locales/${lang}/${ns}.json`);
      i18n.addResourceBundle(lang, ns, mod.default, true, true);
    }),
  );
}

// src/features/billing/BillingScreen.tsx
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { preloadNamespaces } from "@/i18n/loadNamespaces";
 
export function BillingScreen() {
  const { i18n, t } = useTranslation("billing");
  const [ready, setReady] = useState(i18n.hasResourceBundle(i18n.language, "billing"));
 
  useEffect(() => {
    void preloadNamespaces(i18n.language, ["billing"]).then(() => setReady(true));
  }, [i18n.language]);
 
  if (!ready) return <ActivityIndicator />;
  return <Text>{t("title")}</Text>;
}

Divida os namespaces de faturamento, configurações e onboarding para divisão de código
Telas do Expo Router podem pré-carregar em useFocusEffect antes da renderização
Namespace ausente mostra a string da chave - falhe no CI em vez disso - Translation CI

7. Persistir a Escolha de Idioma do Usuário

import AsyncStorage from "@react-native-async-storage/async-storage";
import i18n from "./i18n";
import { changeAppLanguage } from "./loadLanguage";
import { mapDeviceToAppLocale } from "./mapDeviceToApp";
 
const KEY = "user:locale:v1";
 
export async function initI18n() {
  const saved = await AsyncStorage.getItem(KEY);
  const lang = saved ?? mapDeviceToAppLocale();
  await changeAppLanguage(lang);
  await i18n.changeLanguage(lang);
}
 
export async function setAppLanguage(lang: string) {
  await changeAppLanguage(lang);
  await i18n.changeLanguage(lang);
  await AsyncStorage.setItem(KEY, lang);
}

// app/_layout.tsx
const [ready, setReady] = useState(false);
useEffect(() => {
  void initI18n().then(() => setReady(true));
}, []);
if (!ready) return null;

Chame initI18n antes de renderizar a navegação localizada - mesmo portão de inicialização que i18n Basics
O idioma do dispositivo de expo-localization é o padrão quando não há salvamento

8. Chaves com Tipagem Segura

// src/i18n/i18next.d.ts
import "i18next";
import type common from "./locales/en/common.json";
import type auth from "./locales/en/auth.json";
 
declare module "i18next" {
  interface CustomTypeOptions {
    defaultNS: "common";
    resources: {
      common: typeof common;
      auth: typeof auth;
    };
  }
}

const { t } = useTranslation("common");
t("actions.save"); // autocompletar + erros de digitação

Gere ou verifique tipos no Translation CI quando a origem em inglês mudar
JSON em inglês é a fonte da verdade para as formas das chaves

9. Mudança de Idioma RTL

import { I18nManager } from "react-native";
import * as Updates from "expo-updates";
import { setAppLanguage } from "./persistLanguage";
 
export async function setAppLanguageWithRtl(lang: string) {
  const isRtl = lang === "ar" || lang === "he";
  if (I18nManager.isRTL !== isRtl) {
    I18nManager.allowRTL(isRtl);
    I18nManager.forceRTL(isRtl);
    await setAppLanguage(lang);
    await Updates.reloadAsync();
    return;
  }
  await setAppLanguage(lang);
}

RTL requer recarregamento nativo - veja RTL Layouts
expo-updates reloadAsync funciona no cliente de desenvolvimento e em atualizações de produção

10. Testando Com react-i18next

// __tests__/SignInScreen.test.tsx
import { render, screen } from "@testing-library/react-native";
import i18n from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import { SignInScreen } from "../SignInScreen";
import enAuth from "@/i18n/locales/en/auth.json";
 
beforeAll(async () => {
  await i18n.use(initReactI18next).init({
    lng: "en",
    resources: { en: { auth: enAuth } },
    interpolation: { escapeValue: false },
  });
});
 
test("renders sign in label", () => {
  render(
    <I18nextProvider i18n={i18n}>
      <SignInScreen />
    </I18nextProvider>,
  );
  expect(screen.getByText("Sign in")).toBeOnTheScreen();
});

Use testID no Detox para E2E cross-locale - Detox E2E
Simule changeLanguage em testes unitários - testes de integração carregam pacotes JSON reais

Armadilhas

escapeValue: true (padrão) - Quebra apóstrofos em Text do RN. Correção: escapeValue: false - React faz o escape.
useSuspense: true no RN - Limites de suspense são estranhos sem streaming do React 19. Correção: useSuspense: false até adicionar fallbacks explícitos.
Importação antecipada de todos os idiomas - Incha a inicialização. Correção: import() sob demanda por idioma em changeAppLanguage.
Namespace translation único para sempre - Conflitos de mesclagem e sincronização lenta de TMS. Correção: Namespaces de funcionalidade desde o início.
Chamadas t() concatenadas - Inválido em idiomas com gênero. Correção: Uma chave por frase com interpolação.

FAQs

i18next vs react-intl vs lingui?

Todos funcionam no RN. i18next tem a maior comunidade RN, namespaces JSON simples e carregamento sob demanda. Escolha uma biblioteca por aplicativo - não misture formatadores.

Como extraio chaves para tradutores?

Use i18next-parser no CI - Translation CI. Arquivos em inglês são geralmente a localidade de origem enviada para Crowdin/Lokalise.

O i18next funciona com cabeçalhos do Expo Router?

Sim - useTranslation em componentes de tela; para opções Stack.Screen use um layout filho ou navigation.setOptions em useEffect.

E quanto ao fallback quando o pacote japonês falha ao carregar?

Configure fallbackLng: "en" e partialBundledLanguages: true. Veja Locale Fallbacks & Pseudolocale.

Relacionados

i18n Basics - externalização e portão de inicialização
expo-localization - idioma padrão do dispositivo
RTL Layouts - inversão de direção na mudança de idioma
Locale Fallbacks & Pseudolocale - cadeias de fallback
Translation CI - extrair e verificar chaves
../design-systems/theming-and-brand-flavors/theming-and-brand-flavors.md - pacotes de cópia por marca
i18n Best Practices - resumo da seção

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

i18next / react-i18next

Buscar na documentação

i18next / react-i18next