Banner Ad: TOP_CENTER Not showing on iOS

[SpellChucker]

I am trying to show a banner ad in the TOP_CENTER position but it will not show. the BOTTOM_CENTER works but it also covers the tabs up. Any ideas?

[migtam628]

Like @SpellChucker here, I'm having the same issue. BOTTOM_CENTER works like a charm but also covers the tabs, and I tried hasTabBar and tabBarHeight and nothing worked , but TOP_CENTER and CENTER are not working. @SpellChucker did you ever fix the issue?

[migtam628]

hey @SpellChucker, I found a workaround.

as you can see the Plugin.swift asks for margin and not for tabBarHeight

https://github.com/rahadur/capacitor-admob/blob/47c82fa998a6c5bd493217a05a9c99f421e9e817/ios/Plugin/Plugin.swift#L34

let adMargin = call.getString("margin") ?? "0"

So what i did was this.
I added margin?: string to AdOption interface declaration file and applied the margin desired. For TOP_CENTER I applied "150" and for BOTTOM_CENTER i did "50".
It's working flawlessly.

Hope this helps.

[AhSem]

Confirmed that TOP_CENTER and CENTER are not working. Banner app does not show up.

@migtam628 , can you elaborate further of the workaround? Because the url you provided no longer valid.

[SpellChucker]

@AhSem what @migtam628 did works well, 150 seems to be the sweet spot for TOP_CENTER as far as margin goes. You'll need to add margin?: string to the declaration file within the AdOptions interface here: https://github.com/rahadur/capacitor-admob/blob/master/src/definitions.ts#L98 and specify 150 as the margin if you want TOP_CENTER. This file will be within your node_modules directory under capacitor-admob/dist/esm/definitions.d.ts.

[migtam628]

@AhSem the workaround is exactly what a @SpellChucker stated in his previous comment.

Add ‘margin?: string’ to the declaration file within the ‘AdOptions’ interface

Then use the margin prop in your ‘Banner Options’

like @SpellChucker said, ‘150’ is a perfect spot for ‘TOP_CENTER’ and for ‘BOTTOM_CENTER’ you can do ‘50’.

[AhSem]

Thank you for the feedback @SpellChucker and @migtam628 . By right we shouldn't directly change the file in node_modules right? So there will be a new release for this plugin to include the "margin" property in AdOptions interface?

Edit: I found that instead of adding the margin?: string to the declaration file within AdOptions interface, I can directly pass the margin by setting the variable to type any . As below:

const options: any = { ... , margin: '150' }; Admob.showBannner(options);