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: - [`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 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: - [Set up Google Mobile Ads SDK for React Native](https://developers.google.com/admob/react-native/quick-start.md.txt). - [Load a native ad](https://developers.google.com/admob/react-native/native.md.txt). ## 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`](https://developers.google.com/admob/react-native/reference/class/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](https://developers.google.com/admob/react-native/native/options.md.txt). ## 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`](https://developers.google.com/admob/react-native/reference.md.txt#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`](https://developers.google.com/admob/react-native/reference/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`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.ADVERTISER) | **Target property:** [`NativeAd.advertiser`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.advertiser) ```tsx {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( {ad.advertiser} )} ``` | | [`BODY`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.BODY) | **Target property:** [`NativeAd.body`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.body) ```tsx {/* Detailed description text (optional). */} {ad.body && ( {ad.body} )} ``` | | [`CALL_TO_ACTION`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.CALL_TO_ACTION) | **Target property:** [`NativeAd.callToAction`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.callToAction) ```tsx {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( {ad.callToAction} )} ``` | | [`HEADLINE`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.HEADLINE) | **Target property:** [`NativeAd.headline`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.headline) ```tsx {/* The main title of the ad (required). */} {ad.headline} ``` | | [`ICON`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.ICON) | **Target property:** [`NativeAd.icon`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.icon) ```tsx {/* The advertiser logo or app icon (optional). */} {ad.icon && ( )} ``` | | [`PRICE`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.PRICE) | **Target property:** [`NativeAd.price`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.price) ```tsx {/* Price string for products or paid apps (optional). */} {ad.price && ( {ad.price} )} ``` | | [`STAR_RATING`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.STAR_RATING) | **Target property:** [`NativeAd.starRating`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.starRating) ```tsx {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( ★ {ad.starRating.toFixed(1)} )} ``` | | [`STORE`](https://developers.google.com/admob/react-native/reference.md.txt#NativeAdAssetNames.__type.STORE) | **Target property:** [`NativeAd.store`](https://developers.google.com/admob/react-native/reference/class/NativeAd#NativeAd.store) ```tsx {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( {ad.store} )} ``` | 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: ```tsx {/* Video or image media asset (optional). */} ``` Available [`ResizeMode`](https://developers.google.com/admob/react-native/reference.md.txt#ResizeMode) values include the following: - [`ResizeMode.CONTAIN`](https://developers.google.com/admob/react-native/reference.md.txt#ResizeMode.__type.CONTAIN) - [`ResizeMode.COVER`](https://developers.google.com/admob/react-native/reference.md.txt#ResizeMode.__type.COVER) - [`ResizeMode.STRETCH`](https://developers.google.com/admob/react-native/reference.md.txt#ResizeMode.__type.STRETCH) ### Set the media aspect ratio To request ad creatives that match the aspect ratio of your media view layout, specify the [`aspectRatio`](https://developers.google.com/admob/react-native/reference/interface/NativeAdRequest.md.txt#NativeAdRequest.aspectRatio) property on the [`NativeAdRequest`](https://developers.google.com/admob/react-native/reference/interface/NativeAdRequest.md.txt) 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: ```tsx export async function loadNativeAdWithAspectRatio( adUnitId: string, ): Promise { 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`](https://developers.google.com/admob/react-native/reference.md.txt#NativeMediaAspectRatio) values include the following: - [`NativeMediaAspectRatio.ANY`](https://developers.google.com/admob/react-native/reference.md.txt#NativeMediaAspectRatio.__type.ANY) - [`NativeMediaAspectRatio.LANDSCAPE`](https://developers.google.com/admob/react-native/reference.md.txt#NativeMediaAspectRatio.__type.LANDSCAPE) - [`NativeMediaAspectRatio.PORTRAIT`](https://developers.google.com/admob/react-native/reference.md.txt#NativeMediaAspectRatio.__type.PORTRAIT) - [`NativeMediaAspectRatio.SQUARE`](https://developers.google.com/admob/react-native/reference.md.txt#NativeMediaAspectRatio.__type.SQUARE) ## 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`](https://developers.google.com/admob/react-native/reference/interface/AdEventCallback.md.txt). The following example passes event callbacks for ad events, such as full-screen content display or dismissals, to the `NativeAdView` component: ```tsx export function NativeAdWithEvents({ad}: {ad: NativeAd}) { return ( { 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: ```tsx export function NativeAdCard({ad}: {ad: NativeAd}) { return ( {/* 1. Ad Attribution Badge */} Ad {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */} {/* The advertiser logo or app icon (optional). */} {ad.icon && ( )} {/* The main title of the ad (required). */} {ad.headline} {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( {ad.advertiser} )} {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( ★ {ad.starRating.toFixed(1)} )} {/* 3. Media Content */} {/* Video or image media asset (optional). */} {/* 4. Body Text */} {/* Detailed description text (optional). */} {ad.body && ( {ad.body} )} {/* 5. Footer: Price, Store, and Call To Action */} {/* Price string for products or paid apps (optional). */} {ad.price && ( {ad.price} )} {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( {ad.store} )} {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( {ad.callToAction} )} ); } ```