Change default black background colour of banner ad

[JasonPan]

MAX Module Version

6.3.0

React Native Version

0.72.6

Device/Platform Info

iOS 17.3.1

Current Behavior

I am trying to set the background colour of the banner ad to be transparent (or another colour) instead of the default black colour. I have followed the docs here

However, it does not seem to be taking effect. How can I achieve this?

Expected Behavior

I want to set the background colour of the banner ad, if it does not stretch all the way across the phone's width. By default, it appears black.

How to Reproduce

1. Create AdView component as described here
2. Try to set the background colour, e.g.

// Set background or background color for banners to be fully functional // In this case we are setting it to black - PLEASE USE HEX STRINGS ONLY BannerAd.setBackgroundColor(BANNER_AD_UNIT_ID, '#000000');

Additional Info

No response

[JasonPan]

A slightly adjacent question - ideally, there would be no black border at all - I don't experience this directly with AdMob, but for some reason, with the AppLovin SDK, the width doesn't seem to fully stretch. Any ideas?

AppLovin sizes the height to 50px, but AdMob does 61px. Both views have the width set to the device's width, and I have enabled adaptive banners.

AppLovin:

AdMob:

[JasonPan]

Hey @alhiwatan / @thomasmso - thanks for the prompt work on that PR. I've pulled the latest code and the adaptive sizing works great for AdMob now! However, I did notice a small issue when the networks switch (I suppose the container still retains the adaptive height). For me, it's not a big deal but just thought I'd raise it here in case it's an easy fix

Also, re the ad background for the non-adaptive banner ads, I tried setting it as red to see the effect clearly - as you can see in the screenshot below, it changes the container's background, but not the black fill on the sides of the ad.

• Is this expected behaviour - e.g. because the ad itself contains the black background perhaps?
• If so, is there another way to configure the background colour to be another colour (preferably for me, transparent)?

[JasonPan]

From a little more testing, I see actually there seems to be two causes

1. AppLovinBannerAd.setExtraParameter(bannerAdUnitId, "adaptive_banner", "true"); always enables the adaptive height (e.g. 61px for a 393px-width device), independent of whether the ad's network is AdMob or not. Is this something we can add into the SDK, or some way for the consumer of the SDK to configure this? (e.g. detect if the ad network is AdMob, then enable this adaptive banner flag). I assume though because of mediation, it needs to be done on a per-ad instance.
2. When switching between networks (e.g. via automatic mediation or debugger), sometimes it causes the AdMob ad instances to not correctly size (even though the container is correctly 61px, the ad content itself remains at 50px). I assume it might be something to do with how the ads are requested, not sure. You can see an example of this in the below screenshot - the top ad instance correctly fills the adaptive container (393 x 61), but the bottom one is centred vertically in the adaptive container (393 x 61), but since the ad itself is 393 x 50, there remains some spacing above and below.

Keen to hear your thoughts on both of these, not sure if I'm just not correctly using the SDK as intended

[alhiwatan]

@JasonPan, thanks for checking this out quickly.

Our test ad has a black background on the sides, so this is expected. But a live one depends on the ad itself. You can use a transparent color for the background. Some ads may have a transparent background.

BannerAd.setBackgroundColor(adUnitId, '#00000000');

[alhiwatan]

1. When you detect which network it is for in the middle of the session, the ad is already shown in the current implementation. But you should turn it off for a non-AdMob ad unit.

2. The AdMob test ads show you the same content for different sizes, but the actual ads have content that meets the specific size. Could you try this with live ads?

[alhiwatan]

Fixed in the release 6.4.0.