Splashscreen doesn't show up in Ionic - ionic-framework

The splashscreen doesn't show on my app when doing ionic run android -lcs.
The splashscreen plugin is installed. I've run ionic resources successfully.
The app launch with a black screen instead of the splash.
Typing navigator.splashscreen.show() in the console doesn't work.
$ cordova --version
6.5.0
$ ionic --version
2.2.1
Config.xml:
<preference name="SplashScreen" value="splash"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="orientation" value="portrait"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="FadeSplashScreenDuration" value="250"/>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.2"/>
ionic version:
$ ionic info
Your system information:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.4.0
Xcode version: Not installed

Bug!
When I replace
<preference name="SplashScreen" value="splash"/>
by
<preference name="SplashScreen" value="splash"/>
it seems to work...

Related

Ionic app gets stuck after splash screen for 0.005% of users

I'm having an issue in my Ionic app. After the splash screen the user cannot tap on any buttons, and can't interact with the app at all. It's either stuck or simply non-responsive.
This happens consistently for those devices, therefore they are never able to sign up.
This is my ionic info:
Ionic CLI : 5.2.3 (C:\Users\Simon K\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.11.10
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic 5.4.4, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 14 other plugins)
This is being reported by users on older devices. Most recently on a Samsung S5. I'm not sure if it's due to an older phone just freezing on our app, or perhaps it's some sort of network setting? Where it prevents Ionic from being responsive.
My config settings:
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="29" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="AndroidLaunchMode" value="singleTask" />
If there is anything else I can provide that might be helpful, please let me know. I am at a loss as to how such a problem can be fixed as I have not been able to replicate the issue.
Is this potentially an Ionic issue?
Run app on the device on which you are getting this issue check logs using chrome://inspect

White screen shows instead of splash screen --ionic 4

I am working on a project in ionic 4 ,when i try to change the icon and splash screen of my own .i replace my icon with icon.png and splash with splash.png after ionic Cordova resources run. app icon is successfully replaced with my new icon in icon folder and splash screen also replaced with my new screen in splash folder, after build android the icon is changed but the splash screen is not visible at all only a white screen shows for 5-7 sec and then show my app's home page. if anyone know how to solve that please let my know.
I remember struggling with that issue as well, it was solved by adding some preferences in the config.xml.
This is in my current (ionic 3) project, hope this helps.
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="FadeSplashScreen" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
EDIT
Also make sure you have the cordova splashscreen plugin installed
ionic cordova plugin add cordova-plugin-splashscreen
npm install --save #ionic-native/splash-screen

Splash Screen on Ionic 3 android platform not working

I've been looking for an answer for like 3 days and can't find the answer for this, I have installed the plugin(cordova-plugin-splashscreen) and downgrade the plugin latest to 2.0.0, relocated my images and rename my folder /resources to /res, put it to platforms/android/src/main/res folder still nothing is working. here's my config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/icon/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/icon/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/icon/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/icon/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/icon/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/icon/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/icon/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/icon/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/icon/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/icon/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/icon/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/icon/drawable-port-xxxhdpi-screen.png" />
</platform>
<plugin name="cordova-plugin-splashscreen" spec="^2.0.0" />
When you create a new project from the CLI like for example:
ionic start testProject blank
you get a default splashscreen that works.
Add platforms:
ionic cordova platform add android
ionic cordova platform add ios
Don't change anything except for the splash.png image in the \resources folder.
Then run the command:
ionic resources
This will create all the resources and put them in the correct folders for all paltforms and update the config.xml file.
Run the project on your Android device:
ionic cordova run android --device
Use cordova-plugin-splashscreen version 4.0.1.
config.xml
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
<platform name="android">
<allow-intent href="market:*"/>
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png"/>
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png"/>
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png"/>
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png"/>
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png"/>
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png"/>
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png"/>
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png"/>
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png"/>
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png"/>
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png"/>
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png"/>
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png"/>
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png"/>
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png"/>
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png"/>
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png"/>
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png"/>
</platform>
Put the images in your project resource folder
Delete your www folder and try to run again
Hopefully it will work.

How to remove white blank screen of splash from the ionic2 application?

I am trying to remove default splash screen from ionic 2 application, and for that I used the property <preference name="SplashScreen" value="none" /> and the command cordova plugin -rm cordova-plugin-splashscreen, although that combination removed the splash but not completely, and I am still getting a blank white screen while launching the application.
How do I get rid of from the blank white screen?
Config.xml
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashReloadOnOrientationChange" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
add these above lines
And in app.component.ts:
if (this.splashScreen) {
setTimeout(() => {
this.splashScreen.hide();
}, 100);
}
also build the app using command
ionic cordova build andorid --prod
Put it on the second line of your main.ts:
import { enableProdMode } from '#angular/core';
Then, before ...bootstrapModule... in your main.ts add this line:
enableProdMode();
I hope it will work.

Phonegap build email plugin not recognized

I built an app that utilizes the phonegap build plugin for composing emails with attachments. The app is working well on iOS devices but email is not working on Android devices. Here is part of my config.xml:
<preference name="disable-cursor" value="true" />
<preference name="orientation" value="default" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="permissions" value="none"/>
<gap:platform name="android" />
<preference name="loadUrlTimeoutValue" value="700000" />
<gap:config-file platform="android" parent="/manifest"><application android:hardwareAccelerated="false"/></gap:config-file>
<icon src="icon.png" hover="true"/>
<icon src="icon.png" default="true" width="57" height="57"/>
<icon src="icons/android/mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="icons/android/hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="icons/android/xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="icons/android/xxhdpi.png" gap:platform="android" gap:qualifier="xxhdpi" />
<gap:splash src="splash.png" width="270" height="480" />
<gap:splash src="default-568h#2x.png" gap:platform="ios" width="640" height="1136"/>
<splash src="splash.png" />
<feature name="http://api.phonegap.com/1.0/file" />
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/contacts"/>
<plugin name="com.jcjee.plugins.emailcomposer" spec="1.4.6" source="pgb" />
<plugin name="cordova-plugin-file" spec="3.0.0" source="pgb"/>
and my javascript that calls the email composer:
window.plugins.emailComposer.showEmailComposerWithCallback(null, email_subjectdef, "", email_default, [], [], true, [compatibleAttachment, compatibleAttachment2]);
I am currently trying the jcjee plugin but also tried the deappplant plugin.
The error I receive on the device is:
"cannot read property 'emailcomposer' of undefined.
Thanks for your help!
I was able to determine what the error was an the email plugin is working fine on Android. I had been using an iframe to display a PDF file. Apparently Android 4.4.2 does not like iframes, at least not in a Phonegap Build project. Removing the iframe solved my problem.