<br />

Rewarded ads give your users in-app items for interacting with
video ads, playable ads, and surveys. For details, see
[Overview of rewarded ad units](https://support.google.com/admob/answer/7372450).

This guide shows you how to integrate rewarded 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/5224354917

### iOS

    ca-app-pub-3940256099942544/1712485313

## Load an ad

To load a rewarded ad, call the [`load`](https://developers.google.com/admob/react-native/reference/class/RewardedAd.md.txt#RewardedAd.load) method on
the [`RewardedAd`](https://developers.google.com/admob/react-native/reference/class/RewardedAd.md.txt) class.

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

```tsx
export async function loadRewardedAd(
  adUnitId: string,
): Promise<RewardedAd | null> {
  try {
    const ad = await RewardedAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load rewarded ad:', 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/RewardedAd.md.txt#RewardedAd.adEventCallback) listener on the loaded
[`RewardedAd`](https://developers.google.com/admob/react-native/reference/class/RewardedAd.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: RewardedAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded 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 ad, call the [`show`](https://developers.google.com/admob/react-native/reference/class/RewardedAd.md.txt#RewardedAd.show) method with
a callback to handle the reward that the user earned:

```tsx
export function showRewardedAd(
  ad: RewardedAd,
  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/RewardedAd.md.txt#RewardedAd.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 ad
object before showing an ad:

```tsx
export function setServerSideVerificationRewarded(ad: RewardedAd) {
  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 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 RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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 a rewarded ad, explore the following topics:

- [Impression-level ad revenue](https://developers.google.com/admob/react-native/impression-level-ad-revenue.md.txt)
- [User privacy and consent](https://developers.google.com/admob/react-native/privacy.md.txt)