Skip to content

Instantly share code, notes, and snippets.

@jacks205
Last active December 5, 2024 19:48
Show Gist options
  • Save jacks205/45b2721bf2a2b912b1c130aef2572820 to your computer and use it in GitHub Desktop.
Save jacks205/45b2721bf2a2b912b1c130aef2572820 to your computer and use it in GitHub Desktop.
Settings up multiple app targets in React-Native

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
  1. 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
       }
   }
}
  1. 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
  2. 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 ..",
}
  1. 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.
@ma-pe
Copy link

ma-pe commented May 7, 2018

This is great, thanks a lot!

@andrewkslv
Copy link

Thank you for notes. I noticed couple moments.

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

@markentingh
Copy link

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

@byrnedo
Copy link

byrnedo commented Mar 29, 2019

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

@frodoe7
Copy link

frodoe7 commented Oct 1, 2019

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?

@Daavidaviid
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment