Como usar graciosamente as variáveis de ambiente em um aplicativo nativo de reação

Aman Mittal Blocked Unblock Seguir Seguindo 9 de julho

Chaves de API e segredos sempre contêm uma quantidade de dados confidenciais ou um token que precisa ser salvo normalmente. O gerenciamento de chaves diferentes para diferentes ambientes, como desenvolvimento ou produção, é uma prática comum entre os desenvolvedores de JavaScript. Portanto, o mecanismo do arquivo .env existe.

Existe uma maneira de os aplicativos React Native salvarem as Chaves de API e outras informações confidenciais sem integrar nenhum código nativo. Neste breve post, você aprenderá como instalar e integrar uma pequena biblioteca que ajuda a usar variáveis de ambiente sem expor informações confidenciais.

Observe que as etapas mencionadas neste post para instalação e integração react-native-dotenv podem ser usadas com um projeto da Expo de maneira semelhante à descrita abaixo.

Requisitos

Para seguir este tutorial, certifique-se de ter o seguinte instalado em seu ambiente de desenvolvimento local e tenha acesso aos serviços mencionados abaixo.

  • Nodejs (> = 8.xx) com npm / fio instalado
  • reagir-nativo-cli
  • watchman : O observador de alterações de arquivos para projetos React Native

Começando

Para começar, crie um novo projeto usando o react-native-cli em uma janela de terminal.

 react-native init RNEnvVariables 

# navigate inside the project directory
cd RNEnvVariables

Depois que o diretório do projeto for criado, navegue até ele. Crie um novo arquivo chamado .env . Este arquivo vai conter todas as chaves da API ou qualquer informação sensível. Certifique-se de adicionar este arquivo ao .gitignore tal forma que você não acabe expondo qualquer chave secreta em um site de controle de versão como o Github.

Para começar, vamos adicionar uma chave simulada chamada SOME_KEY ao arquivo .env .

 SOME_KEY=something 

Tome nota que os arquivos .env consideram seqüências de caracteres válidas dentro de quaisquer citações. Além disso, escrever SOME_KEY em maiúsculas é apenas uma convenção de nomenclatura bastante comumente seguida.

Instalar react-native-dotenv

Em seguida, instale a dependência react-native-dotenv que irá ajudá-lo a gerenciar suas variáveis de ambiente graciosamente ao longo deste aplicativo. Vá para a janela do terminal e execute o seguinte comando.

 yarn add react-native-dotenv 

O módulo react-native-dotenv permite importar variáveis de ambiente de um arquivo .env . Para fazê-lo funcionar, abra o arquivo babel.config.js e modifique os presets como abaixo.

 module.exports = { 
presets: [
'module:metro-react-native-babel-preset',
'module:react-native-dotenv'
]
}

Executando o aplicativo

Para verificar se está funcionando, abra App.js e importe SOME_KEY do próprio pacote. react-native-dotenv analisa o arquivo .env que permite importar a variável de ambiente mencionada no arquivo.

 // after other imports 

import { SOME_KEY } from 'react-native-dotenv'

Se você abrir esta demonstração Reagir aplicativo nativo em seu estado atual usando um simulador iOS ou um emulador Android, você será bem-vindo pela tela a seguir.

Edite a linha no arquivo App.js onde ela diz Etapa 1 com a variável de ambiente, conforme mostrado abaixo.

 <Text style={styles.sectionTitle}>{SOME_KEY}</Text> 

Agora volte ao simulador e você notará a mudança.

Conclusão

É tão simples de usar react-native-dotenv . Você não precisa adicionar nenhum código nativo para integrar para cada plataforma de sistema operacional móvel separadamente. Para um exemplo mais pragmático, você pode conferir minha postagem recente sobre a autenticação do Firebase em um aplicativo React Native and Expo . Você notará que usando o mesmo módulo que discutimos acima em um aplicativo da Expo.