Configurations in React Native Apps Using React-native-config
Overview
React Native is a prominent framework for developing cross-platform mobile apps with JavaScript/TypeScript and React. However, one of the challenges that developers face when working with React Native is managing different configurations for different environments, such as development, testing, staging, and production. For example, you may want to use different API endpoints, keys, or secrets depending on the environment you are running your app.
Fortunately, there is a solution for this problem: react-native-config. This is a library that allows you to store your configuration values in a .env file and access them from your JavaScript code. This way, you can easily switch between different environments without changing your code or rebuilding your app.
Build an AI-First Career, Master the Complete Skillset
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
AI Forward Deployed Engineer Program
Full-stack engineering, production AI and client-facing consulting
+1000 moreWhat 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.
How Scaler Transformed Careers in Different Fields
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ moreAndroid:
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.
Turn Learning into Career Growth
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
TypeError: reactNativeConfig.default.getConstants is not a function.
A faulty .env file causes this problem. Acceptable forms can be found at https://regex101.com/r/cbm5Tp/1.
Common causes include:
- Missing the.env file
- Unexpected spaces anywhere, for example, in front of an env variable: MY_ENV='config'
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!
Conclusion
In this article, we covered the topics that teach us how to make use of react-native-config to manage configurations in React Native apps. We learned how to install and configure the library, how to generate and use .env files for various environments, and also how to access configuration settings from JavaScript and native code. In addition, we saw some instances of properly leveraging configuration values in our code logic.
If you want to learn more about react-native-config, you can check out its GitHub repository here: react-native-config: Github Repository
We hope you found this article informative and helpful. If you have any questions or feedback, please feel free to leave a comment below. Happy coding!👩💻👨💻
