Interstitial Ads

Interstitial ads are full-screen or full-page ads that temporarily cover an app’s interface. They’re typically shown at natural pauses or transition points—such as after completing a level in a game or when navigating between major views.

The following sections show you how to load and then show an interstitial ad.

Loading an Interstitial Ad

The following code shows you how to attach listeners and load the first interstitial ad:

import { InterstitialAd } from 'react-native-applovin-max';

const INTERSTITIAL_AD_UNIT_ID = Platform.select({
  android: '«android-ad-unit-ID»',
  ios: '«ios-ad-unit-ID»',
});

const MAX_EXPONENTIAL_RETRY_COUNT = 6;
const retryAttempt = useRef(0);

const initializeInterstitialAds = () => {
  InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {
    // Interstitial ad is ready to show. InterstitialAd.isReady(INTERSTITIAL_AD_UNIT_ID) now returns 'true'

    // Reset retry attempt
    retryAttempt.current = 0;
  });
  InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
    // Interstitial ad failed to load
    // AppLovin recommends that you retry with exponentially higher delays up to a maximum delay (in this case 64 seconds)

    retryAttempt.current += 1;
    if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) return;
    const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));

    console.log('Interstitial ad failed to load - retrying in ' + retryDelay + 's');

    setTimeout(function() {
      loadInterstitial();
    }, retryDelay * 1000);
  });
  InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) = {
    // Interstitial ad failed to display. AppLovin recommends that you load the next ad
    loadInterstitial();
  });
  InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => {
    loadInterstitial();
  });

  // Load the first interstitial
  loadInterstitial();
}

const loadInterstitial = () => {
  InterstitialAd.loadAd(INTERSTITIAL_AD_UNIT_ID);
}

Showing an Interstitial Ad

See also

Best Practices: When Is it Best to Display Interstitial Ads?

Show an interstitial ad by calling showAd():

const isInterstitialReady = await InterstitialAd.isAdReady(«ad-unit-ID»);
if (isInterstitialReady) {
  InterstitialAd.showAd(«ad-unit-ID»);
}