react native build with own configuration in wrong Build/Products folder

Question

I'm trying to have separate configuration for development, staging and production, to build three apps using only one repository. I'm using react native and want to have the possibility to only change the scheme in Xcode to have different icons a different app-name and a different app-id for every app. Also the build from console should be possible, because I'm using CI/CD

Environment:

• OS: macOS High Sierra 10.13.2
• Node: 9.3.0
• Yarn: 1.3.2
• npm: 5.6.0
• Watchman: 4.9.0
• Xcode: Xcode 9.2 Build version 9C40b
• Android Studio: 2.3 AI-162.3764568

Packages: (wanted => installed)

• react: 16.0.0 => 16.0.0
• react-native: 0.50.3 => 0.50.3
• Target Platform: iOS (8.0)

What I already achieved:

Creating new configuration and scheme in Xcode with own icons, name, and app-ID. Change debug configuration.

1. Dublicate configuration "Release" => Named Staging
2. Add new IconsSets => AppIconStaging and AppIconDebug
3. Change Target Build Settings
   1. ASSETCATALOG_COMPILER_APPICON_NAME
      • Debug: AppIconDebug
      • Staging: AppIconStaging
      • Release: AppIconRelease
   2. PRODUCT_BUNDLE_IDENTIFIER
      • different for every configuration
   3. PRODUCT_NAME
      • different for every configuration
4. Dublicate Scheme => named: ProjectDebug and ProjectStaging
5. Edit Schemes
   1. Set Build Settings for Run, Profile and Archive
      • ProjectDebug => Debug
      • ProjectStaging => Staging

At this point trying to run ProjectStaging on simulator fails, because the build fails. I have noticed, that when building ProjectStaging with Staging configuration on an fresh git clone of my project, some files are build in ios/build/Build/Products/Release-iphonesimulator.

Because of this files the build fails, they can't be found in the Staging-iphonesimulator folder.

There are some links to solutions by changing some build settings for Staging configuration, which tells to change some other configuration:

Changing: Header Search Paths, Framework Search Paths, Library Search Paths and User Header Search Paths to

`$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)`

Now all scheme builds failing when trying to run from Xcode:

`/Volumes/Workspace/Projects/Project/ios/ProjectTests/ProjectTests.m:11:9: 'XCTest/XCTest.h' file not found`

Running from console:

`node node_modules/react-native/local-cli/cli.js run-ios --device --scheme ProjectStaging --configuration Staging`

Build fails because of same issue, but App is installed and running well (cant find any errors for now)

Building archive always working.

I think this is an react native issue, but perhaps I'm doing something wrong.

Links I used

• How to have different icons for your app
• How to set up multiple schemes & configurations in Xcode for your React Native iOS app
• Setting Up Multiple Build Configurations In Your Xcode Project
• iOS Static Library as a Subproject of a Project That Has Custom Build Configurations?

Answer 1

I have found that sometimes adding a native module to a React native Xcode project results in that module's project not being set up for all of the configurations in the parent project.

So, for example, if I have this Test1 project where an additional "Staging" configuration has been added:

Then I may need to make the configurations for the native module's project match, so its settings are compatible with the parent. Choose the project from the target selector:

And add the correspondingly named Configuration, "Staging" in this case:

This doesn't happen consistently. I've seen this behavior both with the manual method of adding native module projects, and by using the react-native link command.

It definitely slows down development and takes some shine off the experience of doing React Native work. It helps to have some facility in troubleshooting the native platform's environment, Xcode and Gradle.