> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Interstitial Ads

> Implement interstitial ads in your React Native app.

## Interstitial Ad Format

Full-screen ads that cover the entire app interface. Includes both image and video ads (video more common), typically skippable after 5 seconds.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/interstitial-example-image.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=7404e29ead548d55d8d587336f8721f9" alt="Interstitial Example Image Pn" title="Interstitial Example Image Pn" style={{ width:"40%" }} width="1080" height="2336" data-path="sdk-integration/common-img/ad-formats-en/interstitial-example-image.png" />

### How It Works

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/interstitial-example-gif.gif?s=9f37cff5b366f1e05211b0d177b3926b" alt="Interstitial Example Gif Gi" title="Interstitial Example Gif Gi" style={{ width:"40%" }} width="240" height="518" data-path="sdk-integration/common-img/ad-formats-en/interstitial-example-gif.gif" />

***

## Loading Ads

You can load ads through `InterstitialAd.loadAd(unitId)`.

<Tabs>
  <Tab title="Non-Reward">
    ```javascript theme={null}
    import { InterstitialAd } from "react-native-daro";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro";
    ```
  </Tab>

  <Tab title="Reward">
    ```javascript theme={null}
    import { InterstitialAd } from "react-native-daro-m";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro-m";
    ```
  </Tab>
</Tabs>

```javascript theme={null}

const INTERSTITIAL_AD_UNIT_ID = Platform.select({
    ios: ${iOS unit Id},
    android: ${Android unit id},
    default: ''
});

const initializeInterstitialAds = () => {
  InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {...});
  InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {...});
  InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) = { ... });
  InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdImpressionRecordedListener((adInfo: AdInfo) => { ... });

  // Load the first interstitial
  loadInterstitial();
}

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

## Showing Ads

You can show loaded ads through `InterstitialAd.showAd(unitId)`.

```javascript theme={null}
const isInterstitialReady = await InterstitialAd.isAdReady(
  INTERSTITIAL_AD_UNIT_ID
);

if (isInterstitialReady) {
  InterstitialAd.showAd(INTERSTITIAL_AD_UNIT_ID);
}
```

### Implementation Example

<Accordion title="This is an example implementation of `InterstitialAd`." icon="sparkles">
  ```javascript theme={null}
  import { useEffect, useRef, useState } from "react";
  import { StyleSheet } from "react-native";
  // For import statements, refer to the tabs above
  import { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo, AdRevenueInfo, InterstitialAd } from "react-native-daro-m";
  import { ThemedButton } from "../ThemedButton";

  enum AdLoadState {
    notLoaded = 'NOT_LOADED',
    loading = 'LOADING',
    loaded = 'LOADED',
  }

  type Props = {
    adUnitId: string;
    isInitialized: boolean;
    log: (str: string) => void;
  };

  const MAX_EXPONENTIAL_RETRY_COUNT = 3;

  const InterstitialAdExample = ({ adUnitId, isInitialized, log }: Props) => {
    const [adLoadState, setAdLoadState] = useState<AdLoadState>(AdLoadState.notLoaded);
    const retryAttempt = useRef(0);

    useEffect(() => {
      InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {
        setAdLoadState(AdLoadState.loaded);
        retryAttempt.current = 0;
        log(`Interstitial ad loaded`);
      });

      InterstitialAd.addAdImpressionRecordedListener((adInfo: AdRevenueInfo) => {
        log(`Interstitial ad revenue paid`);
      });

      InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => {
        log(`Interstitial ad clicked`);
      });

      // Handle ad load failure
      InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
        setAdLoadState(AdLoadState.notLoaded)

        if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) {
          log('Interstitial ad failed to load with code ' + errorInfo.code);
          return;
        }

        // Interstitial ad failed to load
        // We recommend retrying with exponentially higher delays up to a maximum delay (in this case 64 seconds)
        retryAttempt.current += 1;

        const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
        log('Interstitial ad failed to load with code ' + errorInfo.code + ' - retrying in ' + retryDelay + 's');

        setTimeout(() => {
          setAdLoadState(AdLoadState.loading);
          log('Interstitial ad retrying to load...');
          InterstitialAd.loadAd(adUnitId);
        }, retryDelay * 1000);
      });

      InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => {
        log(`Interstitial ad displayed`);
      });

      InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => {
        setAdLoadState(AdLoadState.notLoaded);
        log(`Interstitial ad failed to display`);
      });

      InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => {
        setAdLoadState(AdLoadState.notLoaded);
        log(`Interstitial ad hidden`);
      });

    }, [adUnitId]);

    const getInterstitialButtonTitle = () => {
      if (adLoadState === AdLoadState.notLoaded) {
        return 'Load Interstitial';
      } else if (adLoadState === AdLoadState.loading) {
        return 'Loading...';
      } else {
        return 'Show Interstitial'; // adLoadState.loaded
      }
    };
    return (
      <ThemedButton
        isEnabled={isInitialized && adLoadState !== AdLoadState.loading}
        isLoading={adLoadState === AdLoadState.loading}
        title={getInterstitialButtonTitle()}
        onPress={async () => {
          const isInterstitialReady = await InterstitialAd.isAdReady(adUnitId);
          if (isInterstitialReady) {
            InterstitialAd.showAd(adUnitId);
        } else {
          log('Loading interstitial ad...');
          setAdLoadState(AdLoadState.loading);
          InterstitialAd.loadAd(adUnitId);
        }
      }} />
    );
  }

  const styles = StyleSheet.create({
    button: {
      margin: 5,
    },
  });

  export default InterstitialAdExample;
  ```
</Accordion>