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

# Rewarded Ads

> Integrate CloudX rewarded ads in React Native apps

Rewarded ads are full-screen ads that grant users a reward upon completion.

```typescript theme={null}
import { CloudXRewardedAd } from 'cloudx-react-native';

const AD_UNIT_ID = 'rewarded_coins';

CloudXRewardedAd.addAdLoadedEventListener((adInfo) => {
    console.log('Rewarded loaded from', adInfo.networkName);
});
CloudXRewardedAd.addAdLoadFailedEventListener((error) => {
    console.log('Rewarded load failed:', error.code, error.message);
});
CloudXRewardedAd.addAdDisplayedEventListener((adInfo) => {
    console.log('Rewarded displayed');
});
CloudXRewardedAd.addAdFailedToDisplayEventListener((error) => {
    console.log('Rewarded display failed:', error.code, error.message);
});
CloudXRewardedAd.addAdReceivedRewardEventListener((rewardInfo) => {
    console.log(`Earned ${rewardInfo.rewardAmount} ${rewardInfo.rewardLabel}`);
});
CloudXRewardedAd.addAdClickedEventListener((adInfo) => {
    console.log('Rewarded clicked');
});
CloudXRewardedAd.addAdHiddenEventListener(() => {
    CloudXRewardedAd.loadAd(AD_UNIT_ID);
});
CloudXRewardedAd.addAdRevenuePaidListener((adInfo) => {
    console.log('Revenue:', adInfo.revenue);
});

CloudXRewardedAd.loadAd(AD_UNIT_ID);

const isReady = await CloudXRewardedAd.isAdReady(AD_UNIT_ID);
if (isReady) {
    CloudXRewardedAd.showAd(AD_UNIT_ID);
    // Or with optional placement and custom data:
    // CloudXRewardedAd.showAd(AD_UNIT_ID, 'bonus_coins', 'custom_data');
} else {
    console.warn('Rewarded ad not ready yet');
}

// Destroy when no longer needed.
CloudXRewardedAd.destroyAd(AD_UNIT_ID);
```

`CloudXAdRewardInfo` extends `CloudXAdInfo` with:

* `rewardLabel?: string` - the label of the reward, such as `"coins"`.
* `rewardAmount: number` - the reward quantity.

## React Hook

```typescript theme={null}
import { useCloudXRewarded } from 'cloudx-react-native';

function RewardScreen() {
    const { isLoaded, isLoading, error, rewardEarned, load, show } =
        useCloudXRewarded('rewarded_coins');

    useEffect(() => {
        load();
    }, [load]);

    useEffect(() => {
        if (rewardEarned) {
            grantCoinsToUser();
        }
    }, [rewardEarned]);

    return (
        <Button
            title="Watch Ad for Coins"
            onPress={() => show()}
            disabled={!isLoaded}
        />
    );
}
```

Returns: `{ isLoaded, isLoading, error, rewardEarned, load, show, destroy }`

* `rewardEarned` becomes `true` when the user completes the ad.
* `rewardEarned` resets to `false` on the next `load()` call or when the ad is hidden.