Search code examples
ionic-frameworkadmobionic4

Screen is blinking when an AdMob banner is displayed in ioinc?


Once the AdMob banner is displayed, it blinks the screen knowing that there is no error reporting in the console!

The screen viewing the ad includes a spinner that runs until some data are fetched from an API, so I kept the spinner loading until the Ad is present to avoid blinking, but the screen still blinks when Ad is shown.

This is a sample from my code:

    this.admobFree.banner.config(ConfigData.bannerAds.config);

    // autoShow = true in config.
    this.admobFree.banner.prepare().then(()=>{
           // Boolean variable that is assigned to the *ngIf directive to keep the spinner until the 
           // banner is loaded.
          // <ion-spinner name="crescent" *ngIf="!isDataLoaded&&!(isBannerLoaded)"></ion-spinner>
           isBannerLoaded=true;
});

What is causing the screen blink when a banner is viewed? And how to solve this?!

(ionic 4)


Solution

  • It seems that it is a fault in the ionic AdMob plugin where this issue is reported on the ionic forum without proposed solutions! https://forum.ionicframework.com/t/admob-screen-flash-on-load/25526

    I had solved this by waiting for the AdMob banner to be shown and then display my actual view where this is controlled by using the *ngIf directive and a Boolean variable like this:

    isContentVisible: boolean=false;
    ....
    this.admobFree.banner.show().then(()=>{
       this.isContentVisible=true;
    });
    

    This will decrease the blink by 95%, but it may take some seconds to display if the internet connection is weak!

    By the way the blink is slight, and will not be a clearly noticed issue, but to be professional it must be solved!

    Hope the the ionic AdMob developers will solve that!