Set up banner ads

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 into a React Native app.

Prerequisites

Before you continue, do the following:

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 method with your available ad container width in density-independent pixels (dp). This method returns a promise that resolves to an AdSize object.

The following example gets and returns the ad size for an anchored adaptive banner ad:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

Load an ad

After you get an AdSize object, call the load method on the 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:

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.

Display a banner ad

To display a loaded BannerAd instance, pass the ad instance to the ad property of a BannerAdView component in your view hierarchy.

The following example shows an ad and destroys the ad when the component unmounts:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

This example calls the destroy method when the component unmounts or when the ad instance is replaced. This process frees up memory and resources the ad uses.

Listen for ad events

To listen for ad events, such as ad impressions and clicks, set callbacks on the BannerAdView component. For all callbacks, see BannerAdViewProps.

The following example sets callbacks to listen for banner ad events:

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        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:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(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 (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Replace BANNER_AD_UNIT_ID with your ad unit ID.

Next steps

After you integrate banner ads, explore the following topics: