npm run android does not launch the Android app

Question

Issue

I was able to clear my last issue after ignoring the errors and following the rest of the steps in the React Native Navigation installation. Those warnings went away.

However, when I run npm run android, it builds successfully but does not launch the app

Configure project :app
...
Configure project :react-native-navigation
...
Task :app:installDebug
...
BUILD SUCCESSFUL in 6s

The android emulator goes to its home screen and the app does not launch.

What I've Tried

• I've tried running/building/clean&rebuilding from android studio. This led to Could not connect to development server when I refreshed from the white blank screen.

• I've followed the steps in here by creating assets folder and running this code

  react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  

---

build.gradle

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

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 19
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        mavenLocal()
        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url 'https://jitpack.io' }
    }
}

app/build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.appname"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            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:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support' && requested.name != 'multidex') {
            details.useVersion "${rootProject.ext.supportLibVersion}"
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:design:28.0.0"
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation project(':react-native-navigation')
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

• react-native: "0.57.8"
• react-native-navigation: "^2.7.0"
• Android 9.0 API 28

Solution

I think you maybe have to run the metro bundler before running npm run android.

react-native start --reset-cache

This will start the bundler, so you will have to run

npm run android

in a different terminal window, but same project directory. This script is mentioned below! This is the way I'm doing it. It has been an issues since RN 57.2 that there were some problems with the metro bundler and this is the way to go. I have updated in the meantime to RN 57.8 and the latest RNN also, but I still run the project like that.

I also have to mention that I'm running this on a emulator with API 26 and Android Studio 3.3 and normally If I run it as I said above, it will start the app in the emulator.

BUILD SCRIPTS

"scripts": {
    "build-android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug && cd ../",
    "android": "npm run build-android && (adb reverse tcp:8081 tcp:8081 || true) && react-native run-android"
}

EDIT

It is especially important that you follow the instructions given by RNN team under this link for running your app on Android: The instructions from RNN team for running your app on an Android emulator or device.

EDIT 2

As per request, API 26 is required as that is your compile SDK version(currently for RNN v2.7.1) as well as your target SDK version. This info you can find in the documentation for RNN at the same link as above.

Comments

[Joseph K.]

I don't think adb reverse tcp:8081 tcp:8081 is my actual solution. I realized that your solution does prompt the emulator to launch the app which was my initial question, so you did answer that correctly. However, I'm finding that now the app is loading with a white blank screen and refreshing it prompts Could not connect to the development server, while Metro bundler stays at Loading dependency graph, done. This is the same with both of your methods.

[Sorin]

hmm, ok, So the metro bundler should start its job, as in bundling everything and start the app. You could try starting the metro bundler, and then just running npm run android (the script from RNN) and then try and open the app manually from the emulator. See if that will actually build the app (should see the bundler starting loading a progress bar). Also is the build ok? do you get any errors while running 'npm run android' or npm run build-android' ?

[Joseph K.]

It produces the same result as I have just described. The build was successful, maybe something worthy to note is this message, Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.

[Sorin]

could you please post your android/build.gradle file as well as your android/app/build.gradle file ?thanks Also which versions of RN and RNN you are using and also the Android API version you are using to build the app.

[Joseph K.]

sure, I have updated those information in the question

[Sorin]

ok I can see that you haven't followed the installation instructions entirely from RNN regarding Android. I think that you should have your build.gradle and app/build.gradle files according to the instructions from RNN installation guide that you cand find here:

[Sorin]

wix.github.io/react-native-navigation/#/docs/…

[Joseph K.]

well, I started out by following the instructions until I started running into problems, and android studio telling me that the old versions are no longer supported. But, i'll give it another go and change them.

[Sorin]

Android Studio also asks me everytime to update gradle and so on, but that is for android developers who can use the latest APIs, RNN is at the moment setup for slightly older version of gradle and Android API. You can trust the instructions on RNN website. I am using those and I have no issues running my project. I am also building it from the terminal, so I am only using Android Studio to start the Virtual device (which has to be setup using Oreo -> API 26).

[Joseph K.]

I can confirm that this worked. metro bundler is working, the app in the emulator updates with refresh, errors and warnings are gone except for WARNING: Module 'react-native-navigation' has variant 'reactNative51Debug' selected, but the module ''app'' depends on variant 'reactNative57_5Debug'. Also, launching the app manually after the build works. If you can update with a little bit about using same versions/code as the docs and why Oreo API 26 is necessary, I will accept this as my answer. Thanks!!

[Sorin]

Awesome, I'm glad! I have updated my answer, please check. Thank you :)