Rewarded Video Integration for React Native

Before you start

• Make sure that you have correctly integrated the React Native Plugin into your app. Integration is outlined here.
• Make sure to initialize the SDK using LevelPlay Initialization API.
• You can find the AdUnitID in LevelPlay dashboard. Learn more here.
• This documentation is relevant for SDK 8.7.0+. Documentation for legacy APIs (SDK 8.7.0 and below) can be found here: manual rewarded video and automatic rewarded video.

Create Rewarded and Register to Events

Once you receive the onInitSuccess callback, you can create an ad unit using the relevant Ad Unit ID, as defined in the LevelPlay platform (Initializing the ironSource SDK step).

Set the rewarded listener for the rewarded ad unit created, to get informed of ad delivery.

const [rewardedAd, setRewardedAd] = useState < LevelPlayRewardedAd > (new LevelPlayRewardedAd([YOUR_AD_UNIT]))
useEffect(() => {
    const listener: LevelPlayRewardedAdListener = {
        onAdLoaded: (adInfo: LevelPlayAdInfo) => {
            // Provided when the ad is successfully loaded
        },
        onAdLoadFailed: (error: LevelPlayAdError) => {
            // Provided when the ad fails to load. Ad Unit information is included
        },
        onAdInfoChanged: (adInfo: LevelPlayAdInfo) => {
            // Provided when the ad info is updated. Available when another ad has loaded, and includes a higher CPM/Rate
        },
        onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
            // Provided when the ad is displayed
        },
        onAdDisplayFailed: (error: LevelPlayAdError, adInfo: LevelPlayAdInfo) => {
            // Provided when the ad fails to be displayed
        },
        onAdClicked: (adInfo: LevelPlayAdInfo) => {
            // Provided when the user clicks on the ad
        },
        onAdClosed: (adInfo: LevelPlayAdInfo) => {
            // Provided when the ad is closed
        },
        onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayInfo) => {
            // Provided when the ad is rewarded. Ad Unit info and the reward info are included.
        }
    };
    rewardedAd.setListener([YOUR_LISTENER]);
}, [rewardedAd]);
Light theme
Dark theme
Copy to clipboard

LevelPlay Rewarded Ad Callbacks

onAdLoaded – Provided when the ad is successfully loaded

onAdLoadFailed – Provided when the ad fails to load. Ad Unit information is included

onAdDisplayed – Provided when the ad is displayed. This is equivalent to an impression

onAdDisplayFailed (optional) – Provided when the ad fails to be displayed

onAdRewarded – Provided when the ad is rewarded. Ad Unit info and the reward info are included.

onAdClicked (optional) – Provided when the user clicks on the ad

onAdClosed – Provided when the ad is closed

onAdInfoChanged (optional) – Provided when the ad info is updated. Available when another ad has loaded, and includes a higher CPM/Rate

Load Rewarded Ad

Once you receive the onInitSuccess callback, you are ready to load an rewarded ad. This should be done using the method:

rewardedAd.loadAd();
Light theme
Dark theme
Copy to clipboard

Show Rewarded Ad

You can show an rewarded ad after you receive onAdLoaded callback, using the showAd APIs.

If you are using placements, share their name as part of the API, as shown below.

// Show ad without placement
rewardedAd.showAd();
// Show ad with placement
rewardedAd.showAd([YOUR_PLACEMENT]);
Light theme
Dark theme
Copy to clipboard

Check ad ready

To avoid show failures, and to make sure the ad could be displayed correctly, we recommend using the following API, before calling the showAd() API.

isAdReady – returns true if ad was loaded successfully and ad unit is not capped, or false otherwise.

isPlacementCapped – returns true when a valid placement is capped. If the placement is not valid, or not capped, this API will return false.

// Check that ad is ready and that the placement is not capped 
if(rewardedAd.isAdReady() && !LevelPlayRewardedAd.isPlacementCapped([YOUR_PLACEMENT])) {
   rewardedAd.showAd([YOUR_PLACEMENT]);
}
Light theme
Dark theme
Copy to clipboard

Once the ad was displayed successfully to the player, you can load another ad, repeating the Load Rewarded Ad step. There is no need to create a new ad entity, when loading a single ad at a time.

Reward the User

The LevelPlay SDK will fire the onAdRewarded each time the user successfully completes a video.

The onAdRewarded and onAdClosed are asynchronous. Make sure to set up your listener to grant rewards even in cases where onAdRewarded is fired after the onAdClosed.

onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayInfo) => {
    // Provided when the ad is rewarded. Ad Unit info and the reward info are included
}
Light theme
Dark theme
Copy to clipboard

Multiple Ad Unit Rewarded APIs

Full Implementation Example of Rewarded Ad

const [rewardedAd, setRewardedAd] = useState < LevelPlayRewardedAd > (new LevelPlayRewardedAd('YOUR_AD_UNIT_ID'))
const listener: LevelPlayRewardedAdListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here, for example showing the ad
        rewardedAd.showAd()
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
        // Implement your logic here...
    },
    onAdInfoChanged: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdDisplayFailed: (error: LevelPlayAdError, adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdClosed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    }
};
useEffect(() => {
    rewardedAd.setListener(listener)
    rewardedAd.loadAd()
}, []);
// Rest of component ...
// End of component ...
Light theme
Dark theme
Copy to clipboard

LevelPlay Mediation Demo App

The Integration Demo application demonstrates how to integrate rewarded Ad Unit APIs in your app.

Download React Native Demo Application

Done!
You are now all set up to serve rewarded ads in your application. Verify your integration with our Integration Test Suite.