Rewarded

Rewarded ads (also known as rewarded video ads) are a fullscreen format, but unlike interstitials the user is incentivized to watch its entire duration (usually 30 seconds) in order to get an in-app reward, such as in-game currency, extra lives or hints to pass a level.

The onEarnedReward callback will be triggered by the adapted network, signaling that you can give the user their reward. If the user decides to skip the ad, this callback will not be called.

Start loading an ad

import { useRewarded } from "react-native-xmediator";

export default function App() {
  const { load, show, isReady } = useRewarded();

  // use effect to load rewarded when component mounts
  useEffect(() => {
    load({
      placementId: "<placement-id>",
    });
  }, []);

  return <>{/* your app code... */}</>;
}

Showing an ad

Calling isReady() will return if there's a rewarded ad available to be shown, regardless of its placement id. If multiple ads with different placement ids were previously loaded, the SDK will try to show the best one available.

const { show, isReady } = useRewarded();
if (isReady("<placement-id>")) {
  show("<placement-id>");
}

Auto loading

Dismissed or failed to show ads will automatically trigger a new load request.

Auto retry

Failed to load ads will make a retry attempts, with an exponential backoff.

Additional settings

Register ad callbacks

Every ad callback indicates the placement id of the rewarded ad that triggered the event.

useRewardedEvents(
  {
    onLoaded: (placementId, loadResult) => {
      console.log("[Demo App] rewarded loaded", placementId, loadResult);
    },
    onShowed: (placementId) => {
      console.log("[Demo App] rewarded showed", placementId);
    },
    onFailedToShow: (placementId, showError) => {
      console.log("[Demo App] rewarded failed to show", placementId, showError);
    },
    onDismissed: (placementId) => {
      console.log("[Demo App] rewarded dismissed", placementId);
    },
    onImpression: (placementId, impressionData) => {
      console.log(
        "[Demo App] rewarded impression",
        placementId,
        impressionData
      );
    },
    onClicked: (placementId) => {
      console.log("[Demo App] rewarded clicked", placementId);
    },
    onEarnedReward: (placementId) => {
      console.log("[Demo App] rewarded earned reward", placementId);
    },
  },
  []
);

Code example

In addition to the example below, you can see a fully implementation;

RewardedTest.tsx

import { useEffect, useState } from "react";
import { Button, Text, View } from "react-native";
import { useRewarded, useRewardedEvents } from "react-native-xmediator";

export default function RewardedExample() {
  const { load, show, isReady } = useRewarded();
  const [isEarned, setIsEarned] = useState(false);
  useEffect(() => {
    load("<placement-id>");
  }, []);
  const handleShowRewarded = () => {
    if (isReady("<placement-id>")) {
      show("<placement-id>");
    }
  };
  useRewardedEvents(
    {
      onLoaded: (placementId, loadResult) => {
        console.log("[Demo App] rewarded loaded", placementId, loadResult);
      },
      onClicked: (placementId) => {
        console.log("[Demo App] rewarded clicked", placementId);
      },
      onImpression: (placementId, impressionData) => {
        console.log(
          "[Demo App] rewarded impression",
          placementId,
          impressionData
        );
      },
      onDismissed: (placementId) => {
        console.log("[Demo App] rewarded dismissed", placementId);
      },
      onFailedToShow: (placementId) => {
        console.log("[Demo App] rewarded failed to show", placementId);
      },
      onShowed: (placementId) => {
        console.log("[Demo App] rewarded showed", placementId);
      },
      onEarnedReward: (placementId) => {
        console.log("[Demo App] rewarded earned reward", placementId);
        setIsEarned(true);
      },
    },
    []
  );
  return (
    <View>
      <Text>Rewarded Example</Text>
      <Button title="Show Rewarded" onPress={handleShowRewarded} />
      <Text>{`is earned: ${isEarned === true ? "Yes" : "No"}`}</Text>
    </View>
  );
}