Set up native ads

Native ads give you individual ad assets, such as a headline, images, and prompt text, that you can style and arrange to match your app's visual design. To handle click tracking, impressions, and media playback, Google Mobile Ads SDK for React Native provides the following components:

For details on displaying native ads compliantly, see Native ads using native advanced.

This page covers how to load single and multiple native ads, manage ad memory and lifecycles, and enable hardware acceleration for video ads on Android.

Prerequisites

Before you continue, do the following:

Android

Format Sample ad unit ID
Native ca-app-pub-3940256099942544/2247696110
Native video ca-app-pub-3940256099942544/1044960115

iOS

Format Sample ad unit ID
Native ca-app-pub-3940256099942544/3986624511
Native video ca-app-pub-3940256099942544/2521693316

Load an ad

To load a native ad, call the NativeAd.load method with a NativeAdRequest object containing your ad unit ID. This method returns a promise that resolves with the loaded NativeAd object or rejects with a LoadAdError object.

The following example loads a single native ad, returns the loaded ad on success and logs an error message on failure:

export async function loadNativeAd(adUnitId: string): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

When loading and managing native ads, we recommend that you do the following:

  • Limit loaded ads: Native ad assets consume memory. Only load ads that users are about to view, such as the next one to two ad placements, rather than loading large batches at once.
  • Clean up unmounted ads: When you remove or replace an ad from the screen, or when the containing component unmounts, call the ad.destroy method. This method releases the resources and memory the ad uses.
  • Display loaded ads within an hour: Native ad creatives expire after 60 minutes. If you haven't displayed a loaded ad in an hour, destroy the ad and request another ad.

Optional: Load multiple ads

To load multiple ads in a single request, call the NativeAd.loadAds method with a NativeAdRequest object, the number of ads to request, and a NativeAdLoadCallback object. The request can contain up to five ads.

The following example requests multiple native ads and handles each loaded ad, load errors, and request completion using callbacks:

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

If you display ads in a scrollable feed, load ads ahead of time. This process lets ads render when users go to the ads.

Enable hardware acceleration

To show video ads in your native ad views on Android, enable hardware acceleration.

By default, Android enables hardware acceleration. Apps might disable hardware acceleration globally. If your app disables hardware acceleration globally, enable the setting for Activity classes that show ads.

If you enable hardware acceleration globally, and your app doesn't work as expected, control hardware acceleration for individual activities. To enable or disable hardware acceleration, use the android:hardwareAccelerated attribute for the application and activity elements in your AndroidManifest.xml file.

The following example enables hardware acceleration globally for the app and disables the setting for one activity:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Next steps

After you load an ad, render the ad in your React Native UI using the NativeAdView and NativeAdMediaView components. For details, see Display native ads.