iOS banner advertisement at bottom of screen floats and covers bottom page content

[basvdijk]

Describe the bug
When showing a banner on iOS at the bottom using the code from the README.MD:

    async initializeAds(): Promise<void> {
        const { status } = await AdMob.trackingAuthorizationStatus();

        await AdMob.initialize({
            initializeForTesting: true,
        });

        const options: BannerAdOptions = {
            adId: 'ca-app-pub-xxxxxxxxx/xxx',
            adSize: BannerAdSize.ADAPTIVE_BANNER,
            position: BannerAdPosition.BOTTOM_CENTER,
            margin: 0,
            isTesting: true,
            // npa: true
        };
        await AdMob.showBanner(options);
    }

It covers the bottom content of the webpage

On Android the same code works fine and the banner is positioned below the scrollable content area:

It looks like this is related to:

• Banner floating and covering buttons #191 (got no reply)
• iOs banner overlapping content on iPhone with rounded corners #160 (open, fix merged)
• The content is covered by the banner #33 (closed)

Sites mentioning this issue as well:

• https://www.reddit.com/r/ionic/comments/zyintl/how_do_i_fix_a_capacitor_community_admob_banner/

If seems that #33 (comment) this code piece fixes the issue, but can't imagine this is the preferred way to do so.

To Reproduce

• Create a new Ionic app for example the sidemenu template
• Add this AdMob plugin as specified in the README.MD

Expected behavior
I expect the banner to be below the scrollable area on iOS. This allows buttons on the bottom to be tappable

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: iOS 16.6

[distante]

@rdlabo just ping you here.