Como Expor Variáveis de Configuração no React Native usando React Native Config (2023)

Introdução

Ao desenvolver aplicativos móveis com React Native, é essencial gerenciar variáveis de configuração, como URLs de API e chaves de API, de maneira eficiente. Neste artigo, exploraremos como utilizar o módulo React Native Config para expor e acessar facilmente essas variáveis em aplicativos iOS, Android e Windows.

Configuração Básica

1. Crie um arquivo .env:

   No diretório raiz do seu aplicativo React Native, crie um arquivo chamado .env. Aqui, você definirá suas variáveis de configuração.

   API_URL=https://myapi.com
   GOOGLE_MAPS_API_KEY=abcdefgh

2. Acesse as variáveis no código:

   No código do seu aplicativo, importe o módulo Config e acesse as variáveis definidas no arquivo .env.

   import Config from "react-native-config";
   
   Config.API_URL; // 'https://myapi.com'
   Config.GOOGLE_MAPS_API_KEY; // 'abcdefgh'

   Lembre-se de que este módulo não criptografa as chaves, portanto, evite armazenar informações sensíveis.

Instalação e Vínculo

1. Instale o pacote:

   Execute o comando abaixo para instalar o pacote React Native Config:

   $ yarn add react-native-config

2. Vincule a biblioteca:

   Dependendo da versão do seu projeto React Native, você pode usar autovinculação ou vinculação manual.

   $ react-native link react-native-config

   Certifique-se de seguir as instruções específicas para iOS e Android, conforme detalhado na documentação oficial.

Configuração Específica para Plataformas

iOS

• Adicione a referência ao projeto no Xcode.

• Acesse as variáveis no código Obj-C.

  #import "RNCConfig.h"
  
  NSString *apiUrl = [RNCConfig envFor:@"API_URL"];

Android

• Acesse as variáveis no código Java.

  public HttpURLConnection getApiClient() {
      URL url = new URL(BuildConfig.API_URL);
      // ...
  }

Windows

• Acesse as variáveis no código C++.

  std::string api_key = ReactNativeConfig::API_KEY;

Uso Avançado

Além da configuração básica, o React Native Config oferece recursos avançados, como exposição de valores no arquivo Info.plist e Build settings, suporte a extensões de aplicativos e configurações específicas para ambientes.

Solução de Problemas Comuns

1. Problemas com Proguard:

   Se estiver usando Proguard no Android, adicione uma exceção para a classe BuildConfig no arquivo proguard-rules.pro.

   -keep class com.mypackage.BuildConfig { *; }

2. Erro "TypeError: _reactNativeConfig.default.getConstants is not a function":

   Este erro geralmente ocorre devido a um formato incorreto no arquivo .env. Certifique-se de seguir o formato adequado.

Conclusão

O módulo React Native Config é uma ferramenta poderosa para gerenciar variáveis de configuração em aplicativos React Native. Ao seguir as instruções fornecidas neste artigo, você poderá integrar facilmente suas configurações em diversas plataformas, garantindo uma gestão eficiente e segura das variáveis do seu aplicativo.