Banner ads occupy a fixed position in your app's layout, such as at the top or bottom of the device screen. These ads stay on screen while your users interact with your app, and refresh after a period of time you set. Anchored adaptive banners use the ad size for each device using an ad width you specify. This page covers how to integrate [anchored adaptive banner ads](https://support.google.com/admob/answer/9993556) into a React Native app. ## Prerequisites Before you continue, do the following: - [Set up Google Mobile Ads SDK for React Native](https://developers.google.com/admob/react-native/quick-start.md.txt). - [Enable test ads](https://developers.google.com/admob/react-native/test-ads.md.txt) and use the following test ad unit ID: ### Android ca-app-pub-3940256099942544/9214589741 ### iOS ca-app-pub-3940256099942544/2435281174 ## Get the ad size To request an anchored adaptive banner ad, call the [`AdSize.getLargeAnchoredAdaptiveBannerAdSize`](https://developers.google.com/admob/react-native/reference.md.txt#AdSize) method with your available ad container width in density-independent pixels (dp). This method returns a promise that resolves to an [`AdSize`](https://developers.google.com/admob/react-native/reference.md.txt#AdSize) object. The following example gets and returns the ad size for an anchored adaptive banner ad: ```tsx export async function getAdaptiveAdSize(width: number): Promise { const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width); return adSize; } ``` ## Load an ad After you get an [`AdSize`](https://developers.google.com/admob/react-native/reference.md.txt#AdSize) object, call the [`load`](https://developers.google.com/admob/react-native/reference/class/BannerAd#BannerAd.load) method on the [`BannerAd`](https://developers.google.com/admob/react-native/reference/class/BannerAd) class with your ad unit ID and ad size. The following example loads an anchored adaptive banner ad with the ad size and ad unit ID, receives the loaded `BannerAd` instance on success, and logs an error on failure: ```tsx export function loadBannerAd( adUnitId: string, adSize: AdSize, callback?: BannerAdLoadCallback, ): void { BannerAd.load( {adUnitId, adSize}, { // Called when an ad has finished loading. onAdLoaded: (ad) => { console.log('Banner ad loaded successfully.'); callback?.onAdLoaded?.(ad); }, // Called when an ad request fails. onAdFailedToLoad: (error: LoadAdError) => { console.error('Failed to load banner ad:', error.message); callback?.onAdFailedToLoad?.(error); }, }, ); } ``` ## Refresh an ad If you configured your ad unit to refresh, you don't need to request another ad when the ad fails to load. Google Mobile Ads SDK for React Native respects any refresh rate you specified in the AdMob UI. If you haven't enabled refresh, issue a new request. For more details on ad unit refresh, such as setting a refresh rate, see [Use automatic refresh for Banner ads](https://support.google.com/admob/answer/3245199). > [!NOTE] > **Note:** When setting a refresh rate in the AdMob UI, the automatic refresh occurs only if the banner is visible on screen. ## Display a banner ad To display a loaded [`BannerAd`](https://developers.google.com/admob/react-native/reference/class/BannerAd) instance, pass the ad instance to the `ad` property of a [`BannerAdView`](https://developers.google.com/admob/react-native/reference.md.txt#BannerAdView) component in your view hierarchy. The following example shows an ad and destroys the ad when the component unmounts: ```tsx export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element { useEffect(() => { // Destroy native resources when the component unmounts. return () => { ad.destroy(); }; }, [ad]); return ; } ``` This example calls the [`destroy`](https://developers.google.com/admob/react-native/reference/class/BannerAd#BannerAd.destroy) method when the component unmounts or when the ad instance is replaced. This process frees up memory and resources the ad uses. > [!IMPORTANT] > **Key Point:** You're responsible for positioning the banner ad view in your layout with your app's styles, for example, anchoring the ad to the top or bottom of the screen. For the full example, see [View the full example](https://developers.google.com/admob/react-native/banner.md.txt#view_full_example). ## Listen for ad events To listen for ad events, such as ad impressions and clicks, set callbacks on the [`BannerAdView`](https://developers.google.com/admob/react-native/reference.md.txt#BannerAdView) component. For all callbacks, see [`BannerAdViewProps`](https://developers.google.com/admob/react-native/reference/interface/BannerAdViewProps). The following example sets callbacks to listen for banner ad events: ```tsx export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element { return ( { console.log('Banner ad recorded an impression.'); }} // Called when a click is recorded for an ad. onAdClicked={() => { console.log('Banner ad clicked.'); }} // Called when the ad opens an in-app overlay or landing page. onAdShowedFullScreenContent={() => { console.log('Banner ad opened overlay content.'); }} // Called when the user dismisses the ad overlay. onAdDismissedFullScreenContent={() => { console.log('Banner ad overlay dismissed.'); }} // Called when the ad is estimated to have earned money. onAdPaid={(adValue) => { console.log( `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`, ); }} // Called when the ad automatically refreshes. onAdRefreshed={() => { console.log('Banner ad refreshed.'); }} // Called when the ad fails to automatically refresh. onAdFailedToRefresh={(error) => { console.error('Banner ad failed to refresh:', error.message); }} /> ); } ``` This example listens for ad events, such as ad dismissals, impressions, clicks, full-screen presentation, estimated ad revenue, and refresh successes and failures. ## View the full example This section covers the full example of integrating a banner ad into a React Native component. The following example integrates a banner ad into a React Native component and manages the ad instance in state: ```tsx export function BannerScreen() { const {width} = useWindowDimensions(); const insets = useSafeAreaInsets(); const [ad, setAd] = useState(null); const [status, setStatus] = useState('Idle'); useEffect(() => { return () => { ad?.destroy(); }; }, [ad]); const handleLoadAd = async () => { setStatus('Loading adaptive banner ad...'); try { const adaptiveSize = await getAdaptiveAdSize(width); loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, { onAdLoaded: (loadedAd) => { setAd(loadedAd); setStatus('Banner ad loaded successfully.'); }, onAdFailedToLoad: (error: LoadAdError) => { setStatus(`Failed to load banner ad: ${error.message}`); }, }); } catch (error) { setStatus(`Failed to get adaptive ad size: ${error}`); } }; return ( Anchored Adaptive Banner Ad Status: {status}