Como usar variáveis de ambiente no React Native

Neste artigo você vai aprender como usar variáveis de ambiente no React Native de uma forma totalmente descomplicada.

Introdução

O que é variável de ambiente?

Variáveis de ambiente são usadas para armazenar dados confidenciais. Por exemplo, informações de conexão com o banco de dados, chaves de integração com API's ou qualquer outra informação sigilosa. Essas variáveis são geralmente definidas em um arquivo .env no diretório raiz, e são utilizadas da seguinte maneira process.env.NOME_DA_VARIAVEL, porém neste artigo vamos capturar os valores dessas variáveis um pouco diferente. Mas com a mesma simplicidade.

Por onde começar?

Em um projeto react native, execute o comando abaixo:

npm i react-native-dotenv --save-dev 

Ou

yarn add react-native-dotenv -D 

Depois adicione na raiz do projeto um arquivo .env. Neste arquivo você vai colocar todas suas variáveis de ambiente, por exemplo:

SECRET_KEY=chave-secreta

Feito isso, você deve criar um arquivo  .babelrc no diretório raiz e adicionar o seguinte:

{ 
  "plugins": [[
       "module:react-native-dotenv", 
      {
        "moduleName": "@env", 
        "path": ".env", 
        "blacklist": null, // opcional 
        "whitelist": null, // opcional 
        "safe": false, // opcional 
        "allowUndefined": true // opcional 
      }
    ]] 
} 

Como capturar os valores das variáveis?

Para usar uma variável em um determinado arquivo, basta importá-la da seguinte maneira:

import {  SECRET_KEY } from '@env'

É isso aí. Não existem muitos segredos.

Passo adicional para usar com TypeScript

Se você estiver usando TypeScript é necessário adicionar um arquivo de tipagem para o módulo @env, por exemplo, crie um arquivo env.d.ts em ./src/types e adicione:

declare module '@env' {
  export const SECRET_KEY: string;
}

Pronto, isso é tudo!

Não esqueça de colocar o seu arquivo .env no .gitignore.