First Look

import { useCallback, useEffect, useRef } from 'react';
import { useInterstitialAd } from 'react-native-google-mobile-ads';
import { useCloudXInterstitial } from 'cloudx-react-native';

export function useFirstLookInterstitial(
  cloudXAdUnitId: string,
  adMobAdUnitId: string,
) {
  const {
    error: cloudXError,
    isLoaded: isCloudXLoaded,
    isLoading: isCloudXLoading,
    load: loadCloudX,
    show: showCloudX,
  } = useCloudXInterstitial(cloudXAdUnitId);
  const {
    error: adMobError,
    isClosed: isAdMobClosed,
    isLoaded: isAdMobLoaded,
    load: loadAdMob,
    show: showAdMob,
  } = useInterstitialAd(adMobAdUnitId);
  const adMobLoadRequested = useRef(false);
  const state = useRef({
    isAdMobLoaded,
    isCloudXLoaded,
    isCloudXLoading,
  });

  state.current = {
    isAdMobLoaded,
    isCloudXLoaded,
    isCloudXLoading,
  };

  useEffect(() => {
    if (
      cloudXError &&
      !isAdMobLoaded &&
      !adMobLoadRequested.current
    ) {
      adMobLoadRequested.current = true;
      loadAdMob();
    }
  }, [cloudXError, isAdMobLoaded, loadAdMob]);

  useEffect(() => {
    if (adMobError || isAdMobClosed) {
      adMobLoadRequested.current = false;
    }
  }, [adMobError, isAdMobClosed]);

  const load = useCallback(() => {
    const current = state.current;

    if (
      current.isCloudXLoading ||
      current.isCloudXLoaded ||
      current.isAdMobLoaded ||
      adMobLoadRequested.current
    ) {
      return;
    }

    loadCloudX();
  }, [loadCloudX]);

  const show = useCallback((): boolean => {
    const current = state.current;

    if (current.isCloudXLoaded) {
      showCloudX();
      return true;
    }

    if (current.isAdMobLoaded) {
      showAdMob();
      return true;
    }

    return false;
  }, [showAdMob, showCloudX]);

  return {
    isReady: isCloudXLoaded || isAdMobLoaded,
    load,
    show,
  };
}

const firstLookInterstitial = useFirstLookInterstitial(
  CLOUDX_INTERSTITIAL_AD_UNIT_ID,
  ADMOB_INTERSTITIAL_AD_UNIT_ID,
);

useEffect(() => {
  firstLookInterstitial.load();
}, [firstLookInterstitial.load]);

const continueToNextScreen = () => {
  if (!firstLookInterstitial.show()) {
    navigation.navigate('NextScreen');
  }
};