feat: add method to reload banner ad

invertase · May 21, 2024 · 2a57487 · 2a57487
1 parent 9eb3b51
commit 2a57487
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 22 deletions.
diff --git a/RNGoogleMobileAdsExample/App.tsx b/RNGoogleMobileAdsExample/App.tsx
@@ -187,6 +187,7 @@ class BannerTest implements Test {
 
   constructor(bannerAdSize) {
     this.bannerAdSize = bannerAdSize;
+    this.bannerRef = React.createRef();
   }
 
   getPath(): string {
@@ -206,6 +207,7 @@ class BannerTest implements Test {
     return (
       <View ref={onMount}>
         <BannerAd
+          ref={this.bannerRef}
           unitId={
             this.bannerAdSize.includes('ADAPTIVE_BANNER')
               ? TestIds.ADAPTIVE_BANNER
@@ -220,6 +222,12 @@ class BannerTest implements Test {
             );
           }}
         />
+        <Button
+          title="reload"
+          onPress={() => {
+            this.bannerRef.current?.load();
+          }}
+        />
       </View>
     );
   }

diff --git a/...main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java b/...main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
@@ -62,6 +62,7 @@ public class ReactNativeGoogleMobileAdsBannerAdViewManager
   private final String EVENT_SIZE_CHANGE = "onSizeChange";
   private final String EVENT_APP_EVENT = "onAppEvent";
   private final int COMMAND_ID_RECORD_MANUAL_IMPRESSION = 1;
+  private final int COMMAND_ID_LOAD = 2;
 
   @Nonnull
   @Override
@@ -85,7 +86,9 @@ public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
   @Nullable
   @Override
   public Map<String, Integer> getCommandsMap() {
-    return MapBuilder.of("recordManualImpression", COMMAND_ID_RECORD_MANUAL_IMPRESSION);
+    return MapBuilder.of(
+        "recordManualImpression", COMMAND_ID_RECORD_MANUAL_IMPRESSION,
+        "load", COMMAND_ID_LOAD);
   }
 
   @Override
@@ -99,6 +102,10 @@ public void receiveCommand(
       if (adView instanceof AdManagerAdView) {
         ((AdManagerAdView) adView).recordManualImpression();
       }
+    } else if (commandIdInt == COMMAND_ID_LOAD) {
+      BaseAdView adView = getAdView(reactViewGroup);
+      AdRequest request = reactViewGroup.getRequest();
+      adView.loadAd(request);
     }
   }
 

