Skip to main content

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 are full-screen ads that grant users a reward upon completion.
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

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.