From 45cd51c398278f466ec702ea971fe00fb4bad0b0 Mon Sep 17 00:00:00 2001
From: youssef eddibili <youssef.eddibili@typology.com>
Date: Mon, 23 Dec 2024 01:19:55 +0100
Subject: [PATCH] feat: adaptive banner with container width and adaptive
 height

---
 RNGoogleMobileAdsExample/App.tsx              | 121 ++++---
 ...iveGoogleMobileAdsBannerAdViewManager.java |  58 +++-
 .../ReactNativeGoogleMobileAdsCommon.java     |  52 ++-
 .../common/ReactNativeAdView.java             |  42 +++
 .../RNGoogleMobileAdsBannerComponent.h        |   4 +
 .../RNGoogleMobileAdsBannerComponent.m        |  57 +++-
 .../RNGoogleMobileAdsBannerView.h             |   2 +
 .../RNGoogleMobileAdsBannerView.mm            |  78 +++--
 .../RNGoogleMobileAdsBannerViewManager.mm     |   2 +
 .../RNGoogleMobileAdsCommon.h                 |   4 +-
 .../RNGoogleMobileAdsCommon.mm                |  29 +-
 src/ads/BaseAd.tsx                            | 299 ++++++++++--------
 ...oogleMobileAdsBannerViewNativeComponent.ts |   1 +
 src/types/BannerAdProps.ts                    |   5 +
 14 files changed, 518 insertions(+), 236 deletions(-)

diff --git a/RNGoogleMobileAdsExample/App.tsx b/RNGoogleMobileAdsExample/App.tsx
index de6ab97d..3eb8dc58 100644
--- a/RNGoogleMobileAdsExample/App.tsx
+++ b/RNGoogleMobileAdsExample/App.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   Button,
   Platform,
