diff --git a/RNGoogleMobileAdsExample/App.tsx b/RNGoogleMobileAdsExample/App.tsx
index 26a1ca35..de6ab97d 100644
--- 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 (
+
);
}
diff --git a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java b/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
index 36a393ba..59b07f52 100644
--- a/android/src/main/java/io/invertase/googlemobileads/ReactNativeGoogleMobileAdsBannerAdViewManager.java
+++ b/android/src/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 getExportedCustomDirectEventTypeConstants() {
@Nullable
@Override
public Map 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
index ddf91d11..5b3b16c5 100644
--- a/docs/displaying-ads.mdx
+++ b/docs/displaying-ads.mdx
@@ -406,8 +406,8 @@ 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(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.
@@ -415,7 +415,7 @@ function App() {
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 ;
+ return (
+
+ );
}
```
diff --git a/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h b/ios/RNGoogleMobileAds/RNGoogleMobileAdsBannerComponent.h
index 60a369b7..f341abcc 100644
--- 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
index cf30f597..15901dd8 100644
--- 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
index 1f9c3ffb..13ad4b48 100644
--- 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(
- _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(
+ _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
index 3d3f8c45..1e7b0102 100644
--- 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 *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
index 1a96376e..3e515ecf 100644
--- 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 ;
+export class BannerAd extends React.Component {
+ private ref = createRef>();
+
+ load() {
+ if (this.ref.current) {
+ Commands.load(this.ref.current);
+ }
+ }
+
+ render() {
+ return ;
+ }
}
diff --git a/src/ads/GAMBannerAd.tsx b/src/ads/GAMBannerAd.tsx
index d8a0214f..e8f7df1d 100644
--- a/src/ads/GAMBannerAd.tsx
+++ b/src/ads/GAMBannerAd.tsx
@@ -29,6 +29,12 @@ export class GAMBannerAd extends React.Component {
}
}
+ load() {
+ if (this.ref.current) {
+ Commands.load(this.ref.current);
+ }
+ }
+
render() {
return ;
}
diff --git a/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts b/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts
index 94364afc..1a044f87 100644
--- a/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts
+++ b/src/ads/GoogleMobileAdsBannerViewNativeComponent.ts
@@ -29,10 +29,11 @@ export type ComponentType = HostComponent;
interface NativeCommands {
recordManualImpression: (viewRef: React.ElementRef) => void;
+ load: (viewRef: React.ElementRef) => void;
}
export const Commands: NativeCommands = codegenNativeCommands({
- supportedCommands: ['recordManualImpression'],
+ supportedCommands: ['recordManualImpression', 'load'],
});
export default codegenNativeComponent(