> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Rewarded Video Ads

> Implement rewarded video ads in your React Native app.

## Rewarded Video Ad Format

Provides in-app rewards (currency, features, content) in exchange for watching video ads. Videos are non-skippable and typically run 30 seconds.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/rv-example-image.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=05e99c43024f69661838e187b20caf06" alt="Rv Example Image Pn" title="Rv Example Image Pn" style={{ width:"40%" }} width="720" height="1560" data-path="sdk-integration/common-img/ad-formats-en/rv-example-image.png" />

### How It Works

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/rv-example-gif.gif?s=d1b005af49b37b3c1306ef47728165bb" alt="Rv Example Gif Gi" title="Rv Example Gif Gi" style={{ width:"38%" }} width="180" height="390" data-path="sdk-integration/common-img/ad-formats-en/rv-example-gif.gif" />

***

## Loading Ads

You can load ads through `RewardedAd.loadAd(unitId)`.

<Tabs>
  <Tab title="Non-Reward">
    ```javascript theme={null}
    import { RewardedAd } from "react-native-daro";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro";
    ```
  </Tab>

  <Tab title="Reward">
    ```javascript theme={null}
    import { RewardedAd } from "react-native-daro-m";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro-m";
    ```
  </Tab>
</Tabs>

```javascript theme={null}


const initializeRewardedAds = () => {
  RewardedAd.addAdLoadedEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => { ... });
  RewardedAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => { ... });
  RewardedAd.addAdHiddenEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdReceivedRewardEventListener((adInfo: AdRewardInfo) => { ... });
  RewardedAd.addAdImpressionRecordedListener((adInfo: AdInfo) => { ... });

  // Load the first rewarded ad
  loadRewardedAd();
}

const loadRewardedAd = () => {
  RewardedAd.loadAd(REWARDED_AD_UNIT_ID);
}
```

## Showing Ads

You can show loaded ads through `RewardedAd.showAd(unitId)`.

```javascript theme={null}
const isRewardedReady = await RewardedAd.isAdReady(REWARDED_AD_UNIT_ID);

if (isInterstitialReady) {
  RewardedAd.showAd(REWARDED_AD_UNIT_ID);
}
```

### Implementation Example

<Accordion title="This is an example implementation of `RewardedAd`." icon="sparkles">
  ```javascript theme={null}

  import { useEffect, useRef, useState } from "react";
  import { StyleSheet } from "react-native";
  // For import statements, refer to the tabs above
  import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro-m";
  import { RewardedAd } from "react-native-daro-m";
  import { ThemedButton } from "../ThemedButton";

  const MAX_EXPONENTIAL_RETRY_COUNT = 6;

  enum AdLoadState {
    notLoaded = 'NOT_LOADED',
    loading = 'LOADING',
    loaded = 'LOADED',
  }

  type Props = {
    adUnitId: string;
    isInitialized: boolean;
    log: (str: string) => void;
  };

  const RewardedAdExample = ({ adUnitId, isInitialized, log }: Props) => {
    const [adLoadState, setAdLoadState] = useState<AdLoadState>(AdLoadState.notLoaded);

    const retryAttempt = useRef(0);

    useEffect(() => {
      RewardedAd.addAdLoadedEventListener((adInfo: AdInfo) => {
        setAdLoadState(AdLoadState.loaded);

        log('Rewarded ad loaded');

        // Reset retry attempt
        retryAttempt.current = 0;
      });

      RewardedAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
        setAdLoadState(AdLoadState.notLoaded);

        if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) {
          log('Rewarded ad failed to load with code ' + errorInfo.code);
          return;
        }

        // Rewarded ad failed to load
        // We recommend retrying with exponentially higher delays up to a maximum delay (in this case 64 seconds)
        retryAttempt.current += 1;

        const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
        log('Rewarded ad failed to load with code ' + errorInfo.code + ' - retrying in ' + retryDelay + 's');

        setTimeout(() => {
          setAdLoadState(AdLoadState.loading);
          log('Rewarded ad retrying to load...');
          RewardedAd.loadAd(adUnitId);
        }, retryDelay * 1000);
      });

      RewardedAd.addAdClickedEventListener((/* adInfo: AdInfo */) => {
        log('Rewarded ad clicked');
      });
      RewardedAd.addAdDisplayedEventListener((/* adInfo: AdInfo */) => {
        log('Rewarded ad displayed');
      });
      RewardedAd.addAdFailedToDisplayEventListener((/* adInfo: AdDisplayFailedInfo */) => {
        setAdLoadState(AdLoadState.notLoaded);
        log('Rewarded ad failed to display');
      });
      RewardedAd.addAdHiddenEventListener((/* adInfo: AdInfo */) => {
        setAdLoadState(AdLoadState.notLoaded);
        log('Rewarded ad hidden');
      });
      RewardedAd.addAdReceivedRewardEventListener((/* adInfo: AdRewardInfo */) => {
        log('Rewarded ad granted reward');
      });
      RewardedAd.addAdImpressionRecordedListener((adInfo: AdRevenueInfo) => {
        log('Rewarded ad revenue paid: ' + adInfo.revenue);
      });
    }, [adUnitId, log]);

    const getRewardedButtonTitle = () => {
      if (adLoadState === AdLoadState.notLoaded) {
        return 'Load Rewarded';
      } else if (adLoadState === AdLoadState.loading) {
        return 'Loading...';
      } else {
        return 'Show Rewarded'; // adLoadState.loaded
      }
    };

    return (
      <ThemedButton
        isLoading={adLoadState === AdLoadState.loading}
        isEnabled={isInitialized && adLoadState !== AdLoadState.loading}
        title={getRewardedButtonTitle()}
        onPress={async () => {
          const isRewardedReady = await RewardedAd.isAdReady(adUnitId);
          if (isRewardedReady) {
            log('Rewarded ad ready to show');
            RewardedAd.showAd(adUnitId);
          } else {
            log('Loading rewarded ad...');
            setAdLoadState(AdLoadState.loading);
            RewardedAd.loadAd(adUnitId);
          }
        }}
      />
    );
  }


  const styles = StyleSheet.create({
    button: {
      margin: 5,
    },
  });

  export default RewardedAdExample;
  ```
</Accordion>

## Rewarded Video Ad Callback Methods

* The following code shows how to tag a user's internal User ID and add CustomData to the callback.
  * The maximum size of the User ID string is 8192 characters.

```javascript theme={null}

setUserId("${USER_ID}");

...

const isRewardedReady = await RewardedAd.isAdReady(REWARDED_AD_UNIT_ID);

if (isInterstitialReady) {
  RewardedAd.showAd(REWARDED_AD_UNIT_ID. "${CUSTOM_DATA}");
}
```