Rewarded Video Integration for React Native

Step 1. Implement the Rewarded Video Listener

The ironSource React Native Plugin fires several events to inform you of ad availability and completions so you’ll know when to reward your users.

Set the LevelPlayRewardedVideo listener:

IronSource.setLevelPlayRewardedVideoListener([YOUR_LISTENER])

The Plugin will notify the Listener of all possible events listed below:

    /**
     * The Rewarded Video ad view has opened.
     * [adInfo] includes information about the loaded ad
     * 
     * Android: onAdOpened
     *     iOS: didOpenWithAdInfo
     */
    onAdOpened?: (adInfo: IronSourceAdInfo) => void;
    /**
     * The Rewarded Video ad view is about to be closed.
     * [adInfo] includes information about the loaded ad
     * 
     * Android: onAdClosed
     *     iOS: didCloseWithAdInfo
     */
    onAdClosed?: (adInfo: IronSourceAdInfo) => void;
    /**
     * The user completed watching the video, and should be rewarded.
     * [placement] placement will include the reward data.
     * [adInfo] includes information about the loaded ad
     * 
     * Android: onAdRewarded
     *     iOS: didReceiveRewardForPlacement
     */
    onAdRewarded?: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => void; 
    /**
     * The rewarded video ad failed to show.
     * [error] includes information about the error
     * [adInfo] includes information about the loaded ad
     * 
     * Android: onAdShowFailed
     *     iOS: didFailToShowWithError
     */
    onAdShowFailed?: (error: IronSourceError, adInfo: IronSourceAdInfo) => void;    
    /**
     * Invoked when the video ad was clicked.
     * This callback is not supported by all networks, and we recommend using it
     * only if it's supported by all networks you included in your build.
     * [placement] placement will include the reward data.
     * [adInfo] includes information about the loaded ad
     * 
     * Android: onAdClicked
     *     iOS: didClick
     */
    onAdClicked?: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => void;
/**
   * Indicates that there's an available ad.
   * [adInfo] includes information about the ad that was loaded successfully
   * 
   * Android: onAdAvailable
   *     iOS: hasAvailableAdWithAdInfo
   */
  onAdAvailable?: (adInfo: IronSourceAdInfo) => void;
  /**
   * Indicates that no ads are available to be displayed.
   * 
   * Android: onAdUnavailable
   *     iOS: hasNoAvailableAd
   */
  onAdUnavailable?: () => void;

Error Codes

ironSource provides an error code mechanism to help you understand any error you may encounter during integration or in live production. See the complete guide here.

Network Connectivity Status

You can determine and monitor the internet connection on the user’s device through the ironSource Network Change Status function.  This enables the SDK to change its ad availability according to network modifications, i.e., in the case of no network connection, the availability will turn into “false”. The default of this function is “false”; if you’d like to listen to changes in the connectivity, activate it in the SDK initialization with the following API:

await IronSource.shouldTrackNetworkState(true);

Step 2. Show a Video Ad to Your Users

Ad Availability

You will receive the availability status of a Rewarded Video ad through the onAdAvailable / onAdUnavailable event callback. 

onAdAvailable: (adInfo: IronSourceAdInfo) => {},
onAdUnavailable: () => {},

In addition, you have the possibility to ask for ad availability directly by calling:

const isAvailable: boolean = await IronSource.isRewardedVideoAvailable();

Serve a Video Ad

Once an ad network has a video available, you are ready to show the video to your users. Before you display the ad, make sure to pause any game actions including audio to ensure the best experience for your users. Call showRewardedVideo to show the loaded video ad to your users:

IronSource.showRewardedVideo();

Ad Placements

With the ironSource Ad Placements tool, you can customize and optimize the Rewarded Video experience. This tool enables you to present videos to your users from different placements depending on the reward. You can use the function below to define the exact Placement you’d like to show an ad from. Navigate to the Ad Placement document for more details.

IronSource.showRewardedVideo('YOUR_PLACEMENT_NAME');

To get the details of a specific reward associated with each ad placement, you can call the following:

const placement: IronSourceRVPlacement = await IronSource.getRewardedVideoPlacementInfo('YOUR_PLACEMENT_NAME');
// Placement would fallback to the default placement if placementName is invalid.
const rewardName: string = placement.rewardName;
const rewardAmount: number = placement.rewardAmount;

Capping & Pacing

In addition to ironSource’s Ad Placements, you can now configure capping and pacing settings for selected placements. Capping and pacing improve the user experience in your app by limiting the number of ads served within a defined timeframe. Read more about capping and pacing here.

If you choose to use the capping and pacing tool for Rewarded Video, we recommend calling the function below to verify if a specific placement has reached its limit. This is to ensure not to display a Rewarded Video button when the placement has been capped or paced, and thus the video ad will not be served.

isRewardedVideoPlacementCapped(placementName: string): Promise<boolean>

Dynamic User ID

The Dynamic UserID is a parameter to verify AdRewarded transactions and can be changed throughout a session. To receive this parameter through server-to-server callbacks, it must be set before calling showRewardedVideo. You will receive a dynamicUserId parameter in a callback URL with reward details.

setDynamicUserId(userId: string): Promise<void>

Make sure you’ve set the userID before initializing the ironSource SDK in order to successfully reward your users.

Step 3. Reward the User

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

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

onAdRewarded(
onAdRewarded: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {
      const rewardName: string = placement.rewardName;
      const rewardAmount: string = placement.rewardAmount;
}

Server-to-server callbacks

If you turn on server-to-server callbacks, make sure you’ve set the userID before you initialize the ironSource SDK so your users can get rewarded, and make sure to reward your user only once for the same completion.

ironSource LevelPlay will be firing both the client-side callback and the server-to-server callback. So, you will get two notifications in total for each completion.

To utilize server-to-server callbacks, see here.

Done!

You are now all set to deliver Rewarded Video in your application.