React-native-navigation: [V2][Android] app launch but shows only white screen

[barbarossusuz]

Issue Description

ios platform working just fine, but android is not. App launching and loading fine but just shows white screen, even i can see requests reponse with console.log in debug mode. I searched a lot but i could not find the problem. Thanks your help already.

Steps to Reproduce / Code Snippets / Screenshots

build gradle

android {
    compileSdkVersion 25
    buildToolsVersion "27.0.3"

    defaultConfig {
        applicationId "com.***"
        minSdkVersion 19
        targetSdkVersion 25
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative55" // <- See note below for further instruction regarding compatibility with other React Native versions
        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
            }
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:25.4.0"
    implementation "com.facebook.react:react-native:+"
    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'
}

MainApplication

public class MainApplication extends NavigationApplication {
  @Override
  public boolean isDebug() {
    // Make sure you are using BuildConfig from your own application
    return BuildConfig.DEBUG;
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return Arrays.<ReactPackage>asList(
            // eg. new VectorIconsPackage()
    );}
  @Override
  protected ReactNativeHost createReactNativeHost() {
    return new NavigationReactNativeHost(this) {
      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

    };}}

here how i start the app

async function start() {
some oparation
 await Navigation.events().registerAppLaunchedListener(() => {
        Navigation.setDefaultOptions(navigationDefaultOptions());
        Navigation.setRoot(setRootWithoutLogin());
    });
//some requests
}

setRootWithoutLogin

root: {
            stack: {
                options: {
                    topBar: {
                        hidden: true
                    }
                },
                children: [
                    {
                        component: {
                            id:'WELCOME_SCREEN',
                            name: 'applicationname.welcome',
                        }
                    }
                ]
            }
        }

---

Environment

• React Native Navigation version: ^2.0.2354
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): only android
• Device info (Simulator/Device? OS version? Debug/Release?): Nexus 5x api 24

[guyca]

Hey @barbarossusuz
Can you reproduce this issue in the playground app?

[bobmulder]

Having the same issue in my own project. Can't reproduce in the playground app... It seems that the event registerAppLaunchedListener isn't called...

[bobmulder]

I tried the playground app which is working well on Android (as expected :)). My own android version is still showing a white screen. When I try to debug, I see the code reaches the part where I call registerAppLaunchedListener, however the event is never executed. So, what can cause this? I already checked MainApplication.java.

[bobmulder]

Fixed it myself. The event is registered too late, so the app won't start. Try to play with the order of your startup scripts to make it work :)

[barbarossusuz]

@bobmulder same case for me, i fixed too, thanks. I'm closing this.

[damathryx]

This happens when I use redux persist before launching. anyway around this?

[dobosmarton]

@damathryx I had the same error with redux persist and this order of lines fixed this issue:

// #1 registerAppLaunchedListener
Navigation.events().registerAppLaunchedListener(() => {

// #2 persistStore
  persistStore(store, null, () => {

// #3 other Navigation init things
    Navigation.registerComponentWithRedux('navigation.WelcomeScreen',  () => WelcomeScreen, Provider, store);

    Navigation.setRoot({
      root: {
        component: {
          name: 'navigation.WelcomeScreen',
        },
      },
    });
  });
});

[damathryx]

@dobosmarton I am now using redux storage but this helped fix my problem. Thanks

[fadinasr]

Fixed it myself. The event is registered too late, so the app won't start. Try to play with the order of your startup scripts to make it work :)

@bobmulder can you please describe more?