Display native ads

When a native ad loads, your app receives an ad object containing ad assets, such as the ad's images, text, and videos. Your app is responsible for displaying the ad assets in a native ad view layout. To display native ads compliantly, 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 render native ad assets, configure media content, and handle ad events using Google Mobile Ads SDK for React Native.

Prerequisites

Before you continue, do the following:

Define the native ad view component

The NativeAdView component is the top-level container for your native ad layout. This component wraps all individual asset views and binds the asset views to the loaded NativeAd instance.

Wrapping your assets in the NativeAdView component does the following:

Record impressions when the ad shows on screen.
Record clicks and handle navigation when a user taps interactive assets.
Display and position the AdChoices overlay.

Ad attribution and AdChoices

Ad attribution and the AdChoices overlay are mandatory policy requirements for all Google native ad implementations.

When you wrap your layout in NativeAdView, Google Mobile Ads SDK for React Native automatically renders the AdChoices icon in the top-right corner of the ad view by default. You don't need to add custom code or asset views for the icon to appear.

To customize the corner placement of the icon, see Set advanced native features.

Populate and register asset views

To register asset views with Google Mobile Ads SDK for React Native, wrap each asset component with a NativeAdView.Asset wrapper and specify the asset type using the NativeAdAssetNames object. Each NativeAdView.Asset wrapper must contain a single React Native host element, such as Text, Image, or View, that accepts the nativeID property. For details about available asset properties, see Class NativeAd.

The following table lists the available asset types, the target properties, and examples on registering the asset views:

Asset type	Description and examples
`ADVERTISER`	Target property: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Target property: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Target property: `NativeAd.callToAction` {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
`HEADLINE`	Target property: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Target property: `NativeAd.icon` {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
`PRICE`	Target property: `NativeAd.price` {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
`STAR_RATING`	Target property: `NativeAd.starRating` {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
`STORE`	Target property: `NativeAd.store` {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

Always conditionally render the following optional asset views:

ad.icon
ad.body
ad.advertiser
ad.price
ad.store
ad.starRating

When an ad omits optional assets, your app must not display empty UI elements.

Display media content

The NativeAdMediaView component renders the visual asset of the ad, such as videos and images. If the ad contains video content, the media view buffers and plays the video. If the ad only contains image content, the media view renders the primary image instead.

Apply the media resize mode

To control how images scale in the media view container, apply the resizeMode property on the NativeAdMediaView component:

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

Available ResizeMode values include the following:

Set the media aspect ratio

To request ad creatives that match the aspect ratio of your media view layout, specify the aspectRatio property on the NativeAdRequest instance.

The following example requests a native ad with a landscape media aspect ratio, returns the loaded ad on success, and logs an error message on failure:

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

Available NativeMediaAspectRatio values include the following:

Listen to ad events

To notify you of ad lifecycle events, such as impressions or clicks, pass event callbacks to the NativeAdView component. For all available callbacks, see AdEventCallback.

The following example passes event callbacks for ad events, such as full-screen content display or dismissals, to the NativeAdView component:

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

View the full example

This section covers the complete example of building a reusable native ad card component.

The following example defines the NativeAdCard component, which displays an ad attribution badge, conditionally renders and registers individual native ad assets, and renders the media content with the NativeAdMediaView component:

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}

Display native ads Stay organized with collections Save and categorize content based on your preferences.