Projeto no Github

Para tornar este artigo abrangente, criei um repositório com uma aplicação real onde você pode analisar o código e ver a implementação completa dos exemplos mencionados. Visite o repositório no GitHub: app-internationalization.

Primeiro, instale as Bibliotecas

Você precisa instalar as bibliotecas necessárias para react-i18next, i18next e expo-localization.

npx expo install expo-localization react-i18next i18next

Neste exemplo, uso AsyncStorage, então você precisará instalá-lo também. No entanto, se usar outra solução para persistir os dados, fique à vontade para substituí-lo.

npx expo install @react-native-async-storage/async-storage

Agora, crie o arquivo de configuração no seu diretório src. Crie um arquivo chamado ./i18n/index.ts com o conteúdo abaixo:

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/translation.json";
import translationPt from "./locales/pt-BR/translation.json";
import translationZh from "./locales/zh-CN/translation.json";

const resources = {
  "pt-BR": { translation: translationPt },
  "en-US": { translation: translationEn },
  "zh-CN": { translation: translationZh },
};

const initI18n = async () => {
  let savedLanguage = await AsyncStorage.getItem("language");

  if (!savedLanguage) {
    savedLanguage = Localization.locale;
  }

  i18n.use(initReactI18next).init({
    compatibilityJSON: "v3",
    resources,
    lng: savedLanguage,
    fallbackLng: "pt-BR",
    interpolation: {
      escapeValue: false,
    },
  });
};

initI18n();

export default i18n;

Neste exemplo, estou usando AsyncStorage para persistir os dados de internacionalização caso o usuário mude manualmente o idioma. Além disso, a configuração com expo-localization é usada para obter o idioma atual do dispositivo.

Importe o arquivo i18n no seu App raiz

Uso no _layout.tsx, mas se seu arquivo raiz for index.ts ou outro arquivo, você precisa importá-lo nesse arquivo raiz. Exemplo de import no arquivo _layout.tsx do App raiz:

import { useEffect } from 'react';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import 'react-native-reanimated';
import '@/i18n'; // Esta linha importa a configuração i18n
import { useColorScheme } from '@/hooks/useColorScheme';

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
    </ThemeProvider>
  );
}

Agora você precisa criar seus arquivos de tradução e usá-los nos seus componentes.

Crie arquivos para localidades traduzidas

Na pasta i18n, crie uma pasta chamada locales. Dentro da pasta locales, crie subpastas para cada localidade, como en-US, pt-BR ou zh-CN. Dentro de cada subpasta, crie um arquivo JSON chamado translation.json com suas entradas de tradução.

Exemplo prático e funcionalidades prontas para uso em produção! 🚀

Referências

• Site oficial react-i18next
• Repositório do projeto app-internationalization
• Meu perfil no Github @lucasferreiralimax