The problem

For those of you who have used React-Native, this problem is that in actual development, you have to change code variables frequently and change environment variables in a hard-coded way. Such a development experience is very bad. Moreover, it is easy to submit unchanged variables to the main branch during the development phase. The resulting live environment does not cut through (although this is less likely). Is there a convenient way to solve this environment variable problem? Must have! According to my research, the React-native Config project is suitable to solve this problem, and it supports switching of multiple environment variables, which is very suitable for configuring multiple environment variables in the later stage.

How to use

The installation

yarn add react-native-config
Copy the code

IOS configuration

In XCode, in the project navigator, Right click Libraries ➜ Add Files to [your project’s name] Go to node_modules ➜ react-native-config and Add ReactNativeConfig. Xcodeproj Expand the ReactNativeConfig. Xcodeproj ➜ Products folder In the project navigator, Select your project. Add libReactNativeConfig. A to your project’s Build Phases ➜ Link Binary With Libraries And go the Build Settings tab. Make sure All is toggled on (instead of Basic) Look for Header Search Paths and add $(SRCROOT)/.. /node_modules/react-native-config/ios/** as non-recursive

Add a library:Link the library to the project

Android configuration

android/settings.gradle

+ include ':react-native-config' + project(':react-native-config').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-config/android')Copy the code

android/app/build.gradle

dependencies {
	implementation "com.facebook.react:react-native:+"  // From node_modules
+	implementation project(':react-native-config')
}
Copy the code

MainApplication.java

+ import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;

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

Copy the code

Note that it needs to be added in build.gradle file (otherwise it will not work)

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
Copy the code

Multi-environment Configuration

  • Step 1: In the root directory of the Rn project, generate configuration files for multiple environments, such as. Env,. Env. release,. Env. production, and so on. Each file corresponds to an environment
  • Step 2: In package.json, configure the following script: “Android “: “react-native run-android”,” Android-pro “: “ENVFILE=.env.production react-native run-android”, “android-release”: “cd android && ./gradlew assembleRelease”, “android-release-pro”: “CD android && ENVFILE=.env.production./gradlew assembleRelease”, // android package “ios”: “react-native run-ios”, “ios-pro”: “ENVFILE=.env.production react-native run-ios”

Env is configured by default, and you can specify the environment at run time

Note that ios does not use commands when packaging and requires a separate configuration file.

Configure IOS multiple environment files

  • Generate the file

Xcode generates scheme files, one for each environment

  • Configuration: scheme… -> Build -> Pre-actions

cp “
P R O J E C T D I R / . . / . e n v . p r o d u c t i o n ” ” {PROJECT_DIR}/.. /.env.production” ” {PROJECT_DIR}/.. /.env” # replace .env.production for your file

  • Check in build (this is important)

  • use

Switch scheme files at compile time

  • There is a problem

The. Env file will be overwritten by the environment file during ios compilation. It is recommended that

Method of use

import Config from "react-native-config"; Config.API_URL; // 'https://myapi.com' // The value of the corresponding field in the configuration file is config. GOOGLE_MAPS_API_KEY; // 'abcdefgh'Copy the code

Use advice

  • Each time you switch the environment, you need to execute a command
  • Ios only fails to use directives when it is packaged, requiring switching scheme files to specify the compilation environment

conclusion

In general, configuring the React-native config process is complicated, but after the above configuration, we can use environment variables happily in RN projects and support multiple environment configurations. The development experience is relatively friendly.

The quality of articles on react-native config in the market is not perfect. However, if you encounter problems, you should read the configuration introduction on the official website several times, which is quite detailed.

Reference address: github.com/luggit/reac…