Android splashscreen fade animation on hide not working

Ionic Framework ionic-v3
1

In my app I use @ionic-native/splash-screen module. I hide splashscreen by this logic

    public platformReady(): Promise<void> {
        return this._platform.ready() 
            .then(() => this._appService.getStartPage())
            .then((page: any) => this.rootPage = page)
            .then(() => new Promise((resolve: Function): number => setTimeout(resolve, 500)))
            .then(() => this._splashScreen.hide())
            .catch((error: Error) => alert(JSON.stringify(error)));
    }

My config.xml settings

    <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="StatusBarStyle" value="default" />
    <preference name="SplashScreen" value="screen" />
    <preference name="orientation" value="default" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="1000" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreenDelay" value="10000" />

    <plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />

On ios devices all works fine, app loads, then splashscreen fade out during 1 second. But on android devices app loads, then, without fade, I have white screen blink and then app view shows.

ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 6.5.0 
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.3.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.6.0
    npm        : 5.6.0 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235

Tested on 6 different android real devices with android 4.2.2 to 8.0

Any idea why this happens? Thanks in advance

2

Found solution. Problem was in cordova-plugin-android-permissions. On android 6+ (maybe android 5 too, I don’t have it on my devices) user should accept permissions manually. In application permissions request looks like alert view. And this alert automatically stops splashscreen (even if you don’t hide splashscreen automatically and don’t call hide method yet) and broke fade out animation. Also this permissions request broke splashscreen even if permissions already added.

So solution is to request permissions after splashScreen.hide() after timeout delay equal to fade out timeout.

3

Gentlemen, what @snikh proposed does work. I just wrapped it with the code to align it bit more.
I am using Ionic 3.

#1.In config.xml

    <preference name="SplashScreen" value="screen" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="FadeSplashScreenDuration" value="1000" />
    <preference name="ShowSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="FadeSplashScreen" value="true" />

#2. In app.components.ts

import { SplashScreen } from "@ionic-native/splash-screen";

#3. In app.components.ts add a param in constructor.

constructor(
         ...
        public splashScreen: SplashScreen,
        ...
      )

#3. In app.components.ts after platform.ready().then(() => { do

 setTimeout(()=>{
          this.splashScreen.hide();  
        },1000);

and nothing else in regards of splash screen.
NOTE!!!: As @snikh said the setTimeout delay should be equal to FadeSplashScreenDuration param value in config.xml

#4. In app.module.ts add

import { SplashScreen } from "@ionic-native/splash-screen";

and put SplashScreen in providers array.

#5. In cmd run ionic cordova run android --prod having your android phone plugged with no previous build installed(just to be on the safe side).

Conclusion:
The code above made the smooth transition from the Splash screen, that will fade smoothly to you start up page. No white screen is shown at all. Hope this would be helpful.

5 Likes
4

This helps me too ! :slight_smile:

Thanks for that!

5

Thanks pavel_savchuk, works for me too.