Quickstart

This document covers basic setup assuming default react-native's template with single scheme/target on ios and default flavor on android.

For advanced setup please refer to cookbook

1. Add dependency

   npm	yarn
   npm install react-native-ultimate-config	yarn add react-native-ultimate-config

2. Create example file

   echo "MY_CONFIG=hello" > .env
   

3. Update .gitignore

   Add this to .gitignore:

   # react-native-ultimate-config
   rnuc.xcconfig
   

4. ONLY FOR NPM. SKIP IF USING YARN

   create script in "package.json"

   "rnuc": "$(npm bin)/rnuc"
   

5. Generate files

   generate env files for native projects

   npm	yarn
   npm run rnuc .env	yarn rnuc .env

6. Configure native projects (one-off setup)

   1. ios

      1. run pod installin folder ios
      2. open workspace
      3. open Finder in folder ios
      4. drag'n'drop generated file into project
      5. go to project settings
      6. set rnuc.config as root configuration for both "Debug" and "Release"

   2. android

      1. apply plugin in gradle Add this right after applying react's plugin:

         apply from: "../../node_modules/react-native-ultimate-config/android/rnuc.gradle"
         

         Final code:

         apply from: "../../node_modules/react-native/react.gradle"
         apply from: "../../node_modules/react-native-ultimate-config/android/rnuc.gradle"
         

      2. expose BuildConfig to the library

         in MainApplication.java add

         // import module
         import com.reactnativeultimateconfig.UltimateConfigModule;
         
         ...
         
         @Override
         public void onCreate() {
            super.onCreate();
            ...
            UltimateConfigModule.setBuildConfig(BuildConfig.class); // expose
         }
         

      3. If you are using ProGuard: in proguard-rules.pro add the following snippet replacing MY_PACKAGE with package identifier of yours, e.g. com.mypackage.BuildConfig.

         ❗keep <fields> as is. it SHALL NOT be replaced with actual field names

         -keepclassmembers class MY_PACKAGE.BuildConfig {
            public static <fields>;
         }
         

7. save changes made to native projects .xcodeproj file and build.gradle. DO NOT COMMMIT rnuc.* files.

8. Configure web projects (optional, one-off setup)

   You can import your config into a web project as well (e.g. a project using React Native for Web). react-native-ultimate-config vends a web-friendly CommonJS module using the package.json browser field. Most web bundlers support this with minimal effort:

   • Webpack - No configuration needed. If you choose to set target it must include "web".
   • Rollup - Install @rollup/plugin-node-resolve and set browser to true.
   • Parcel - No configuration needed.
   • Browserify - No configuration needed.

9. from now on every time you need to switch environment just run npm run rnuc <dotenv file> or yarn rnuc <dotenv file> and rerun your native project (with react-native run-{ios,android}) or web project (with your web bundler of choice)