Planejamento da Internacionalização em Aplicativos React com Context e Grid

Cenário internacionalização React Context Grid Flat list httpssnackexpoiosaullocenariointernacionalizacao httpssnackexpoiosaulloexemplodegrid httpssnackexpoiosaullolistgrid Planejamento Gráfico da Aplicação do cenário internacionalização Passos para construção de um aplicativo internacionalizado 1 Criar um contexto especial para armazenar a língua atual lang e a função setLang que altere a língua atual Linhas 98 101 e 104 98 Button titlei18nopenmenu lang onPress navigationtoggleDrawer 101 renderItem item 104 onPress setLangitemname 2 Preparar a navegação quais telas envolvidas e como tem de ser navegadas 3 Criar uma função que receba a chave que corresponde a palavra no dicionário de palavras e a língua atual da aplicação 4 Chamar o contexto de internacionalização para cada tela afim de realizar a tradução das palavras function HomeScreen navigation const lang ReactuseContextAppContext return View Texti18nhello langText View Links para consulta FlatList httpsreactnativedevdocsflatlist React Context httpsptbrreactjsorgdocscontexthtml Como usar react context hook httpsupmostlycomtutorialshowto usetheusecontext hookinreact Packagejson dependencies reactnativescreens 300 reactnavigationstack 540 reactnativereanimated 210 reactnavigationdrawer 580 reactnavigationnative 543 reactnativesafeareacontext 320 reactnativecommunitymaskedview 0110 reactnativegesturehandler 1102 Funções Função de internacionalização i18n recebe uma chave e a língua Traduz o texto associado a chave para a língua correspondente const i18n key lang Screens function HomeScreen navigation const lang ReactuseContextAppContext tem o contexto global function LangScreen tem uma view com uma flatList para configurar a língua a ser usada const lang setLang ReactuseContextAppContext lang e setLang recebem o contexto global de AppContext const langList traduz a língua es é Espanhol em Português Español em Espanhol e Spanish em inglês TouchableOpacity torna o item da lista clicável como se fosse um botão Ele já é uma view onPress setLangitemname App 1 Preparar o contexto const AppContext ReactcreateContext cria o contexto global como se fosse uma variável global Pai de todos que entrega todos os dados globais 2 Preparar a navegação quais telas envolvidas e como tem de ser navegadas lang lingua corrente setLang altera o contexto da aplicação para a língua selecionada FlatList function Item title return View stylestylesitem Text stylestylestitletitleText View export default function App return SafeAreaView stylestylescontainer FlatList dataDATA renderItem item Item titleitemtitle keyExtractoritem itemid SafeAreaView Flat list exemplo export default function App return SafeAreaView stylestylescontainer FlatList dataDATA renderItem item Item titleitemtitle item se refere a cada elemento do meu vetor DATA que contem o itens da lista keyExtractoritem itemid funcionalidade do flat list que serve como um identificador das linhas da lista Pra otimizar Precisa ter sempre SafeAreaView