capacitor-community / capacitor-community/admob

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

Open
#272 1 comment 3 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
296
Forks
97
Avg merge
2d 6h
Merged PRs (30d)
7

Description

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

```js
async initializeAds(): Promise {
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
![image](https://github.com/capacitor-community/admob/assets/644550/8ac6e7f2-0efc-49ad-81d9-943f2127de32)

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

![image](https://github.com/capacitor-community/admob/assets/644550/0ad260be-7fd1-416d-adbc-0ef5d8addfbb)

It looks like this is related to:
- https://github.com/capacitor-community/admob/issues/191 (got no reply)
- https://github.com/capacitor-community/admob/issues/160 (open, fix merged)
- https://github.com/capacitor-community/admob/issues/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 https://github.com/capacitor-community/admob/issues/33#issuecomment-708982270 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

Contributor guide

Open the contributing guide

Research direction

Start with the README.MD banner setup using AdMob.showBanner and reproduce it in an Ionic sidemenu app on iOS 16.6, comparing the iOS behavior with Android. The work is done when a bottom banner no longer covers scrollable content or bottom buttons and remains positioned below the usable content area.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.