Interstitial

An interstitial ad is a fullscreen format, usually skippable after the first few seconds of its display. Because of this, it's commonly used in transitions of the app or game, such as completing a level or navigating to a different screen.

To start using interstitial ads, just call Load() using a valid placement id and then use one of the available Show() functions when you need it to be displayed.

Start loading an ad

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

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

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

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

Showing an ad

Calling isReady() will return if there's an interstitial 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 } = useInterstitial();
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 interstitial ad that triggered the event.

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

Code example

In addition to the example below, you can see a full implementation.

InterstitialTest.tsx

InterstitialTest.tsx

import React, { useEffect } from "react";
import { View, Text, Button } from "react-native";
import { useInterstitial, useInterstitialEvents } from "react-native-xmediator";

export const InterstitialExample = () => {
  const { load, show, isReady } = useInterstitial();

  useEffect(() => {
    load("<placement-id>");
  }, []);

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

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

  return (
    <View>
      <Text>Interstitial Example</Text>
      <Button title="Show Interstitial" onPress={handleShowInterstitial} />
    </View>
  );
};