CLI has a big delay in starting Android apps in newer versions of React Native

[rodrigo-nexudus]

Environment

System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1
Memory: 54.14 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.19.1
path: /var/folders/79/d8l5t8f510j93_0rvtf6cdh40000gn/T/yarn--1689079820992-0.6055964608057027/node
Yarn:
version: 1.22.19
path: /var/folders/79/d8l5t8f510j93_0rvtf6cdh40000gn/T/yarn--1689079820992-0.6055964608057027/yarn
npm:
version: 8.19.3
path: ~/.nvm/versions/node/v16.19.1/bin/npm
Watchman:
version: 2022.12.05.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode:
version: 14.3/14E222b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.7
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: 0.72.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: false
newArchEnabled: false
iOS:
hermesEnabled: false
newArchEnabled: false

Description

Follow up to issue opened here

Details and testing on link above. It seems CLI is adding a noticeable delay (can be upwards of several minutes in complex projects) when starting up an Android app. In our project this delay hangs the process several minutes before eventually starting the "installation". This was caused in our case by updating from react native 0.67.5 to 0.72.1. Likely a general issue with all apps, exacerbated by complexity.

Reproducible Demo

Any app running newer versions of React Native should suffer from this, but the delay seems to be worse on apps with more libraries/complexity. Please refer to link above for some of the testing already done to rule out a runtime issue.

[cortinico]

For context on the CLI folks, I believe this happens also on the react-native repo.

Namely you can reproduce with:

1. git clone react-native
2. yarn
3. yarn android

You will see that it takes several seconds before the bundler actually starts

[thymikee]

Looks like some kind of regression with Metro server discovery or Android config resolution. @szymonrybczak is investigating this

[rodrigo-nexudus]

Hey @cortinico @thymikee @szymonrybczak unfortunately the update to React Native 0.72.4 has not fixed the issue. Still a delay of several minutes between "Starting JS server..." and "Installing the app...".

Any chance this can be opened again and reviewed? Thanks in advance!

[rodrigo-nexudus]

@cortinico @thymikee @szymonrybczak this continues to be an issue, reported by other user as well here

[thymikee]

@rodrigo-nexudus would you mind sharing some repro that would help us pin down the root cause?

[rodrigo-nexudus]

Hey @thymikee apologies for the delay in getting back to you. I've seen this in every project I've worked on in version 0.72 of React Native. It seems the more complex the project is, dependencies wise, the longer the delay is. In the most complex app I work on, the delay is 2-3 minutes, and this particular application has a lot of dependencies, different flavours and native code, but unfortunately I cannot share that particular project. The issue did crop up after an upgrade to 0.72 though.

I can create a repo with a lot of random dependencies if you like, but as far as I can tell this is affecting all projects. I mentioned this in the initial issue that was created on the React Native project here, and did some initial testing for @cortinico, who narrowed it down to the CLI and asked me to open this issue here.

[adamTrz]

Hi @rodrigo-nexudus thanks for reporting
A while ago we've added interactive mode and are parsing all gradle tasks here:

cli/packages/cli-platform-android/src/commands/runAndroid/listAndroidTasks.ts

Lines 31 to 41 in 2204d35

	export const getGradleTasks = (
	taskType: 'install' | 'build',
	sourceDir: string,
	) => {
	const cmd = process.platform.startsWith('win') ? 'gradlew.bat' : './gradlew';
	const out = execa.sync(cmd, ['tasks'], {
	cwd: sourceDir,
	}).stdout;
	return parseTasksFromGradleFile(taskType, out);
	};

In an essence, we are running ./gradlew tasks command and then parsing it with RegExp to extract list of all available build and install tasks.
Do you think this could impact the build time and cause a delay?
Maybe you could check how long tasks command is taking in your project? 🙏

[rodrigo-nexudus]

Hey @adamTrz thanks for your reply! I was under the impression this happened after the app begins the install process, and it actually outputs the tasks it needs to run on the console? The delay on our app is prior to the info Installing the app... output, so I don't think it's related?

The ./gradlew tasks command took just over 4 minutes to run, and showed the same output we usually see after the app begins installing, and therefore after the delay. Let me know if I misunderstood, but I don't think this is the cause.

As I mentioned before, the delay is between info Starting JS server... and info Installing the app... outputs on the console, with no output in between, so it almost seems like the command has frozen for those several minutes, as no feedback is shown

[adamTrz]

That would make sense actually, we gather information on all available build types with gradle tasks command and then proceed to building and installing the app. So the output you see in console info Installing the app is printed after those steps.

You've mentioned that ./gradlew tasks is taking about 4 minutes to run. Can you also provide info how much time whole run android command is taking?

[rodrigo-nexudus]

run android took 7:20, 3:41 of which were the delay. If that step happens prior to the Installing the app output, then it could definitely be the root cause. Our app has over 100 flavours (white-labelling for clients) and tasks runs for every flavour as far as I can tell, so that could add the kind of substantial delay we are seeing.

As the output from ./gradlew tasks is the same as we are seeing after info Installing the app, does that mean the command is running before that output silently, and then verbose after that output? Or is it two different commands that happen to have the same output? This is the other thing we are looking to resolve with regards to our long build times, as the run android command seems to prepare every flavour when it's run, even if we are building a specific flavour.