Banner appears with testing = true but not in production

[TriVeDev]

Hi all,

In debug mode, the banner appears fine on the screen. When i set the "testing" boolean to false, the banner don't appear anymore. Sometimes if i tap the banner area frantically, it may appear...

I tried the demo code and it works just fine.

I really can't figure why it doesn't work while not in testing mode.

My component code:
Home.component.ts:

import { Component, OnInit, NgZone, AfterViewInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { Trip } from "../shared/trip";
import { Folder, File, path } from "tns-core-modules/file-system";
import * as Toast from "nativescript-toast";
import * as Admob from "nativescript-admob";
import { isIOS } from "tns-core-modules/platform";

declare var android: any;

var Sqlite = require("nativescript-sqlite");

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["home.component.scss"]
})
export class HomeComponent implements OnInit, AfterViewInit {

    private testing: boolean = false;
    private androidBannerId: string = "ca-app-pub-4388645964603052/7349200111";
    private iosBannerId: string = "ca-app-pub-4388645964603052/5489054038";
    private BannerIdTest: string = "ca-app-pub-3940256099942544/6300978111";

    private database: any;

    public trips: Array<Trip>;

    public isOnTrip: boolean = false;
    private startDate: Date;
    private stopDate: Date;

    constructor(private _ngZone: NgZone) {

    }

    ngOnInit(): void {
        this.databaseFetch();
    }

    ngAfterViewInit(): void {
        // console.log("ngAfterViewInit");

        setTimeout(() => {
            this.createBanner();
        }, 1500);

    }

...

    public createBanner() {
        Admob.createBanner(
            {
                testing: this.testing,
                size: Admob.AD_SIZE.SMART_BANNER,
                androidBannerId: this.testing
                    ? this.BannerIdTest  // global test banner id
                    : this.androidBannerId, // our registered banner id
                // Android automatically adds the connected device as test device with testing:true, iOS does not
                iosBannerId: this.iosBannerId,
                // iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
                margins: {
                    bottom: isIOS ? 50 : 0
                },
                keywords: ["travel", "time"]
            }).then(function () {
                // console.log("admob createBanner done");
            }, function (error) {
                // console.log("admob createBanner error: " + error);
            });
    }
}

home.component.html:

<ActionBar title="My app">
    <ActionItem text="Export" ios.position="right" (tap)="onExportTap()"></ActionItem>
</ActionBar>

<StackLayout orientation="vertical" class="page">
    <GridLayout columns="*, *" class="btn-container">
        <Button text="Start" col="0" (tap)="onStartTap()" class="btn" isEnabled="{{ !isOnTrip }}"></Button>
        <Button text="Stop" col="1" (tap)="onStopTap()" class="btn" isEnabled="{{ isOnTrip }}"></Button>
    </GridLayout>
    <GridLayout columns="2*, 2*, *" class="header">
        <Label text="Start date" col="0" textWrap="true"></Label>
        <Label text="Stop date" col="1" textWrap="true"></Label>
        <Label text="Duration" col="2" textWrap="true"></Label>
    </GridLayout>
    <StackLayout>
        <ListView [items]="trips" class="list list-group">
            <ng-template let-trip="item" let-i="index">
                <GridLayout columns="2*, 2*, *" class="list-group-item" (longPress)="onLongPress(i)">
                    <Label text="{{ trip.startDate | date: 'yy/MM/dd HH:mm:ss' }}" col="0" textWrap="true"></Label>
                    <Label text="{{ trip.stopDate | date: 'yy/MM/dd HH:mm:ss' }}" col="1" textWrap="true"></Label>
                    <Label text="{{ trip.tripTime }}" col="2" textWrap="true"></Label>
                        </GridLayout>
                </ng-template>
            </ListView>
        </StackLayout>
</StackLayout>

home.component.scss:

$btn-radius: 20;
$btn-margin: 10px;
$red: #ff0000;

.page {
    height: 100%;
}



.btn-container {
    margin: 1%;
    height: 10%;
}

.header {
    height: 5%;
    color: black;
    text-align: center;
}

.list {
    height: 100%;
    text-align: center;
}


.btn {

    background-color: #56a7c7;
    border-radius: $btn-radius $btn-radius $btn-radius $btn-radius;
    color: black;
    margin: $btn-margin $btn-margin $btn-margin $btn-margin;

    &:active {
        background-color: #36697e;
    }

    &:disabled {
        background-color: gray;
    }

}

Any idea?

Regards,

Tristan

[razorsyntax]

Is it possible you might have a race condition here? Perhaps using the (loaded)="onDOMLoad($event)" could save you from needing the setTimeout?

setTimeout(() => { this.createBanner(); }, 1500);

[Darkkell]

@TriVeDev did you solve it? I have the same issue