CLI is slower to start Android apps (taking around 7.5 seconds) on react-native run-android

[XeeshanAnsari]

Description

Android is taking around 7.5 seconds on startup.

React Native Version

0.71.8

Output of npx react-native info

System:
OS: macOS 11.7.7
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 431.39 MB / 16.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 16.15.1
path: /usr/local/bin/node
Yarn:
version: 1.22.11
path: ~/node_modules/.bin/yarn
npm:
version: 8.11.0
path: /usr/local/bin/npm
Watchman:
version: 2023.05.22.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 21.2
- iOS 15.2
- macOS 12.1
- tvOS 15.2
- watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 13.2.1/13C100
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.14.1
path: /usr/bin/javac
Ruby:
version: 2.7.5
path: /Users/macbook/.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.72.1
wanted: 0.72.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

I just upgraded the project to 0.71.8 and after upgrading the app is taking time to start.

Snack, code example, screenshot, or link to a repository

Package.json file

{
 "name": "myproject",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "lint": "eslint .",
   "start": "react-native start",
   "test": "jest"
 },
 "dependencies": {
   "@ethersproject/shims": "^5.7.0",
   "@gorhom/bottom-sheet": "^4.4.6",
   "@hookform/resolvers": "^3.1.0",
   "@magic-sdk/react-native-bare": "^18.5.0",
   "@metamask/sdk": "^0.3.2",
   "@polybase/client": "^0.6.1",
   "@polybase/react": "^0.6.1",
   "@react-native-async-storage/async-storage": "^1.18.1",
   "@react-native-clipboard/clipboard": "^1.11.2",
   "@react-native-community/checkbox": "^0.5.15",
   "@react-native-community/datetimepicker": "^7.0.1",
   "@react-navigation/drawer": "^6.6.2",
   "@react-navigation/native": "~6.0.2",
   "@react-navigation/native-stack": "~6.1.0",
   "@react-navigation/stack": "^6.3.16",
   "@reduxjs/toolkit": "^1.9.5",
   "@shopify/restyle": "~2.4.2",
   "@sinonjs/text-encoding": "^0.7.2",
   "@veramo/core": "^5.2.0",
   "@veramo/credential-w3c": "^5.2.0",
   "@veramo/data-store": "^5.2.0",
   "@veramo/did-comm": "^5.2.0",
   "@veramo/did-manager": "^5.1.2",
   "@veramo/did-provider-ethr": "^5.1.2",
   "@veramo/did-provider-peer": "^5.2.0",
   "@veramo/did-resolver": "^5.2.0",
   "@veramo/key-manager": "^5.1.2",
   "@veramo/kms-local": "^5.1.2",
   "@web3modal/react-native": "^1.0.0-alpha.8",
   "cross-fetch": "^3.1.5",
   "crypto-browserify": "^3.12.0",
   "ethr-did-resolver": "^8.0.0",
   "i18next": "^22.4.15",
   "jotai": "~2.0.4",
   "moment": "^2.29.4",
   "node-libs-react-native": "^1.2.1",
   "react": "18.2.0",
   "react-hook-form": "^7.43.9",
   "react-i18next": "^12.2.2",
   "react-native": "0.71.8",
   "react-native-aes-crypto": "^2.1.1",
   "react-native-background-timer": "^2.4.1",
   "react-native-device-info": "^10.6.0",
   "react-native-dropdown-picker": "^5.4.6",
   "react-native-fs": "^2.20.0",
   "react-native-gesture-handler": "^2.9.0",
   "react-native-get-random-values": "^1.8.0",
   "react-native-modal": "~13.0.0",
   "react-native-modal-datetime-picker": "^15.0.0",
   "react-native-pager-view": "~5.4.1",
   "react-native-phone-number-input": "^2.1.0",
   "react-native-progress": "^5.0.0",
   "react-native-quick-sqlite": "^8.0.2",
   "react-native-reanimated": "2.15.0",
   "react-native-safe-area-context": "~3.3.2",
   "react-native-screens": "~3.20.0",
   "react-native-select-dropdown": "^3.3.4",
   "react-native-snackbar": "^2.4.0",
   "react-native-snap-carousel": "^3.9.1",
   "react-native-splash-screen": "^3.3.0",
   "react-native-svg": "~12.1.1",
   "react-native-svg-transformer": "~1.0.0",
   "react-native-tab-view": "^3.5.1",
   "react-native-touch-id": "^4.4.1",
   "react-native-url-polyfill": "^1.3.0",
   "react-native-vector-icons": "^9.2.0",
   "react-native-webview": "^12.1.0",
   "react-navigation-stack": "^2.10.4",
   "react-redux": "^8.0.7",
   "redux-persist": "^6.0.0",
   "stream-browserify": "^3.0.0",
   "web-did-resolver": "^2.0.24",
   "web3": "^4.0.1",
   "yup": "^1.1.1"
 },
 "devDependencies": {
   "@babel/core": "^7.12.9",
   "@babel/plugin-syntax-import-assertions": "^7.20.0",
   "@babel/preset-env": "^7.14.0",
   "@babel/runtime": "^7.12.5",
   "@react-native-community/eslint-config": "^3.0.0",
   "@tsconfig/react-native": "^2.0.2",
   "@types/jest": "^29.2.1",
   "@types/react": "^18.0.24",
   "@types/react-native-snap-carousel": "^3.8.5",
   "@types/react-native-vector-icons": "^6.4.13",
   "@types/react-test-renderer": "^18.0.0",
   "babel-jest": "^29.2.1",
   "babel-plugin-module-resolver": "~5.0.0",
   "babel-plugin-rewrite-require": "^1.14.5",
   "eslint": "^8.19.0",
   "jest": "^29.2.1",
   "metro-react-native-babel-preset": "0.73.5",
   "prettier": "^2.4.1",
   "react-test-renderer": "18.2.0",
   "typescript": "4.8.4"
 },
 "jest": {
   "preset": "react-native"
 }
}

