Unable to specify sourceDir for iOS in react-native.config.js

[mrbrentkelly]

Environment

someUser19m:CustomIOSLocation some.user$ npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 129.28 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK:
      API Levels: 23, 26, 27, 28, 29, 30
      Build Tools: 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.2, 30.0.3
      System Images: android-21 | Intel x86 Atom_64, android-22 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-24 | ARM 64 v8a, android-25 | Intel x86 Atom_64, android-25 | Google APIs ARM 64 v8a, android-26 | Intel x86 Atom_64, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google X86_ARM Intel x86 Atom, android-29 | Intel x86 Atom_64, android-30 | Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_201 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 7.0.1 => 7.0.1 
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.2 => 0.67.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Description

I have a project that contains multiple iOS apps. The React Native CLI is selecting the incorrect iOS project, so I'm trying to specify a project.ios.sourceDir in my react-native.config.js as per the CLI docs, but this is leading to the npx react-native config command failing with the following error...

someUser19m:CustomIOSLocation some.user$ npx react-native config
error Failed to load configuration of your project.
Config Validation Error: "project.ios.sourceDir" is not allowed
    at readConfigFromDisk (/Users/some.user/CustomIOSLocation/node_modules/@react-native-community/cli-config/build/readConfigFromDisk.js:48:11)
    at loadConfig (/Users/some.user/CustomIOSLocation/node_modules/@react-native-community/cli-config/build/loadConfig.js:74:65)
    at setupAndRun (/Users/some.user/CustomIOSLocation/node_modules/@react-native-community/cli/build/index.js:258:45)
    at Object.run (/Users/some.user/CustomIOSLocation/node_modules/@react-native-community/cli/build/index.js:220:11)
    at Object.<anonymous> (/Users/some.user/CustomIOSLocation/node_modules/react-native/cli.js:16:7)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)

Reproducible Demo

1. Create a new project

npx react-native init CustomIOSLocation

2. Rename the ios/ folder to custom-ios-location/
3. Create a react-native.config.js file at the root of the project
4. Paste the following into the file:

module.exports = {
  project: {
    ios: {
      sourceDir: './custom-ios-location',
    },
  },
};

5. Run the following command:

npx react-native config

Expected: RN CLI prints the project native linking configuration using the provided location for the iOS project.

Actual: RN CLI fails to print configuration and instead gives a "Config Validation Error: "project.ios.sourceDir" is not allowed" error

[mrbrentkelly]

Did a bit of digging into the CLI source code... It looks like for a custom Android project location you'd usesourceDir, but for iOS you'd use project...

module.exports = {
  project: {
    android: {
      sourceDir: './custom-android-location',
    },
    ios: {
      project: './custom-ios-location/ios/YourIOSProject.xcodeproj',
    },
  },
};

Not sure whether this inconsistency is intentional (if so we should update the documentation)? Or is this a bug?

[marqroldan]

I think this issue is now fixed, but on my end I had to use the following code because relative ./custom-ios-location doesn't work

const path = require('path');

const projectConfig_ios = {
    sourceDir: path.resolve(__dirname, './custom-ios-location')
}

module.exports = {
    project: {
        ios: projectConfig_ios,
    },
};

I'm not sure if it's an issue with glob or the OS, but I tried creating a test.js with the glob code using the relative path, ran it in the root project, and it worked

[adamTrz]

Hopefully this should work for you: https://github.com/react-native-community/cli/issues/1103#issuecomment-1287081542

[github-actions[bot]]

There hasn't been any activity on this issue in the past 3 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 7 days.