<br />

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:

- [`NativeAdView`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdView)
- [`NativeAdMediaView`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdMediaView)

For details on displaying native ads compliantly, see

[Native ads using native advanced](https://support.google.com/admob/answer/6329638).


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:

- [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 IDs:

### 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`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.load) method
with a [`NativeAdRequest`](https://developers.google.com/admob/react-native/reference/interface/NativeAdRequest.md.txt) object containing your
ad unit ID. This method returns a promise that resolves with the loaded
[`NativeAd`](https://developers.google.com/admob/react-native/reference/class/NativeAd) object or rejects with a
[`LoadAdError`](https://developers.google.com/admob/react-native/reference/class/LoadAdError.md.txt) object.

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

```tsx
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`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.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`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.loadAds) method with a
[`NativeAdRequest`](https://developers.google.com/admob/react-native/reference/interface/NativeAdRequest.md.txt) object, the number of ads to
request, and a [`NativeAdLoadCallback`](https://developers.google.com/admob/react-native/reference/interface/NativeAdLoadCallback.md.txt) 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:

```tsx
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.');
    },
  });
}
```

> [!NOTE]
> **Note:** Ad units configured for AdMob Mediation don't support multiple ad requests.

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](https://developer.android.com/guide/topics/graphics/hardware-accel).

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`](https://developer.android.com/guide/topics/manifest/application-element) and
[`activity`](https://developer.android.com/guide/topics/manifest/activity-element) elements in your `AndroidManifest.xml`
file.

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

```xml
<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`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdView) and
[`NativeAdMediaView`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdMediaView) components. For details, see
[Display native ads](https://developers.google.com/admob/react-native/native/advanced.md.txt).