react-native-config

What is react-native-config?

The react-native-config package allows you to manage and use environment variables in your React Native application. It helps you to keep sensitive information like API keys, server URLs, and other configuration settings out of your codebase, making your app more secure and easier to manage.

What are react-native-config's main functionalities?

Loading Environment Variables

This feature allows you to load environment variables from a .env file into your React Native application. You can access these variables using the Config object.

import Config from 'react-native-config';

const apiUrl = Config.API_URL;
console.log('API URL:', apiUrl);

Different Environments

You can define different environment variables for different environments (e.g., development, production) and use them to conditionally execute code based on the current environment.

import Config from 'react-native-config';

const environment = Config.ENV;
if (environment === 'production') {
  // Production-specific code
} else {
  // Development-specific code
}

Using Environment Variables in Native Code

// Android (build.gradle)
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

// iOS (AppDelegate.m)
#import "ReactNativeConfig.h"
NSString *apiUrl = [ReactNativeConfig envFor:@

0

README

Config variables for React Native apps

Module to expose config variables to your javascript code in React Native, supporting both iOS and Android.

Bring some 12 factor love to your mobile apps!

Usage

Declare config variables in .env:

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

Then access from your app:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

Android

Config variables set in .env are available to your Java classes via BuildConfig:

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

You can also read them from your Gradle configuration:

signingConfigs {
    release {
        storeFile file(project.env.get("RELEASE_STORE_FILE"))
        storePassword project.env.get("RELEASE_STORE_PASSWORD")
        keyAlias project.env.get("RELEASE_KEY_ALIAS")
        keyPassword project.env.get("RELEASE_KEY_PASSWORD")
    }
}

And use them to configure libraries in AndroidManifest.xml and others:

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="@string/GOOGLE_MAPS_API_KEY" />

iOS

Xcode support is missing; variables declared in .env. can be consumed from React Native apps in iOS via Config, but not from plist files.

Different environments

Save config for different environments in different files: .env.staging, .env.production, etc.

By default react-native-config will read from .env, but you can change it setting ENVFILE before running it, like:

$ ENVFILE=.env.staging react-native run-android

This is only support in Android at the moment – The iOS equivalent should be coming soon.

Setup

Install the package:

$ npm install react-native-config --save

Then follow the platform-specific instructions below:

iOS

Link the library with rnpm:

$ rnpm link react-native-config

Android

Include this module in android/settings.gradle:

include ':react-native-config'
include ':app'

project(':react-native-config').projectDir = new File(rootProject.projectDir,
  '../node_modules/react-native-config/android')

Apply a plugin and add dependency to your app build, in android/app/build.gradle:

// 2nd line, add a new apply:
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

// down below, add new compile:
dependencies {
    ...
    compile project(':react-native-android-config')
}

Change your main activity to add a new package, in android/app/src/main/.../MainActivity.java:

import com.lugg.ReactNativeConfig.ReactNativeConfigPackage; // add import

public class MainActivity extends ReactActivity {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ReactNativeConfigPackage() // add package
        );
    }