android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

import com.android.build.OutputFile

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '..'
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
    // codegenDir = file("../node_modules/react-native-codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
    // cliFile = file("../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]
}

/**
 * Set this to true to create four separate APKs instead of one,
 * one for each native architecture. This is useful if you don't
 * use App Bundles (https://developer.android.com/guide/app-bundle/)
 * and want to have separate APKs to upload to the Play Store.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Private function to get the list of Native Architectures you want to build.
 * This reads the value from reactNativeArchitectures in your gradle.properties
 * file and works together with the --active-arch-only flag of react-native run-android.
 */
def reactNativeArchitectures() {
    def value = project.getProperties().get("reactNativeArchitectures")
    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
}

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    namespace "com.myproject"
    defaultConfig {
        applicationId "com.myproject"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
         debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }

    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include (*reactNativeArchitectures())
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.release
            crunchPngs false 
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    implementation project(':react-native-splash-screen')

    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}


project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'Feather.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[rodrigo-nexudus]

Having the same issue on 0.72.1. Updated from 0.67.5, and after update app gets stuck a long time between "info Starting JS server..." and "info Installing the app..." with no other output. Can't therefore see what's causing the delay, but our app is quite complex and this delay takes 2-3 minutes on an M1 Mac. Delay even worse on other devices.

It also happens if the JS server is already up when starting the app, so that can be ruled out as the cause.

[ramizqazi]

Facing same issue 😢

[cortinico]

Does the same issue happens on a empty app?

[rodrigo-nexudus]

@cortinico the delay is definitely smaller in that case, but still slower than previous versions. It does seem the more libraries/complexity, the larger the delay. If there are any tests you want me to run I'm happy to do so, it's just unfortunate there's no output to figure out what might be causing the delay.

[cortinico]

@rodrigo-nexudus thanks for the clarification.

1. could you try to disable Hermes and report back if the issue persists?
2. could you try to update to .72 and also confirm if the issue persists?

[rodrigo-nexudus]

@cortinico I'm already running 0.72.1, the issue persists. As for Hermes, I've just tried disabling it through gradle.properties and it does not seem to have made a difference.

I also added some logging directly to build.gradle, both at the top of the file and when the hermesEnabled boolean is accessed. Both logs displayed on console after the delay, when the app begins "installing", so seems like whatever is happening is prior to any build.gradle access.

On the screenshot above, the "Accessing build.gradle" log was added as the first line of build.grade, and "false" is the value of hermesEnabled, printed just before the check in dependencies. The delay is between "info JS server already running..." and "info Installing the app..."

[cortinico]

The delay is between "info JS server already running..." and "info Installing the app..."

Ah ok so it's not part of the runtime but is a CLI issue. I believe I noticed this delay as well. Don't you mind opening this same issue here:

https://github.com/react-native-community/cli/issues

As this is most likely an issue with the CLI (cc @thymikee @szymonrybczak)

[szymonrybczak]

This was fixed and released in v11.3.6, probably will be released with the next patch release of 0.72.

[rodrigo-nexudus]

Can we have an ETA on the next React Native patch to fix this issue @cortinico ?

[szymonrybczak]

Hey @rodrigo-nexudus, it'll be released with next React Native patch (0.72.4).

[rodrigo-nexudus]

@szymonrybczak do you have any kind of ETA on the patch? Sorry to ask, but this issue adds several minutes every time we have to build the app for implementation/debugging purposes, and we use native code quite a bit within our app, which means it's pretty common for us to have to rebuild things. Thanks in advance!

[hannojg]

@szymonrybczak just tested with RN 0.72.4, confirming running the latest cli version, but its still hangs :/

[rodrigo-nexudus]

Related issue added in React Native CLI, I've also confirmed that this has not been fixed there.

[XeeshanAnsari]

I am still waiting for the fixes. any updates here?

[rodrigo-nexudus]

More updates here. Looks like it's related to React Native CLI running ./gradlew tasks at a point where it didn't do so before, but no fix from their side and no update for the last couple of weeks.

[szymonrybczak]

@rodrigo-nexudus we created fix for this inside CLI, we'll release patch fix for React Native 0.72 in the nearest future.