Suporte a vários idiomas no React Native: A internacionalização do aplicativo React Native nos ajuda a direcionar os usuários que não falam inglês ou se sentem mais confortáveis ​​usando o aplicativo em seu idioma local. Podemos dar opções para os usuários escolherem entre vários idiomas que iremos oferecer em nosso aplicativo.

Para este tipo de situação, precisamos implementar suporte a vários idiomas em nosso aplicativo. É aqui que i18next e react-i18next são úteis. Esta biblioteca torna mais fácil gerenciar as traduções e oferece muitas funções úteis.

Abordagem: 

• Criação de um novo projeto React Native e instalação das dependências i18next e react-i18next .
• Criação de um arquivo JSON para cada idioma.
• Configurando i18next em i18n.js .
• Inicializar i18next por importá-lo em app.js .
• Importando funções de linguagem em App.js e alterando o idioma.

Agora vamos começar com a implementação.

Etapa 1: crie um novo projeto nativo React executando o comando

npx react-native init languageDemo

Passo 2: Agora vá para a pasta do projeto, ou seja, demonstração do idioma.

cd languageDemo

Etapa 3: Instale as   bibliotecas i18next e react-i18next .

npm install i18next --save
npm i react-i18next

Estrutura do projeto: terá a seguinte aparência.

Etapa 4 Estrutura do Projeto

Etapa 4: Criação de arquivos JSON. O arquivo JSON contém a tradução de cada texto em nosso aplicativo que queremos mostrar. O arquivo está no formato JSON, portanto, todo texto tem uma chave.

A chave é única para cada texto diferente, mas comum para o mesmo texto em diferentes idiomas.

1. en.json: contém traduções para o inglês .

{
    "translation": {
      "hello":"Hello",
      "this line is translated":"This line is translated"
    }
  }

2. hi.json: contém traduções para hindi .

{
    "translation": {
      "hello":"नमस्ते",
      "this line is translated":"यह पंक्ति अनुवादित है"
    }
  }

Etapa 5: Configurando i18next (i18n.js).  Importaremos i18n de 'i18next' e initReactI18next de 'react-i18next' . 

Em seguida, importaremos nossos arquivos JSON ( en.json e hi.json ).

Em i18n.use (initReactI18next) , passamos a instância i18n para react-i18next, que a tornará disponível para todos os componentes por meio da API de contexto.

A função init() leva um objeto de {lng, fallbacklng, recursos} como parâmetro.

lng - default language
fallbackLng - Fallback language in case key is not found for any translation.
resources - JSON file for various languages.

Nome do arquivo: i18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from './en.json';
import hi from './hi.json';
  
i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: en,
    hi: hi,
  },
  interpolation: {
    escapeValue: false // react already safes from xss
  }
});
  
export default i18n;

Etapa 6: agora importaremos o i18n.js em nosso arquivo App.js que inicializará o i18next . Em seguida, importaremos useTranslation Hook de react-i18next, que nos dá t e i18n .

t - function which accepts key as parameter and returns the 
    appropriate text based on current language selected.
i18n - object containing function like changeLanguage  
    and other useful values.

Em nossa tela, temos dois botões para alterar o idioma. Existe um texto que será alterado de acordo com o idioma atual definido quando pressionamos um dos dois botões. Para alterar o idioma,   usaremos a função changeLanguage , que aceita o nome do recurso do idioma como parâmetro e uma função de retorno de chamada a ser executada após a alteração do idioma.

We can check current language by doing console.log(i18n.language)

import React,{useState} from 'react';
import './i18n/i18n';
import {View, Text,Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
  
const App = () => {
    
  const {t, i18n} = useTranslation();
  
  const [currentLanguage,setLanguage] =useState('en');
  
  const changeLanguage = value => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch(err => console.log(err));
  };
  
  return (
   <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          alignItems: 'center',
          justifyContent: 'space-evenly',
        }}>
        <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
          {t('hello')}{' '}
        </Text>
        <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
          {t('this line is translated')}
        </Text>
        <Pressable
          onPress={() => changeLanguage('en')}
          style={{
            backgroundColor:
              currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
            padding: 20,
          }}>
          <Text>Select English</Text>
        </Pressable>
        <Pressable
          onPress={() => changeLanguage('hi')}
          style={{
            backgroundColor:
              currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
            padding: 20,
          }}>
          <Text>हिंदी का चयन करें</Text>
        </Pressable>
      </View>
  );
};
  
export default App;

Etapa para executar o aplicativo: Inicie o aplicativo usando o seguinte comando: 

npx react-native run-android

Saída:

Saída

Referência: https://react.i18next.com/guides/quick-start