@@ -8,7 +8,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import {Test, TestRegistry, TestResult, TestRunner, TestType} from 'jet';
+import { Test, TestRegistry, TestResult, TestRunner, TestType } from 'jet';
 
 import MobileAds, {
   type PaidEvent,
@@ -44,7 +44,7 @@ class AppOpenTest implements Test {
 
   constructor() {
     // Current no way in jet-next to re-render on async completion or to delay render? But still can log it
-    this.adListener = appOpen.addAdEventsListener(({type, payload}) => {
+    this.adListener = appOpen.addAdEventsListener(({ type, payload }) => {
       console.log(`${Platform.OS} app open ad event: ${type}`);
       if (type === AdEventType.PAID) {
         console.log(payload);
@@ -119,7 +119,7 @@ class InterstitialTest implements Test {
 
   constructor() {
     // Current no way in jet-next to re-render on async completion or to delay render? But still can log it
-    this.adListener = interstitial.addAdEventsListener(({type, payload}) => {
+    this.adListener = interstitial.addAdEventsListener(({ type, payload }) => {
       console.log(`${Platform.OS} interstitial ad event: ${type}`);
       if (type === AdEventType.PAID) {
         console.log('Paid', payload);
@@ -182,12 +182,64 @@ class InterstitialTest implements Test {
   }
 }
 
+class BannerContainer extends React.Component<{ bannerAdSize: string }, { enableContainerAdaptiveMode: boolean }> {
+  state = {
+    enableContainerAdaptiveMode: true
+  }
+  bannerRef = React.createRef();
+
+
+  render(): React.ReactNode {
+    return (
+      <>
+        <View style={{ width: "50%"}}>
+          <BannerAd
+            ref={this.bannerRef}
+            unitId={
+              this.props.bannerAdSize.includes('ADAPTIVE_BANNER')
+                ? TestIds.ADAPTIVE_BANNER
+                : TestIds.BANNER
+            }
+            size={this.props.bannerAdSize}
+            adaptiveMode={this.state.enableContainerAdaptiveMode ? "CONTAINER" : "MAIN_SCREEN"}
+            onPaid={(event: PaidEvent) => {
+              console.log(
+                `Paid: ${event.value} ${event.currency} (precision ${RevenuePrecisions[event.precision]
+                }})`,
+              );
+            }}
+          />
+        </View>
+        <Button
+          title="reload"
+          onPress={() => {
+            this.bannerRef.current?.load();
+          }}
+        />
+        <Button
+          title={
+            this.state.enableContainerAdaptiveMode
+              ? "Adapt to main screen"
+              : "Adapt to container"
+          }
+          onPress={() => {
+            this.setState(state => ({
+              enableContainerAdaptiveMode: !state.enableContainerAdaptiveMode
+            }))
+          }}
+        />
+      </>
+
+    )
+  }
+}
+
 class BannerTest implements Test {
   bannerAdSize: BannerAdSize | string;
 
-  constructor(bannerAdSize) {
+
+  constructor(bannerAdSize: BannerAdSize | string) {
     this.bannerAdSize = bannerAdSize;
-    this.bannerRef = React.createRef();
   }
 
   getPath(): string {
@@ -205,30 +257,11 @@ class BannerTest implements Test {
 
   render(onMount: (component: any) => void): React.ReactNode {
     return (
-      <View ref={onMount}>
-        <BannerAd
-          ref={this.bannerRef}
-          unitId={
-            this.bannerAdSize.includes('ADAPTIVE_BANNER')
-              ? TestIds.ADAPTIVE_BANNER
-              : TestIds.BANNER
-          }
-          size={this.bannerAdSize}
-          onPaid={(event: PaidEvent) => {
-            console.log(
-              `Paid: ${event.value} ${event.currency} (precision ${
-                RevenuePrecisions[event.precision]
-              }})`,
-            );
-          }}
-        />
-        <Button
-          title="reload"
-          onPress={() => {
-            this.bannerRef.current?.load();
-          }}
-        />
-      </View>
+      <BannerContainer
+        ref={onMount}
+        bannerAdSize={this.bannerAdSize}
+      />
+
     );
   }
 
@@ -291,7 +324,7 @@ class RewardedTest implements Test {
 
   constructor() {
     // Current no way in jet-next to re-render on async completion or to delay render? But still can log it
-    this.adListener = rewarded.addAdEventsListener(({type, payload}) => {
+    this.adListener = rewarded.addAdEventsListener(({ type, payload }) => {
       console.log(`${Platform.OS} rewarded ad event: ${type}`);
       if (type === AdEventType.PAID) {
         console.log(payload);
@@ -371,15 +404,14 @@ class RewardedInterstitialTest implements Test {
   constructor() {
     // Current no way in jet-next to re-render on async completion or to delay render? But still can log it
     this.adListener = rewardedInterstitial.addAdEventsListener(
-      ({type, payload}) => {
+      ({ type, payload }) => {
         console.log(`${Platform.OS} rewarded interstitial ad event: ${type}`);
         if (type === AdEventType.PAID) {
           console.log(payload);
         }
         if (type === AdEventType.ERROR) {
           console.log(
-            `${Platform.OS} rewarded interstitial error: ${
-              (payload as Error).message
+            `${Platform.OS} rewarded interstitial error: ${(payload as Error).message
             }`,
           );
         }
@@ -496,7 +528,7 @@ class AdConsentTest implements Test {
 }
 
 const InterstitialHookComponent = React.forwardRef<View>((_, ref) => {
-  const {load, show, error, isLoaded, isClicked, isClosed, isOpened, revenue} =
+  const { load, show, error, isLoaded, isClicked, isClosed, isOpened, revenue } =
     useInterstitialAd(TestIds.INTERSTITIAL);
   useEffect(() => {
     load();
@@ -707,7 +739,7 @@ class RewardedInterstitialHookTest implements Test {
 }
 
 const AppOpenHookComponent = React.forwardRef<View>((_, ref) => {
-  const {load, show, error, isLoaded, isClicked, isClosed, isOpened} =
+  const { load, show, error, isLoaded, isClicked, isClosed, isOpened } =
     useAppOpenAd(TestIds.APP_OPEN);
   useEffect(() => {
     load();
@@ -802,13 +834,18 @@ const GAMBannerComponent = React.forwardRef<
     unitId: string;
     sizes: GAMBannerAdSize[];
   }
->(({unitId, sizes}, ref) => {
+>(({ unitId, sizes }, ref) => {
   const bannerRef = useRef<GAMBannerAd>(null);
   const recordManualImpression = () => {
     bannerRef.current?.recordManualImpression();
   };
   return (
-    <View ref={ref}>
+    <View
+      style={{
+        backgroundColor: 'red',
+        width: 390
+      }}
+      ref={ref}>
       {/* To test FLUID size ad, use `TestIds.GAM_NATIVE` */}
       <GAMBannerAd
         ref={bannerRef}
@@ -817,6 +854,7 @@ const GAMBannerComponent = React.forwardRef<
         requestOptions={{
           requestNonPersonalizedAdsOnly: true,
         }}
+        adaptiveMode='CONTAINER'
         manualImpressionsEnabled={true}
         onAdFailedToLoad={(error: Error) => {
           console.log(`${Platform.OS} GAM banner error: ${error.message}`);
@@ -832,7 +870,7 @@ class GAMBannerTest implements Test {
       unitId: string;
       sizes: GAMBannerAdSize[];
     },
-  ) {}
+  ) { }
 
   getPath(): string {
     return (
@@ -886,12 +924,11 @@ class GAMInterstitialTest implements Test {
 
   constructor() {
     // Current no way in jet-next to re-render on async completion or to delay render? But still can log it
-    this.adListener = gamInterstitial.addAdEventsListener(({type, payload}) => {
+    this.adListener = gamInterstitial.addAdEventsListener(({ type, payload }) => {
       console.log(`${Platform.OS} GAM interstitial ad event: ${type}`);
       if (type === AdEventType.ERROR) {
         console.log(
-          `${Platform.OS} GAM interstitial error: ${
-            (payload as Error).message
+          `${Platform.OS} GAM interstitial error: ${(payload as Error).message
           }`,
         );
       }
diff --git a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java b/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
index 07ea925d..381b5585 100644
--- a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
+++ b/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
@@ -16,7 +16,6 @@
  * limitations under the License.
  *
  */
-
 import android.app.Activity;
 import android.view.ViewGroup;
 import androidx.annotation.NonNull;
@@ -73,7 +72,15 @@ public String getName() {
   @Nonnull
   @Override
   public ReactNativeAdView createViewInstance(@Nonnull ThemedReactContext themedReactContext) {
-    return new ReactNativeAdView(themedReactContext);
+    ReactNativeAdView reactViewGroup = new ReactNativeAdView(themedReactContext);
+
+    reactViewGroup.setWidthChangedConsumer(
+        (width) -> {
+          this.updateSizes(reactViewGroup);
+          this.requestAd(reactViewGroup);
+        });
+
+    return reactViewGroup;
   }
 
   @Override
@@ -120,23 +127,16 @@ public void setRequest(ReactNativeAdView reactViewGroup, String value) {
 
   @ReactProp(name = "sizes")
   public void setSizes(ReactNativeAdView reactViewGroup, ReadableArray value) {
-    List<AdSize> sizeList = new ArrayList<>();
+    ArrayList<String> sizeList = new ArrayList<>();
+
     for (Object size : value.toArrayList()) {
       if (size instanceof String) {
-        String sizeString = (String) size;
-        sizeList.add(ReactNativeGoogleMobileAdsCommon.getAdSize(sizeString, reactViewGroup));
+        sizeList.add((String) size);
       }
     }
 
-    if (sizeList.size() > 0 && !sizeList.contains(AdSize.FLUID)) {
-      AdSize adSize = sizeList.get(0);
-      WritableMap payload = Arguments.createMap();
-      payload.putDouble("width", adSize.getWidth());
-      payload.putDouble("height", adSize.getHeight());
-      sendEvent(reactViewGroup, EVENT_SIZE_CHANGE, payload);
-    }
-
-    reactViewGroup.setSizes(sizeList);
+    reactViewGroup.setRawSizes(sizeList);
+    this.updateSizes(reactViewGroup);
     reactViewGroup.setPropsChanged(true);
   }
 
@@ -146,6 +146,13 @@ public void setManualImpressionsEnabled(ReactNativeAdView reactViewGroup, boolea
     reactViewGroup.setPropsChanged(true);
   }
 
+  @ReactProp(name = "adaptiveMode")
+  public void setManualImpressionsEnabled(ReactNativeAdView reactViewGroup, String value) {
+    reactViewGroup.setAdaptiveMode(value);
+    this.updateSizes(reactViewGroup);
+    reactViewGroup.setPropsChanged(true);
+  }
+
   @Override
   public void onAfterUpdateTransaction(@NonNull ReactNativeAdView reactViewGroup) {
     super.onAfterUpdateTransaction(reactViewGroup);
@@ -169,6 +176,23 @@ public void onDropViewInstance(@NonNull ReactNativeAdView reactViewGroup) {
     super.onDropViewInstance(reactViewGroup);
   }
 
+  private void updateSizes(ReactNativeAdView reactViewGroup) {
+    List<AdSize> sizeList = new ArrayList<>();
+    for (String size : reactViewGroup.getRawSizes()) {
+      sizeList.add(ReactNativeGoogleMobileAdsCommon.getAdSize(size, reactViewGroup));
+    }
+
+    if (sizeList.size() > 0 && !sizeList.contains(AdSize.FLUID)) {
+      AdSize adSize = sizeList.get(0);
+      WritableMap payload = Arguments.createMap();
+      payload.putDouble("width", adSize.getWidth());
+      payload.putDouble("height", adSize.getHeight());
+      sendEvent(reactViewGroup, EVENT_SIZE_CHANGE, payload);
+    }
+
+    reactViewGroup.setSizes(sizeList);
+  }
+
   private BaseAdView initAdView(ReactNativeAdView reactViewGroup) {
     BaseAdView oldAdView = getAdView(reactViewGroup);
     if (oldAdView != null) {
@@ -282,7 +306,11 @@ private void requestAd(ReactNativeAdView reactViewGroup) {
     AdRequest request = reactViewGroup.getRequest();
     Boolean manualImpressionsEnabled = reactViewGroup.getManualImpressionsEnabled();
 
-    if (sizes == null || unitId == null || request == null || manualImpressionsEnabled == null) {
+    if (sizes == null
+        || sizes.get(0).getWidth() == 0
+        || unitId == null
+        || request == null
+        || manualImpressionsEnabled == null) {
       return;
     }
 
diff --git a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsCommon.java b/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsCommon.java
index 3d24b7e1..5f78f95d 100644
--- a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsCommon.java
+++ b/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsCommon.java
@@ -20,7 +20,6 @@
 import android.os.Bundle;
 import android.util.DisplayMetrics;
 import android.view.Display;
-import android.view.ViewGroup;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
@@ -30,6 +29,7 @@
 import com.google.android.gms.ads.AdRequest;
 import com.google.android.gms.ads.AdSize;
 import com.google.android.gms.ads.admanager.AdManagerAdRequest;
+import io.invertase.googlemobileads.common.ReactNativeAdView;
 import io.invertase.googlemobileads.common.ReactNativeEventEmitter;
 import java.util.ArrayList;
 import java.util.Map;
@@ -40,17 +40,49 @@
 
 public class ReactNativeGoogleMobileAdsCommon {
 
-  static AdSize getAdSizeForAdaptiveBanner(String preDefinedAdSize, ViewGroup reactViewGroup) {
+  static DisplayMetrics getDisplayOutMetrics(ReactNativeAdView reactViewGroup) {
+    Display display =
+        Objects.requireNonNull(((ReactContext) reactViewGroup.getContext()).getCurrentActivity())
+            .getWindowManager()
+            .getDefaultDisplay();
+
+    DisplayMetrics outMetrics = new DisplayMetrics();
+    display.getMetrics(outMetrics);
+
+    return outMetrics;
+  }
+
+  static int getWindowWidth(ReactNativeAdView reactViewGroup) {
+    DisplayMetrics outMetrics =
+        ReactNativeGoogleMobileAdsCommon.getDisplayOutMetrics(reactViewGroup);
+    return (int) (outMetrics.widthPixels / outMetrics.density);
+  }
+
+  static int getViewWidth(ReactNativeAdView reactViewGroup) {
+    DisplayMetrics outMetrics =
+        ReactNativeGoogleMobileAdsCommon.getDisplayOutMetrics(reactViewGroup);
+    return (int) (reactViewGroup.getViewWidth() / outMetrics.density);
+  }
+
+  static AdSize getAdSizeForAdaptiveBanner(
+      String preDefinedAdSize, ReactNativeAdView reactViewGroup) {
 
     try {
-      Display display =
-          Objects.requireNonNull(((ReactContext) reactViewGroup.getContext()).getCurrentActivity())
-              .getWindowManager()
-              .getDefaultDisplay();
+      String adaptiveMode = reactViewGroup.getAdaptiveMode();
+
+      if (adaptiveMode == null) {
+        return new AdSize(0, 0);
+      }
+
+      int adWidth = getViewWidth(reactViewGroup);
 
-      DisplayMetrics outMetrics = new DisplayMetrics();
-      display.getMetrics(outMetrics);
-      int adWidth = (int) (outMetrics.widthPixels / outMetrics.density);
+      if (!adaptiveMode.equals("CONTAINER")) {
+        adWidth = ReactNativeGoogleMobileAdsCommon.getWindowWidth(reactViewGroup);
+      }
+
+      if (adWidth == 0) {
+        return new AdSize(0, 0);
+      }
 
       if ("INLINE_ADAPTIVE_BANNER".equals(preDefinedAdSize)) {
         return AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
@@ -63,7 +95,7 @@ static AdSize getAdSizeForAdaptiveBanner(String preDefinedAdSize, ViewGroup reac
     }
   }
 
-  static AdSize getAdSize(String preDefinedAdSize, ViewGroup reactViewGroup) {
+  static AdSize getAdSize(String preDefinedAdSize, ReactNativeAdView reactViewGroup) {
     if (preDefinedAdSize.matches(
         "ADAPTIVE_BANNER|ANCHORED_ADAPTIVE_BANNER|INLINE_ADAPTIVE_BANNER")) {
       return ReactNativeGoogleMobileAdsCommon.getAdSizeForAdaptiveBanner(
diff --git a/android/src/main/java/io/invertase/googlemobileads/common/ReactNativeAdView.java b/android/src/main/java/io/invertase/googlemobileads/common/ReactNativeAdView.java
index f021aa0b..492b9696 100644
--- a/android/src/main/java/io/invertase/googlemobileads/common/ReactNativeAdView.java
+++ b/android/src/main/java/io/invertase/googlemobileads/common/ReactNativeAdView.java
@@ -5,6 +5,7 @@
 import com.google.android.gms.ads.AdRequest;
 import com.google.android.gms.ads.AdSize;
 import java.util.List;
+import java.util.function.Consumer;
 
 /**
  * Using FrameLayout instead of ReactViewGroup
@@ -18,10 +19,14 @@
 public class ReactNativeAdView extends FrameLayout {
   private AdRequest request;
   private List<AdSize> sizes;
+  private List<String> rawSizes;
   private String unitId;
   private boolean manualImpressionsEnabled;
   private boolean propsChanged;
   private boolean isFluid;
+  private String adaptiveMode;
+  private int viewWidth = 0;
+  private Consumer<Integer> widthChangedConsumer;
 
   @Override
   public void requestLayout() {
@@ -74,6 +79,14 @@ public List<AdSize> getSizes() {
     return this.sizes;
   }
 
+  public void setRawSizes(List<String> rawSizes) {
+    this.rawSizes = rawSizes;
+  }
+
+  public List<String> getRawSizes() {
+    return this.rawSizes;
+  }
+
   public void setUnitId(String unitId) {
     this.unitId = unitId;
   }
@@ -105,4 +118,33 @@ public void setIsFluid(boolean isFluid) {
   public boolean getIsFluid() {
     return this.isFluid;
   }
+
+  public void setAdaptiveMode(String adaptiveMode) {
+    this.adaptiveMode = adaptiveMode;
+  }
+
+  public String getAdaptiveMode() {
+    return this.adaptiveMode;
+  }
+
+  public int getViewWidth() {
+    return this.viewWidth;
+  }
+
+  public void setWidthChangedConsumer(Consumer<Integer> consumer) {
+    this.widthChangedConsumer = consumer;
+  }
+
+  @Override
+  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+    super.onSizeChanged(w, h, oldw, oldh);
+
+    this.viewWidth = w;
+
+    if (!adaptiveMode.equals("CONTAINER") || widthChangedConsumer == null || w == oldw) {
+      return;
+    }
+
+    widthChangedConsumer.accept(viewWidth);
+  }
 }
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h
index f341abcc..09134c50 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h
@@ -24,13 +24,17 @@
 
 @interface RNGoogleMobileAdsBannerComponent : RCTView <GADBannerViewDelegate, GADAppEventDelegate>
 
+@property CGFloat viewWidth;
+
 @property GADBannerView *banner;
 @property(nonatomic, assign) BOOL requested;
 
+@property(nonatomic, copy) NSArray *rawSizes;
 @property(nonatomic, copy) NSArray *sizes;
 @property(nonatomic, copy) NSString *unitId;
 @property(nonatomic, copy) NSDictionary *request;
 @property(nonatomic, copy) NSNumber *manualImpressionsEnabled;
+@property(nonatomic, copy) NSString *adaptiveMode;
 @property(nonatomic, assign) BOOL propsChanged;
 
 @property(nonatomic, copy) RCTBubblingEventBlock onNativeEvent;
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m
index 15901dd8..8922c30a 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m
@@ -23,6 +23,23 @@
 
 @implementation RNGoogleMobileAdsBannerComponent
 
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  CGFloat width = self.frame.size.width;
+
+  if (width == _viewWidth) {
+    return;
+  }
+
+  _viewWidth = width;
+
+  if ([_adaptiveMode isEqualToString:@"CONTAINER"]) {
+    [self updateSizes];
+    [self requestAd];
+  }
+}
+
 - (void)dealloc {
   if (_banner) {
     [_banner removeFromSuperview];
@@ -65,16 +82,8 @@ - (void)setUnitId:(NSString *)unitId {
 }
 
 - (void)setSizes:(NSArray *)sizes {
-  __block NSMutableArray *adSizes = [[NSMutableArray alloc] initWithCapacity:sizes.count];
-  [sizes enumerateObjectsUsingBlock:^(id jsonValue, NSUInteger idx, __unused BOOL *stop) {
-    GADAdSize adSize = [RNGoogleMobileAdsCommon stringToAdSize:jsonValue];
-    if (GADAdSizeEqualToSize(adSize, GADAdSizeInvalid)) {
-      RCTLogWarn(@"Invalid adSize %@", jsonValue);
-    } else {
-      [adSizes addObject:NSValueFromGADAdSize(adSize)];
-    }
-  }];
-  _sizes = adSizes;
+  _rawSizes = sizes;
+  [self updateSizes];
   _propsChanged = true;
 }
 
@@ -93,6 +102,27 @@ - (void)setManualImpressionsEnabled:(BOOL *)manualImpressionsEnabled {
   _propsChanged = true;
 }
 
+- (void)setAdaptiveMode:(NSString *)adaptiveMode {
+  _adaptiveMode = adaptiveMode;
+  [self updateSizes];
+  _propsChanged = true;
+}
+
+- (void)updateSizes {
+  __block NSMutableArray *adSizes = [[NSMutableArray alloc] initWithCapacity:_rawSizes.count];
+  [_rawSizes enumerateObjectsUsingBlock:^(id jsonValue, NSUInteger idx, __unused BOOL *stop) {
+    GADAdSize adSize = [RNGoogleMobileAdsCommon stringToAdSize:jsonValue
+                                              withAdaptiveMode:_adaptiveMode
+                                                 withViewWidth:_viewWidth];
+    if (GADAdSizeEqualToSize(adSize, GADAdSizeInvalid)) {
+      RCTLogWarn(@"Invalid adSize %@", jsonValue);
+    } else {
+      [adSizes addObject:NSValueFromGADAdSize(adSize)];
+    }
+  }];
+  _sizes = adSizes;
+}
+
 - (GADAdSize)getInitialAdSize {
   for (NSValue *sizeValue in _sizes) {
     GADAdSize adSize = GADAdSizeFromNSValue(sizeValue);
@@ -113,6 +143,13 @@ - (void)requestAd {
     return;
   }
 
+  CGSize cgSize = CGSizeFromGADAdSize(GADAdSizeFromNSValue(_sizes[0]));
+
+  if (cgSize.width == 0) {
+    [self setRequested:NO];
+    return;
+  }
+
   [self initBanner:[self getInitialAdSize]];
   [self addSubview:_banner];
   _banner.adUnitID = _unitId;
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.h b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.h
index f7af510c..7f2865ba 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.h
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.h
@@ -16,6 +16,8 @@ NS_ASSUME_NONNULL_BEGIN
 @interface RNGoogleMobileAdsBannerView
     : RCTViewComponentView <GADBannerViewDelegate, GADAppEventDelegate>
 
+@property CGFloat viewWidth;
+
 @property GADBannerView *banner;
 @property(nonatomic, assign) BOOL requested;
 
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm
index b27d1f76..1042eadc 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm
@@ -44,6 +44,27 @@ - (void)prepareForRecycle {
   }
 }
 
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  CGFloat width = self.frame.size.width;
+
+  if (width == _viewWidth) {
+    return;
+  }
+
+  _viewWidth = width;
+
+  const auto &props = *std::static_pointer_cast<RNGoogleMobileAdsBannerViewProps const>(_props);
+
+  NSString *adaptiveMode = [[NSString alloc] initWithUTF8String:props.adaptiveMode.c_str()];
+
+  if ([adaptiveMode isEqualToString:@"CONTAINER"]) {
+    [self updateSizes:props.sizes withAdaptiveMode:adaptiveMode];
+    [self requestAd];
+  }
+}
+
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
   const auto &oldViewProps =
       *std::static_pointer_cast<RNGoogleMobileAdsBannerViewProps const>(_props);
@@ -57,18 +78,12 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     propsChanged = true;
   }
 
-  if (oldViewProps.sizes != newViewProps.sizes) {
-    NSMutableArray *adSizes = [NSMutableArray arrayWithCapacity:newViewProps.sizes.size()];
-    for (auto i = 0; i < newViewProps.sizes.size(); i++) {
-      NSString *jsonValue = [[NSString alloc] initWithUTF8String:newViewProps.sizes[i].c_str()];
-      GADAdSize adSize = [RNGoogleMobileAdsCommon stringToAdSize:jsonValue];
-      if (GADAdSizeEqualToSize(adSize, GADAdSizeInvalid)) {
-        RCTLogWarn(@"Invalid adSize %@", jsonValue);
-      } else {
-        [adSizes addObject:NSValueFromGADAdSize(adSize)];
-      }
-    }
-    _sizes = adSizes;
+  if (oldViewProps.sizes != newViewProps.sizes ||
+      oldViewProps.adaptiveMode != newViewProps.adaptiveMode) {
+    NSString *adaptiveMode =
+        [[NSString alloc] initWithUTF8String:newViewProps.adaptiveMode.c_str()];
+
+    [self updateSizes:newViewProps.sizes withAdaptiveMode:adaptiveMode];
     propsChanged = true;
   }
 
@@ -143,13 +158,20 @@ - (void)requestAd {
   if (_unitId == nil || _sizes == nil || _request == nil || _manualImpressionsEnabled == nil) {
     [self setRequested:NO];
     return;
-  } else {
-    [self initBanner:GADAdSizeFromNSValue(_sizes[0])];
-    [self addSubview:_banner];
-    _banner.adUnitID = _unitId;
-    [self setRequested:YES];
-    [self load];
   }
+
+  CGSize cgSize = CGSizeFromGADAdSize(GADAdSizeFromNSValue(_sizes[0]));
+
+  if (cgSize.width == 0) {
+    [self setRequested:NO];
+    return;
+  }
+
+  [self initBanner:GADAdSizeFromNSValue(_sizes[0])];
+  [self addSubview:_banner];
+  _banner.adUnitID = _unitId;
+  [self setRequested:YES];
+  [self load];
 }
 
 - (void)load {
@@ -178,6 +200,24 @@ - (void)recordManualImpression {
   }
 }
 
+- (void)updateSizes:(const std::vector<std::string>)sizes
+    withAdaptiveMode:(NSString *)adaptiveMode {
+  NSMutableArray *adSizes = [NSMutableArray arrayWithCapacity:sizes.size()];
+  for (auto i = 0; i < sizes.size(); i++) {
+    NSString *jsonValue = [[NSString alloc] initWithUTF8String:sizes[i].c_str()];
+    GADAdSize adSize = [RNGoogleMobileAdsCommon stringToAdSize:jsonValue
+                                              withAdaptiveMode:adaptiveMode
+                                                 withViewWidth:_viewWidth];
+    if (GADAdSizeEqualToSize(adSize, GADAdSizeInvalid)) {
+      RCTLogWarn(@"Invalid adSize %@", jsonValue);
+    } else {
+      [adSizes addObject:NSValueFromGADAdSize(adSize)];
+    }
+  }
+
+  _sizes = adSizes;
+}
+
 #pragma mark - Events
 
 - (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
@@ -248,4 +288,4 @@ - (void)adView:(nonnull GADBannerView *)banner
 
 #endif
 
-#endif
\ No newline at end of file
+#endif
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm
index 1e7b0102..931fc0f5 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm
@@ -39,6 +39,8 @@ @implementation RNGoogleMobileAdsBannerViewManager
 
 RCT_EXPORT_VIEW_PROPERTY(manualImpressionsEnabled, BOOL);
 
+RCT_EXPORT_VIEW_PROPERTY(adaptiveMode, NSString);
+
 RCT_EXPORT_VIEW_PROPERTY(onNativeEvent, RCTBubblingEventBlock);
 
 RCT_EXPORT_METHOD(recordManualImpression : (nonnull NSNumber *)reactTag) {
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.h b/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.h
index 2ee019aa..ebcdfd87 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.h
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.h
@@ -34,7 +34,9 @@
               error:(nullable NSDictionary *)error
                data:(nullable NSDictionary *)data;
 
-+ (GADAdSize)stringToAdSize:(NSString *)value;
++ (GADAdSize)stringToAdSize:(NSString *)value
+           withAdaptiveMode:(NSString *)adaptiveMode
+              withViewWidth:(CGFloat)viewWidth;
 
 + (BOOL)isAdManagerUnit:(NSString *)unitId;
 
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.mm b/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.mm
index 4d5d6b7c..c79d67d2 100644
--- a/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.mm
+++ b/ios/RNGoogleMobileAds/RNGoogleMobileAdsCommon.mm
@@ -162,7 +162,9 @@ + (void)sendAdEvent:(NSString *)event
   [[RNRCTEventEmitter shared] sendEventWithName:event body:payload];
 }
 
-+ (GADAdSize)stringToAdSize:(NSString *)value {
++ (GADAdSize)stringToAdSize:(NSString *)value
+           withAdaptiveMode:(NSString *)adaptiveMode
+              withViewWidth:(CGFloat)viewWidth {
   NSError *error = nil;
   NSRegularExpression *regex =
       [NSRegularExpression regularExpressionWithPattern:@"([0-9]+)x([0-9]+)"
@@ -199,16 +201,16 @@ + (GADAdSize)stringToAdSize:(NSString *)value {
   } else if ([value isEqualToString:@"ADAPTIVE_BANNER"] ||
              [value isEqualToString:@"ANCHORED_ADAPTIVE_BANNER"] ||
              [value isEqualToString:@"INLINE_ADAPTIVE_BANNER"]) {
-    CGRect frame = [[UIScreen mainScreen] bounds];
-    if (@available(iOS 11.0, *)) {
-      frame =
-          UIEdgeInsetsInsetRect(frame, [UIApplication sharedApplication].keyWindow.safeAreaInsets);
+    CGFloat width = viewWidth;
+
+    if ([adaptiveMode isEqualToString:@"MAIN_SCREEN"]) {
+      width = [self getMainScreenWidth];
     }
-    CGFloat viewWidth = frame.size.width;
+
     if ([value isEqualToString:@"INLINE_ADAPTIVE_BANNER"]) {
-      return GADCurrentOrientationInlineAdaptiveBannerAdSizeWithWidth(viewWidth);
+      return GADCurrentOrientationInlineAdaptiveBannerAdSizeWithWidth(width);
     }
-    return GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
+    return GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width);
   } else {
     return GADAdSizeBanner;
   }
@@ -232,6 +234,17 @@ + (UIViewController *)currentViewController {
   return controller;
 }
 
++ (CGFloat)getMainScreenWidth {
+  CGRect frame = [[UIScreen mainScreen] bounds];
+
+  if (@available(iOS 11.0, *)) {
+    frame =
+        UIEdgeInsetsInsetRect(frame, [UIApplication sharedApplication].keyWindow.safeAreaInsets);
+  }
+
+  return frame.size.width;
+}
+
 @end
 
 #endif
diff --git a/src/ads/BaseAd.tsx b/src/ads/BaseAd.tsx
index 9c0a2947..70753b1d 100644
--- a/src/ads/BaseAd.tsx
+++ b/src/ads/BaseAd.tsx
@@ -33,147 +33,184 @@ const sizeRegex = /([0-9]+)x([0-9]+)/;
 export const BaseAd = React.forwardRef<
   React.ElementRef<typeof GoogleMobileAdsBannerView>,
   GAMBannerAdProps
->(({ unitId, sizes, requestOptions, manualImpressionsEnabled, ...props }, ref) => {
-  const [dimensions, setDimensions] = useState<(number | DimensionValue)[]>([0, 0]);
+>(
+  (
+    {
+      unitId,
+      sizes,
+      requestOptions,
+      manualImpressionsEnabled,
+      adaptiveMode = 'MAIN_SCREEN',
+      ...props
+    },
+    ref,
+  ) => {
+    const [dimensions, setDimensions] = useState<(number | DimensionValue)[]>([0, 0]);
 
-  const debouncedSetDimensions = debounce(setDimensions, 100);
+    const debouncedSetDimensions = debounce(setDimensions, 100);
 
-  useEffect(() => {
-    if (!unitId) {
-      throw new Error("BannerAd: 'unitId' expected a valid string unit ID.");
-    }
-  }, [unitId]);
-
-  useEffect(() => {
-    if (
-      sizes.length === 0 ||
-      !sizes.every(size => size in BannerAdSize || size in GAMBannerAdSize || sizeRegex.test(size))
-    ) {
-      throw new Error("BannerAd: 'size(s)' expected a valid BannerAdSize or custom size string.");
-    }
-  }, [sizes]);
-
-  const validatedRequestOptions = useMemo(() => {
-    if (requestOptions) {
-      try {
-        return validateAdRequestOptions(requestOptions);
-      } catch (e) {
-        if (e instanceof Error) {
-          throw new Error(`BannerAd: ${e.message}`);
-        }
+    useEffect(() => {
+      if (!unitId) {
+        throw new Error("BannerAd: 'unitId' expected a valid string unit ID.");
       }
-    }
-    return {};
-  }, [requestOptions]);
-
-  function onNativeEvent(event: NativeSyntheticEvent<NativeEvent>) {
-    const nativeEvent = event.nativeEvent as
-      | {
-          type: 'onAdLoaded' | 'onSizeChange';
-          width: number;
-          height: number;
-        }
-      | { type: 'onAdOpened' | 'onAdClosed' }
-      | {
-          type: 'onAdFailedToLoad';
-          code: string;
-          message: string;
-        }
-      | {
-          type: 'onAppEvent';
-          name: string;
-          data?: string;
+    }, [unitId]);
+
+    useEffect(() => {
+      if (
+        sizes.length === 0 ||
+        !sizes.every(
+          size => size in BannerAdSize || size in GAMBannerAdSize || sizeRegex.test(size),
+        )
+      ) {
+        throw new Error("BannerAd: 'size(s)' expected a valid BannerAdSize or custom size string.");
+      }
+    }, [sizes]);
+
+    const validatedRequestOptions = useMemo(() => {
+      if (requestOptions) {
+        try {
+          return validateAdRequestOptions(requestOptions);
+        } catch (e) {
+          if (e instanceof Error) {
+            throw new Error(`BannerAd: ${e.message}`);
+          }
         }
-      | {
-          type: 'onPaid';
-          currency: string;
-          precision: RevenuePrecisions;
-          value: number;
-        };
-    const { type } = nativeEvent;
-
-    if (isFunction(props[type])) {
-      let eventHandler, eventPayload;
-      switch (type) {
-        case 'onAdLoaded':
-        case 'onSizeChange':
-          eventPayload = {
-            width: nativeEvent.width,
-            height: nativeEvent.height,
-          };
-          if ((eventHandler = props[type])) eventHandler(eventPayload);
-          break;
-        case 'onAdFailedToLoad':
-          eventPayload = NativeError.fromEvent(nativeEvent, 'googleMobileAds');
-          if ((eventHandler = props[type])) eventHandler(eventPayload);
-          break;
-        case 'onAppEvent':
-          eventPayload = {
-            name: nativeEvent.name,
-            data: nativeEvent.data,
-          };
-          if ((eventHandler = props[type])) eventHandler(eventPayload);
-          break;
-        case 'onPaid':
-          const handler = props[type];
-          if (handler) {
-            handler({
-              currency: nativeEvent.currency,
-              precision: nativeEvent.precision,
-              value: nativeEvent.value,
-            });
+      }
+      return {};
+    }, [requestOptions]);
+
+    function onNativeEvent(event: NativeSyntheticEvent<NativeEvent>) {
+      const nativeEvent = event.nativeEvent as
+        | {
+            type: 'onAdLoaded' | 'onSizeChange';
+            width: number;
+            height: number;
+          }
+        | { type: 'onAdOpened' | 'onAdClosed' }
+        | {
+            type: 'onAdFailedToLoad';
+            code: string;
+            message: string;
+          }
+        | {
+            type: 'onAppEvent';
+            name: string;
+            data?: string;
           }
-          break;
-        default:
-          if ((eventHandler = props[type])) eventHandler();
+        | {
+            type: 'onPaid';
+            currency: string;
+            precision: RevenuePrecisions;
+            value: number;
+          };
+      const { type } = nativeEvent;
+
+      if (isFunction(props[type])) {
+        let eventHandler, eventPayload;
+        switch (type) {
+          case 'onAdLoaded':
+          case 'onSizeChange':
+            eventPayload = {
+              width: nativeEvent.width,
+              height: nativeEvent.height,
+            };
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onAdFailedToLoad':
+            eventPayload = NativeError.fromEvent(nativeEvent, 'googleMobileAds');
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onAppEvent':
+            eventPayload = {
+              name: nativeEvent.name,
+              data: nativeEvent.data,
+            };
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onPaid':
+            const handler = props[type];
+            if (handler) {
+              handler({
+                currency: nativeEvent.currency,
+                precision: nativeEvent.precision,
+                value: nativeEvent.value,
+              });
+            }
+            break;
+          default:
+            if ((eventHandler = props[type])) eventHandler();
+        }
       }
-    }
 
-    if (type === 'onAdLoaded' || type === 'onSizeChange') {
-      const width = Math.ceil(nativeEvent.width);
-      const height = Math.ceil(nativeEvent.height);
-
-      if (width && height && JSON.stringify([width, height]) !== JSON.stringify(dimensions)) {
-        /**
-         * On Android, it seems the ad size is not always the definitive on the first onAdLoaded event.
-         * So if we change the size here with an incorrect value, then we relayout the ad on native side
-         * and it might cause an incorrect size to be set.
-         *
-         * To reproduce this issue, go to the example app, on the "GAMBanner Fluid" example
-         * and reload the ad several times
-         *
-         * on my low-end Samsung A10s, it always took less than 100ms in debug mode to get the correct size
-         * hence the 100ms debounce
-         */
-        if (sizes.includes(GAMBannerAdSize.FLUID) && Platform.OS === 'android') {
-          debouncedSetDimensions([width, height]);
-        } else {
-          setDimensions([width, height]);
+      if (type === 'onAdLoaded' || type === 'onSizeChange') {
+        const width = Math.ceil(nativeEvent.width);
+        const height = Math.ceil(nativeEvent.height);
+
+        if (width && height && JSON.stringify([width, height]) !== JSON.stringify(dimensions)) {
+          /**
+           * On Android, it seems the ad size is not always the definitive on the first onAdLoaded event.
+           * So if we change the size here with an incorrect value, then we relayout the ad on native side
+           * and it might cause an incorrect size to be set.
+           *
+           * To reproduce this issue, go to the example app, on the "GAMBanner Fluid" example
+           * and reload the ad several times
+           *
+           * on my low-end Samsung A10s, it always took less than 100ms in debug mode to get the correct size
+           * hence the 100ms debounce
+           */
+          if (sizes.includes(GAMBannerAdSize.FLUID) && Platform.OS === 'android') {
+            debouncedSetDimensions([width, height]);
+          } else {
+            setDimensions([width, height]);
+          }
         }
       }
     }
+
+    const style = shouldAdaptToContainer(sizes, adaptiveMode)
+      ? {
+          width: '100%' as DimensionValue,
+          height: dimensions[1],
+        }
+      : {
+          width: dimensions[0],
+          height: dimensions[1],
+        };
+
+    return (
+      <GoogleMobileAdsBannerView
+        ref={ref}
+        sizes={sizes}
+        style={style}
+        unitId={unitId}
+        request={JSON.stringify(validatedRequestOptions)}
+        manualImpressionsEnabled={!!manualImpressionsEnabled}
+        adaptiveMode={adaptiveMode}
+        onNativeEvent={onNativeEvent}
+      />
+    );
+  },
+);
+
+const shouldAdaptToContainer = (
+  sizes: GAMBannerAdProps['sizes'],
+  adaptiveMode: GAMBannerAdProps['adaptiveMode'],
+) => {
+  if (sizes.includes(GAMBannerAdSize.FLUID)) {
+    return true;
   }
 
-  const style = sizes.includes(GAMBannerAdSize.FLUID)
-    ? {
-        width: '100%' as DimensionValue,
-        height: dimensions[1],
-      }
-    : {
-        width: dimensions[0],
-        height: dimensions[1],
-      };
-
-  return (
-    <GoogleMobileAdsBannerView
-      ref={ref}
-      sizes={sizes}
-      style={style}
-      unitId={unitId}
-      request={JSON.stringify(validatedRequestOptions)}
-      manualImpressionsEnabled={!!manualImpressionsEnabled}
-      onNativeEvent={onNativeEvent}
-    />
-  );
-});
+  if (adaptiveMode === 'MAIN_SCREEN') {
+    return false;
+  }
+
+  const adaptiveSizes: string[] = [
+    GAMBannerAdSize.ANCHORED_ADAPTIVE_BANNER,
+    GAMBannerAdSize.INLINE_ADAPTIVE_BANNER,
+    GAMBannerAdSize.ADAPTIVE_BANNER,
+  ];
+
+  return sizes.some(size => adaptiveSizes.includes(size));
+};
+
 BaseAd.displayName = 'BaseAd';
diff --git a/src/specs/components/GoogleMobileAdsBannerViewNativeComponent.ts b/src/specs/components/GoogleMobileAdsBannerViewNativeComponent.ts
index 98c0eb81..791b43f8 100644
--- a/src/specs/components/GoogleMobileAdsBannerViewNativeComponent.ts
+++ b/src/specs/components/GoogleMobileAdsBannerViewNativeComponent.ts
@@ -22,6 +22,7 @@ export interface NativeProps extends ViewProps {
   unitId: string;
   request: string;
   manualImpressionsEnabled: boolean;
+  adaptiveMode: string;
   onNativeEvent: BubblingEventHandler<NativeEvent>;
 }
 
diff --git a/src/types/BannerAdProps.ts b/src/types/BannerAdProps.ts
index 62338edd..dd431eb1 100644
--- a/src/types/BannerAdProps.ts
+++ b/src/types/BannerAdProps.ts
@@ -53,6 +53,11 @@ export interface BannerAdProps {
    */
   requestOptions?: RequestOptions;
 
+  /**
+   * By default adaptive ad size width is equal to the main screen width.
+   */
+  adaptiveMode?: 'CONTAINER' | 'MAIN_SCREEN';
+
   /**
    * When an ad has finished loading.
    */