Configurations in React Native Apps Using React-native-config

What is React-native-config?

React-native-config is a library that lets you store your configuration values in a .env file and access them from your JavaScript code. A .env file is a plain text file that contains key-value pairs separated by an equal sign.

For example:

The advantage of using a .env file is that you can keep it outside of your version control system and avoid exposing sensitive information such as keys or secrets. You can also create multiple .env files for different environments and switch between them easily.

react-native-config works by reading the .env file and exposing its values as environment variables that you can access from your JavaScript code using the Config object.

For example:

react-native-config also supports native modules, which means you can access the same configuration values from your native code (Java, Objective-C, Swift) using ReactNativeConfig class. For example:

How to Install React-native-config?

To install react-native-config, you need to follow these steps:

1. Install the library using npm or yarn:

2. Create a .env file in the root of your project and add your configuration values

For example:

You can also create multiple .env files for different environments and name them accordingly. For example:

3. Specify which .env file to use by setting an environment variable called 'ENVFILE' before running your app

For example:

You can also set the 'ENVFILE' variable in your package.json scripts for convenience. For example:

How to Set Up React-native-config?

To set up react-native-config, you must follow some additional steps depending on your platform and build system.

Android:

To set up on Android, you need to do the following:

• Add the following lines to your android/app/build.gradle file:

• Add the following lines to your android/settings.gradle file:

• Rebuild your app:

iOS:

To set up on iOS, you need to do the following:

• Add a new entry to your Info.plist file with the key ReactNativeConfig and the value $(ENVFILE).

• Add a new entry to your .gitignore file with the value *.xcconfig.

• Create a new file in the root of your project called tmp.xcconfig and add the following line:

  #include? ".env.${ENVFILE}"

• Go to your project settings in Xcode and select your app target. Then go to Build Settings and search for Xcode Configuration File. Set its value to tmp.xcconfig.

• Rebuild your app.

How to Use React-native-config in your Code?

To use react-native-config in your code, you need to import the Config object from the library and access its properties using dot notation. For example:

You can also use destructuring assignment to get specific values from the Config object. For example:

You can use the configuration values anywhere in your code, such as in API calls, navigation, logging, etc. For example:

Troubleshooting

When Proguard is enabled (as it is by default for Android release builds), it can rename the BuildConfig Java class during the minification process, preventing React Native Config from referencing it. To avoid this, add the following exception to android/app/proguard-rules.pro:

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

Make sure that 'com.packagename' is identical to the package value in your app/src/main/AndroidManifest.xml file.

When using Dexguard, the shrinking phase will eliminate resources that it considers to be idle. To keep the build config package name, the following exception must be added.

-keepresources string/build_config_package

Testing

React-native-config cannot be run in a node.js environment (Jest, Mocha) since it contains native code. The react-native-config-node package allows you to mock react-native-config for usage in test runners in the same way that it is used in the actual app.

For mocking the Config.FOO_BAR usage, create a mock at mocks/react-native-config.js:

Turbocharge Your React Journey! Dive into Our Full Stack Courses with React-Expert Instructors. Enroll Now!