diff --git a/docs/displaying-ads.mdx b/docs/displaying-ads.mdx
@@ -406,16 +406,16 @@ import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads'
 const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
 
 function App() {
+  const bannerRef = useRef<BannerAd>(null);
   const appState = useRef(AppState.currentState);
-  const [key, setKey] = useState(`banner-${Date.now()}`);
 
   // WKWebView can terminate if app is in a "suspended state", resulting in an empty banner when app returns to foreground.
   // A Google Mobile Ads Advisor suggests requesting a new ad when the app is foregrounded.
   // For more details, see: [https://groups.google.com/g/google-admob-ads-sdk/c/rwBpqOUr8m8]
   useEffect(() => {
     const subscription = AppState.addEventListener('change', nextAppState => {
       if (appState.current.match(/background/) && nextAppState === 'active') {
-        setKey(`banner-${Date.now()}`);
+        bannerRef.current?.load();
       }
       appState.current = nextAppState;
     });
@@ -425,7 +425,9 @@ function App() {
     };
   }, []);
 
-  return <BannerAd key={key} unitId={adUnitId} size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />;
+  return (
+    <BannerAd ref={bannerRef} unitId={adUnitId} size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />
+  );
 }
 ```
 

diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h
@@ -36,6 +36,7 @@
 @property(nonatomic, copy) RCTBubblingEventBlock onNativeEvent;
 
 - (void)requestAd;
+- (void)load;
 - (void)recordManualImpression;
 
 @end

diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.m
@@ -122,13 +122,17 @@ - (void)requestAd {
     typeof(self) strongSelf = weakSelf;
     if (strongSelf) {
       [strongSelf sendEvent:@"onPaid"
-                  payload:@{
-        @"value" : value.value,
-        @"precision" : @(value.precision),
-        @"currency" : value.currencyCode,
-      }];
+                    payload:@{
+                      @"value" : value.value,
+                      @"precision" : @(value.precision),
+                      @"currency" : value.currencyCode,
+                    }];
     }
   };
+  [self load];
+}
+
+- (void)load {
   [_banner loadRequest:[RNGoogleMobileAdsCommon buildAdRequest:_request]];
   [self sendEvent:@"onSizeChange"
           payload:@{

diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerView.mm
@@ -146,21 +146,27 @@ - (void)requestAd {
     [self addSubview:_banner];
     _banner.adUnitID = _unitId;
     [self setRequested:YES];
-    [_banner loadRequest:[RNGoogleMobileAdsCommon buildAdRequest:_request]];
-    if (_eventEmitter != nullptr) {
-      std::dynamic_pointer_cast<const facebook::react::RNGoogleMobileAdsBannerViewEventEmitter>(
-          _eventEmitter)
-          ->onNativeEvent(facebook::react::RNGoogleMobileAdsBannerViewEventEmitter::OnNativeEvent{
-              .type = "onSizeChange",
-              .width = _banner.bounds.size.width,
-              .height = _banner.bounds.size.height});
-    }
+    [self load];
+  }
+}
+
+- (void)load {
+  [_banner loadRequest:[RNGoogleMobileAdsCommon buildAdRequest:_request]];
+  if (_eventEmitter != nullptr) {
+    std::dynamic_pointer_cast<const facebook::react::RNGoogleMobileAdsBannerViewEventEmitter>(
+        _eventEmitter)
+        ->onNativeEvent(facebook::react::RNGoogleMobileAdsBannerViewEventEmitter::OnNativeEvent{
+            .type = "onSizeChange",
+            .width = _banner.bounds.size.width,
+            .height = _banner.bounds.size.height});
   }
 }
 
 - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
   if ([commandName isEqual:@"recordManualImpression"]) {
     [self recordManualImpression];
+  } else if ([commandName isEqual:@"load"]) {
+    [self load];
   }
 }
 

diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerViewManager.mm
@@ -55,6 +55,20 @@ @implementation RNGoogleMobileAdsBannerViewManager
 #endif
 }
 
+RCT_EXPORT_METHOD(load : (nonnull NSNumber *)reactTag) {
+#if !TARGET_OS_MACCATALYST
+  [self.bridge.uiManager
+      addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+        RNGoogleMobileAdsBannerComponent *banner = viewRegistry[reactTag];
+        if (!banner || ![banner isKindOfClass:[RNGoogleMobileAdsBannerComponent class]]) {
+          RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
+          return;
+        }
+        [banner load];
+      }];
+#endif
+}
+
 #ifdef RCT_NEW_ARCH_ENABLE
 
 #else

diff --git a/src/ads/BannerAd.tsx b/src/ads/BannerAd.tsx
@@ -15,10 +15,21 @@
  *
  */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { BannerAdProps } from '../types/BannerAdProps';
 import { BaseAd } from './BaseAd';
+import GoogleMobileAdsBannerView, { Commands } from './GoogleMobileAdsBannerViewNativeComponent';
 
-export function BannerAd({ size, ...props }: BannerAdProps) {
-  return <BaseAd sizes={[size]} {...props} />;
+export class BannerAd extends React.Component<BannerAdProps> {
+  private ref = createRef<React.ElementRef<typeof GoogleMobileAdsBannerView>>();
+
+  load() {
+    if (this.ref.current) {
+      Commands.load(this.ref.current);
+    }
+  }
+
+  render() {
+    return <BaseAd ref={this.ref} sizes={[this.props.size]} {...this.props} />;
+  }
 }
diff --git a/src/ads/GAMBannerAd.tsx b/src/ads/GAMBannerAd.tsx
@@ -29,6 +29,12 @@ export class GAMBannerAd extends React.Component<GAMBannerAdProps> {
     }
   }
 
+  load() {
+    if (this.ref.current) {
+      Commands.load(this.ref.current);
+    }
+  }
+
   render() {
     return <BaseAd ref={this.ref} {...this.props} />;
   }

diff --git a/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts b/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts
@@ -29,10 +29,11 @@ export type ComponentType = HostComponent<NativeProps>;
 
 interface NativeCommands {
   recordManualImpression: (viewRef: React.ElementRef<ComponentType>) => void;
+  load: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['recordManualImpression'],
+  supportedCommands: ['recordManualImpression', 'load'],
 });
 
 export default codegenNativeComponent<NativeProps>(