Settings up multiple app targets in React-Native

RNMultipleTargetsInstructions.md

Settings up mutliple app targets in React-Native

1. yarn add react-native-config
2. react-native link react-native-config
3. Create .env files for each configuration. Ex: .env.dev, .env.prod, etc Ex:

API_ENDPOINT=https://api.myresource.com/dev
ENV=dev

4. Follow instructions for set up with react-native-config and extra steps

• Add resValue "string", "build_config_package", "PACKAGE_NAME_FROM_ANDROIDMANIFEST.XML" to defaultConfig in android/app/build.gradle

Note: The targets will have suffixes corresponding to the target. Ex: prod: com.company.app, dev: com.company.app.development

Android Instructions

1. Add productFlavors for different desired targets

android {
  defaultConfig { //... }
  productFlavors {
        dev {
            // Pre-compile run ENVFILE=.env.dev
            applicationIdSuffix ".development"
        }

       prod {
           // Pre-compile run ENVFILE=.env.prod
       }
   }
}

2. Add target dependent keys in src/<flavor>/res/values/strings.xml (main is the default config. Use this for prod configuration). Ex: src/dev/res/values/strings.xml, src/main/res/values/strings.xml
3. Since react-native-config requires ENVFILE to be defined in the environment during compile time, make sure to export the variable before assembing. I usually add these scripts to my package.json

"scripts": {
   // ...
  "install:android": "cd android/ && export ENVFILE=.env.dev && ./gradlew installDevDebug && cd .. && yarn start:android",
  "start:android": "adb shell am start -n com.bundle.id/.MainActivity",
  "assemble:android": "cd android/ && export ENVFILE=.env.prod && ./gradlew assembleProdRelease && cd ..",
  "assemble:android:dev": "cd android/ && export ENVFILE=.env.dev && ./gradlew assembleDevRelease && cd ..",
}

4. Run yarn assemble:android to build your prod app and yarn assemble:android:dev for your dev app.

iOS Instructions

• Instead of multiple schemes for the same target, we are going to add a target for each pipeline. (This will allow for multiple bundle ids, and installing the different target apps to iOS at the same time.)

1. Right click your primary target > Duplicate > Rename to <TargetName>Dev
2. Move the newly created <TargetName>Dev-Info.plist into the project directory > <TargetName>Dev Build Settings > Search "plist" and fix references to plist
3. General > Set appropriate display name > Set bundle id (same as primary target, append .<pipeline> ex: .development)
4. Schemes > Manage Schemes > Delete new scheme that was created for target > Duplicate primary scheme > Rename <TargetName>Dev
5. Edit new scheme > Profile > Make sure Executable is set to the new target .app executable
6. Make sure to follow the Pre-Actions setup and extra instructions for iOS
7. Select appropriate scheme before building or running on device
8. To keep versions and build in sync across all pipelines, I usually add these scripts into my package.json

"scripts": {
  // ...
  "bump:build:ios": "cd ios/ && agvtool next-version -all && cd ..",
  "set:build:ios": "cd ios/ && agvtool new-version -all",
  "set:version:ios": "cd ios/ && agvtool new-marketing-version"
}

To run: yarn bump:build:ios, yarn set:build:ios 23, yarn set:version:ios 1.0.1

Additional Notes

• Makes sure to have the correct bundle ids in Firebase to test push notifications in dev before production.
• When linking libraries for iOS, the react-native link command will be applied to the primary target, and NOT your pipeline targets. These will need to be manually linked.

This is great, thanks a lot!

Thank you for notes. I noticed couple moments.

• In new version React Native there is only release android type.
• Grandle 3 version requires tier.

thank you for these instruction, although I did notice that React Native (0.54+) uses

"scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },

in package.json

Medium link FWIW https://medium.com/@jacks205/adding-multiple-target-pipelines-for-react-native-apps-and-fastlane-circleci-deployment-pt-1-ae9590ae52f2

@jacks205: Do you manually link on the other target? I read that react-native link only works on the first target

Hey , I'm building an application like Uber in React Native

my purpose is to have 2 targets inside the main app , one for driver and the other for the client

this is useful to share the common codes between 2 targets without writing them twice for each target

how to achieve this in React Native , any tutorials?

Hey,
you forgot to mention about cocoapod right ?
You need to define the targets in the Podfile