CODEWITHSUNDEEP
firebasereact-nativeadmob
Suman Bhattarai
Suman Bhattarai

Reputation: 201

AdMob interstitial ad only shown once react native

import { InterstitialAd, AdEventType, TestIds } from '@react-native-firebase/admob';

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  requestNonPersonalizedAdsOnly: true,
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const eventListener = interstitial.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        setLoaded(true);
      }
    });

    // Start loading the interstitial straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      eventListener();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Interstitial"
      onPress={() => {
        interstitial.show();
      }}
    />
  );
}

When I click the button for the first time, the ad is shown. But when I again click the button it'll throw me an error.

Error: firebase.admob().InterstitialAd.show() The requested Interstitial Ad hasnt been loaded and could not be shown.

How can I solve this? I want to show an ad every time I click on the button.

Upvotes: 3

Views: 3327

Answers (2)

mkilincaslan
mkilincaslan

Reputation: 39

Here is my method to run it multiple times;

import React, { useRef, useEffect, useState } from "react";
import { View, Button } from "react-native";
import { InterstitialAd, AdEventType, TestIds } from "react-native-google-mobile-ads";

const interstitialAd = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
  requestNonPersonalizedAdsOnly: true,
});

export default function App() {
  const [isAdLoaded, setIsAdLoaded] = useState(false);

  useEffect(() => {
    const adLoadListener = interstitialAd.addAdEventListener(AdEventType.LOADED, () => {
      setIsAdLoaded(true);
    });

    const adCloseListener = interstitialAd.addAdEventListener(AdEventType.CLOSED, () => {
      // Reload the ad after it's shown or closed
      interstitialAd.load();
      setIsAdLoaded(false);
    });

    // Load the first ad
    interstitialAd.load();

    return () => {
      adLoadListener();
      adCloseListener();
    };
  }, []);

  const showInterstitialAd = () => {
    if (isAdLoaded) {
      interstitialAd.show();
    } else {
      console.log("Ad not loaded yet");
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Show Interstitial" onPress={showInterstitialAd} />
    </View>
  );
}

Hope it works for you too!

Upvotes: 0

hkniyi
hkniyi

Reputation: 353

import {
  InterstitialAd,
  AdEventType,
  TestIds
} from '@react-native-firebase/admob';

const adUnitId = __DEV__
  ? TestIds.INTERSTITIAL
  : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitialAd = InterstitialAd.createForAdRequest(adUnitId);

export default class App extends Component {

componentDidMount() {

    interstitialAd.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        console.log('InterstitialAd adLoaded');
      } else if (type === AdEventType.ERROR) {
        console.warn('InterstitialAd => Error');
      } else if (type === AdEventType.OPENED) {
        console.log('InterstitialAd => adOpened');
      } else if (type === AdEventType.CLICKED) {
        console.log('InterstitialAd => adClicked');
      } else if (type === AdEventType.LEFT_APPLICATION) {
        console.log('InterstitialAd => adLeft_App');
      } else if (type === AdEventType.CLOSED) {
        console.log('InterstitialAd => adClosed');
        interstitialAd.load();
      }
    });

interstitialAd.load();

}

showAd() {
    if (interstitialAd.loaded) {
      interstitialAd.show().catch(error => console.warn(error));
    }
  }

render() {
    return (

     <Button
       title="Show Interstitial"
       onPress={() => {
         this.showAd();
      }}
    />

)}

This is actually a snippet from a production code - ENJOY!

Upvotes: 6

Related Questions