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

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® Core™ 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)