Rewarded interstitial ads let you offer in-app items for ads that appear between screens or game levels. Unlike rewarded ads, your users don't need to opt in to view the ad. For details, see [Overview of rewarded interstitial ad units](https://support.google.com/admob/answer/9884467). This guide explains how to integrate rewarded interstitial ads into a React Native app. ## 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: ### Android ca-app-pub-3940256099942544/5354046379 ### iOS ca-app-pub-3940256099942544/6978759866 ## Load an ad To load a rewarded interstitial ad, call the [`load`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt#RewardedInterstitialAd.load) method on the [`RewardedInterstitialAd`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt) class. The following example loads a rewarded interstitial ad on success and logs an error on failure: ```tsx export async function loadRewardedInterstitialAd( adUnitId: string, ): Promise { try { const ad = await RewardedInterstitialAd.load({adUnitId}); return ad; } catch (error) { const loadError = error as LoadAdError; console.error('Failed to load rewarded interstitial:', loadError.message); return null; } } ``` ## Listen for ad events Before you show the ad, set the [`adEventCallback`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt#RewardedInterstitialAd.adEventCallback) listener on the loaded [`RewardedInterstitialAd`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt) instance. This listener receives callbacks for ad lifecycle events, such as the ad showing on the screen or a user tapping the ad. For available callbacks, see [`AdEventCallback`](https://developers.google.com/admob/react-native/reference/interface/AdEventCallback.md.txt). The following example sets callbacks to listen for ad events: ```tsx export function registerAdEvents(ad: RewardedInterstitialAd) { ad.adEventCallback = { // Called when the ad is presented on screen. onAdShowedFullScreenContent: () => { console.log('Rewarded interstitial ad showed full screen content.'); }, // Called when the ad is closed by the user. onAdDismissedFullScreenContent: () => { console.log('Rewarded interstitial ad dismissed full screen content.'); ad.destroy(); }, // Called when presentation fails. onAdFailedToShowFullScreenContent: (error) => { console.error('Failed to show rewarded interstitial ad:', error); ad.destroy(); }, // Called when an impression is recorded. onAdImpression: () => { console.log('Rewarded interstitial ad recorded an impression.'); }, // Called when the user taps the ad. onAdClicked: () => { console.log('Rewarded interstitial ad was clicked.'); }, // Called when the ad is estimated to have earned money. onAdPaid: (adValue) => { console.log( `Rewarded interstitial ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`, ); }, }; } ``` This example also calls the `destroy` method when a user closes the ad or when the ad fails to show. This process releases the resources the ad used. ## Show the ad > [!IMPORTANT] > **Key Point:** Before displaying a rewarded interstitial ad to your users, present them with an intro screen that provides clear reward messaging and an option to skip the ad before it starts. To show a rewarded interstitial ad, call [`show`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt#RewardedInterstitialAd.show) on the loaded [`RewardedInterstitialAd`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt) instance and pass a callback to receive the [`Reward`](https://developers.google.com/admob/react-native/reference/interface/Reward.md.txt): ```tsx export function showRewardedInterstitialAd( ad: RewardedInterstitialAd, onRewardEarned: (reward: Reward) => void, ) { ad.show(onRewardEarned); } ``` ## Optional: Validate server-side verification callbacks If your app requires custom verification parameters, such as a user ID or custom reward metadata, in [server-side verification](https://developers.google.com/admob/react-native/ssv.md.txt) (SSV) callbacks, set the [`serverSideVerificationOptions`](https://developers.google.com/admob/react-native/reference/class/RewardedInterstitialAd.md.txt#RewardedInterstitialAd.serverSideVerificationOptions) property on the loaded ad instance before showing the ad. The values you set are passed to the SSV callback query parameters: - `userId`: Passes to the `user_id` query parameter to identify the user. - `customData`: Passes to the `custom_data` query parameter to forward custom metadata. The following example sets [`ServerSideVerificationOptions`](https://developers.google.com/admob/react-native/reference/interface/ServerSideVerificationOptions.md.txt) ([`customData`](https://developers.google.com/admob/react-native/reference/interface/ServerSideVerificationOptions.md.txt#ServerSideVerificationOptions.customData) and [`userId`](https://developers.google.com/admob/react-native/reference/interface/ServerSideVerificationOptions.md.txt#ServerSideVerificationOptions.userId)) on a rewarded interstitial ad object before showing an ad: ```tsx export function setServerSideVerificationRewardedInterstitial( ad: RewardedInterstitialAd, ) { ad.serverSideVerificationOptions = { userId: 'user_123', customData: 'sample_custom_data', }; } ``` > [!IMPORTANT] > **Key Point:** The `custom_data` query parameter value is [percent-escaped](https://en.wikipedia.org/wiki/Percent-encoding), or URL-encoded. When handling the SSV callback on your server, URL-decode this string before processing. ## View the full example This section covers the full example to integrate a rewarded interstitial ad into a React Native app. The following example integrates the ad into a React Native component, manages the ad instance in state, and provides controls to load and display the ad: ```tsx export function RewardedInterstitialSingleLoadScreen() { const [ad, setAd] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [status, setStatus] = useState('Idle'); const [reward, setReward] = useState(null); useEffect(() => { return () => { ad?.destroy(); }; }, [ad]); const handleLoad = async () => { setReward(null); setStatus('Loading Rewarded Interstitial ad...'); const loadedAd = await loadRewardedInterstitialAd( REWARDED_INTERSTITIAL_AD_UNIT_ID, ); if (loadedAd) { registerAdEvents(loadedAd); const onDismiss = loadedAd.adEventCallback?.onAdDismissedFullScreenContent; loadedAd.adEventCallback = { ...loadedAd.adEventCallback, onAdDismissedFullScreenContent: () => { onDismiss?.(); setStatus('Ad dismissed.'); }, }; setAd((prevAd) => { prevAd?.destroy(); return loadedAd; }); setIsLoaded(true); setStatus('Rewarded Interstitial ad loaded!'); } else { setStatus('Failed to load Rewarded Interstitial ad.'); } }; const handleShow = () => { if (ad) { showRewardedInterstitialAd(ad, (userReward) => { setReward(`${userReward.amount} ${userReward.type}`); }); setIsLoaded(false); } }; return ( Rewarded Interstitial Ad Status: {status} {reward && Earned: {reward}}