Load a single rewarded interstitial ad

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.

This guide explains how to integrate rewarded interstitial ads into a React Native app.

Prerequisites

Before you continue, do the following:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Load an ad

To load a rewarded interstitial ad, call the load method on the RewardedInterstitialAd class.

The following example loads a rewarded interstitial ad on success and logs an error on failure:

export async function loadRewardedInterstitialAd(
  adUnitId: string,
): Promise<RewardedInterstitialAd | null> {
  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 listener on the loaded RewardedInterstitialAd 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.

The following example sets callbacks to listen for ad events:

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

To show a rewarded interstitial ad, call show on the loaded RewardedInterstitialAd instance and pass a callback to receive the Reward:

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 (SSV) callbacks, set the 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 (customData and userId) on a rewarded interstitial ad object before showing an ad:

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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:

export function RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');
  const [reward, setReward] = useState<string | null>(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 (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</Text>}
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Next steps

After you integrate rewarded interstitial ads, explore the following topics: