`init newproject --template` modifying `react-native.config.js` causes error and yarn isn't used by default

[pnthach95]

Environment

System:
  OS: macOS 14.2
  CPU: (8) arm64 Apple M1
  Memory: 87.84 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.8.1
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/pnthach/.rvm/rubies/ruby-2.7.5/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-26 | Google APIs ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/pnthach/.rvm/rubies/ruby-2.7.5/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Description

I set up react-native-vector-icons, my react-native.config.js looks like this

/** @type {import('@react-native-community/cli-types/build/index').Config} */
module.exports = {
  project: {
    ios: {
      sourceDir: 'ios',
    },
  },
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

After init, it becomes like this

module.exports = {
  project: {
    ios: {
      sourceDir: "ios",
      automaticPodsInstallation: true
    }
  },
  dependencies: {
    react-native-vector-icons: {
      platforms: {
        ios: null
      }
    }
  }
};

Single quotation marks are removed at line 9 and causes error. This template have to write a workaround script

Also, yarn isn't used by default as document stated. It can be reproduced without --template

Reproducible Demo

My reproducible template is published for demo: https://github.com/pnthach95/demotemplate

Run npx react-native init AwesomeProject --template https://github.com/pnthach95/demotemplate.git

Open react-native.config.js file and see error

[szymonrybczak]

Hey, that's really strange, but anyway we deleted creating react-native.config.js in #2203, so starting with 0.73.1 this issue shouldn't exist anymore.

Also, yarn isn't used by default as document stated. It can be reproduced without --template

Can you confirm that yarn --version correctly returns a version of Yarn in the directory that you want to create project?

[pnthach95]

Hi @szymonrybczak, I recorded reproducible video about yarn issue

Screen.Recording.2023-12-18.at.7.13.59.PM.mov

yarn v1.22.21 with react-native@0.73.1 just released

[szymonrybczak]

@pnthach95 okay, I looked into the code and actually in the first place we're looking for npm_config_user_agent, and then we have fallback to Yarn 😅

cli/packages/cli/src/commands/init/init.ts

Lines 331 to 347 in 2fc5965

	function userAgentPackageManager() {
	const userAgent = process.env.npm_config_user_agent;
	if (userAgent) {
	if (userAgent.startsWith('yarn')) {
	return 'yarn';
	}
	if (userAgent.startsWith('npm')) {
	return 'npm';
	}
	if (userAgent.startsWith('bun')) {
	return 'bun';
	}
	}
	return null;
	}

So probably some tool changed that env variable in your setup and that's why packages are installed with npm right now.
I'm going to update docs to reflect current change. Btw you can also pass --pm yarn to force Yarn usage.

[pnthach95]

Before 0.73, yarn is the default package manager. So, it's going to be fixed or it just works as intended? Is there a "changing npm_config_user_agent to yarn" guide?