ionic 3: gray dark screen with Android App on device

Question

I have a black (gray dark) screen when I built and run my app on my Android device.

My problem like this question but the solution not fix my problem.

Tests where app is OK

When I execute ionic serve.

When I build another Ionic app (not this one) and run on device.

When I change the ID of in config.xml.

I tried to:

remove and re-add Android platform.

re-install all NPM modules.

re-add cordova-plugin-facebook4 with SDK VERSION to 4.35.0

config.xml file after re-add cordova-plugin-facebook4 V4.35.0:

<plugin name="cordova-plugin-facebook4" spec="~3.0.0">
        <variable name="APP_ID" value="**********" />
        <variable name="APP_NAME" value="MY APP Name" />
        <variable name="ANDROID_SDK_VERSION" value="4.35.0" />
        <variable name="FACEBOOK_ANDROID_SDK_VERSION" value="4.36.0" />
</plugin>
<engine name="android" spec="7.0.0" />

but nothing these steps does not fix the issue.

IONIC INFO OUTPUT

Ionic:

   ionic (Ionic CLI)  : 4.1.2
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 14 other plugins)

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

NPM OUTDATE OUTPUT

Package                                Current  Wanted  Latest  Location
promise-polyfill                         8.1.0   7.1.2   8.1.0  my_ionic_app
rxjs                                     6.3.2   6.2.1   6.3.2  my_ionic_app
@angular/animations                     5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/common                         5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/compiler                       5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/compiler-cli                   5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/core                           5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/forms                          5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/http                           5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/platform-browser               5.2.10  5.2.10   6.1.8  my_ionic_app
@angular/platform-browser-dynamic       5.2.10  5.2.10   6.1.8  my_ionic_app
@ionic-native/core                       4.7.0   4.7.0  4.14.0  my_ionic_app
@ionic-native/splash-screen              4.7.0   4.7.0  4.14.0  my_ionic_app
@ionic-native/status-bar                 4.7.0   4.7.0  4.14.0  my_ionic_app
@ionic/app-scripts                       3.1.9   3.1.9   3.2.0  my_ionic_app
@ionic/pro                              1.0.20  1.0.20   2.0.3  my_ionic_app
@ionic/storage                           2.1.3   2.1.3   2.2.0  my_ionic_app
angularfire2                       5.0.0-rc.10   5.0.1   5.0.1  my_ionic_app
cordova-android                          7.0.0   7.0.0   7.1.1  my_ionic_app
cordova-plugin-crop                      0.3.1   0.3.1   0.4.0  my_ionic_app
cordova-plugin-ionic-keyboard            2.0.5   2.1.2   2.1.2  my_ionic_app
cordova-plugin-ionic-webview            1.1.19   1.2.1   2.1.4  my_ionic_app
cordova-sqlite-storage                   2.3.1   2.4.0   2.4.0  my_ionic_app
firebase                                 5.0.4   5.5.1   5.5.1  my_ionic_app
ionicons                                 3.0.0   3.0.0   4.4.3  my_ionic_app
typescript                               2.6.2   2.6.2   3.0.3  my_ionic_app

CORDOVA PLUGIN LIST OUTPUT

com-badrit-base64 0.2.0 "Base64"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-facebook4 3.0.0 "Facebook Connect"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-googleplus 5.3.0 "Google SignIn"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-media-capture 3.0.2 "Capture"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-streaming-media 2.1.2 "StreamingMedia"
cordova-plugin-telerik-imagepicker 2.2.1 "ImagePicker"
cordova-plugin-video-editor 1.1.3 "VideoEditor"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.4.0 "Cordova sqlite storage plugin"
info.protonet.imageresizer 0.1.1 "Image Resizer"
twitter-connect-plugin 0.6.0 "Twitter Connect"

anyone can help me please?

thanks in advance.

Please refer this link github.com/jeduan/cordova-plugin-facebook4/issues/599, it may help you. — Sandy.....
thank you for your help but the problem not with install plugin or build android. the problem is app launch with black screen and no errors. if i change app id in config.xml file my app works good. if i back to old ID the problem is back. i tried all solutions in refer link. — user3121348

user3121348 user3121348 · Accepted Answer · 2018-09-23T03:48:02

After many tests and research, this steps solve the issue.

Solution

Remove the plugin cordova-plugin-facebook4. so run:

ionic cordova plugin remove cordova-plugin-facebook4

Remove android platform. so run:

ionic cordova platform rm android

re-add plugin cordova-plugin-facebook4 with SDK VERSION to 4.35.0, and FACEBOOK ANDROID SDK VERSION to 4.35.0 with --save tag. run:

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME" --variable ANDROID_SDK_VERSION="4.35.0" --variable FACEBOOK_ANDROID_SDK_VERSION="4.35.0" --save

then, re-add android platform:

ionic cordova platform add android

ionic 3: gray dark screen with Android App on device

1 Answers