AdMobInterstitial [Unhandled promise rejection: Error: Ad is already loaded.]

user_19198326 0
Viewed 268

I have been applying ads and the app shows only ad once, if the the ad is closed and making the add to show

The add shows only once and to make it show again i have to reload he app or restart the app

it shows this..

Click here for Error

And these are my dependencies "dependencies": { "@react-native-admob/admob": "^2.0.1", "@react-native-firebase/admob": "^11.5.0", "@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.2", "@react-navigation/stack": "^6.2.1", "autofix": "^0.5.8", "expo": "~45.0.0", "expo-ads-admob": "~13.0.0", "expo-ads-facebook": "~11.2.0", "expo-cli": "^5.4.9", "expo-facebook": "~12.2.0", "expo-splash-screen": "~0.15.1", "expo-status-bar": "~1.3.0", "expo-system-ui": "~1.2.0", "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.68.2", "react-native-ad-manager": "^1.3.9", "react-native-admob": "^2.0.0-beta.6", "react-native-admob-ads": "^1.0.3", "react-native-ads-facebook": "^0.2.0", "react-native-event-listeners": "^1.0.7", "react-native-fbads": "^7.1.0", "react-native-google-mobile-ads": "^6.3.0", "react-native-safe-area-context": "4.2.4", "react-native-screens": "~3.11.1", "react-native-splash-screen": "^3.3.0", "react-native-web": "0.17.7", "yarn": "^1.22.19" },

interstitial hadoop-yarn expo react-native admob
3 Answers

Add this in your interstitial ad listener it will reload your interstitial ad after it's closed

 if (type === AdEventType.CLOSED) {
      console.log("ad closed")
      setLoaded(false)
      //reload ad
      interstitial.load()
 }

Example:

import React, { useEffect, useState } from "react"
import { Button } from "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)
      }
      if (type === AdEventType.CLOSED) {
        console.log("ad closed")
        setLoaded(false)
        //reload ad
        interstitial.load()
      }
    })

    // 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()
      }}
    />
  )
}
user_117498310

This is my code for more information i have added your sugesstion as per the rules suggest me still i am getting error

import { StyleSheet, Text, View, TouchableOpacity, ImageBackground, Platform, ScrollView, StatusBar } from 'react-native'
import React,{useState, useEffect, useCallback} from 'react'
import { useNavigation } from '@react-navigation/native'
import { AdMobBanner, AdMobInterstitial } from 'expo-ads-admob';
import { InterstitialAd, AdEventType, TestIds } from '@react-native-firebase/admob';
// import firebase from "firebase.app()";



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

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

const unitID = Platform.select({
    android: "ca-app-pub-9880348026808678/6175699330",
    ios: "ca-app-pub-9880348026808678/1188571316",
});

export default function Home() {
    const navigation = useNavigation() 
    let [count,setCount]=useState(0)
    const [loaded, setLoaded] = useState(false)

    useEffect(() => {
        const eventListener = interstitial.onAdEvent((type) => {
            if (type === AdEventType.LOADED) {
                setLoaded(true)
            }
            if (type === AdEventType.CLOSED) {
                console.log("ad closed")
            setLoaded(false)
            
            //reload ad
            
            interstitial.load()
        }
        })
        b 
        // 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
    }
    
    
    
    function showInterstitial(){
        console.log("before count", count)
        count=count+1;
        setCount(count);
        if((count%2) == 0)
        {
            console.log("error a")
            AdMobInterstitial.removeAllListeners();
            AdMobInterstitial.setAdUnitID("ca-app-pub-3940256099942544/8691691433");
            console.log("error aa")
            AdMobInterstitial.requestAdAsync().then(() => {
                AdMobInterstitial.showAdAsync().catch((e) => console.log(e));
            });
            // AdMobInterstitial.dismissAdAsync()
        }
        else
        {
            console.log("counter else: ", count)
        }
        AdMobInterstitial.dismissAdAsync()
    }
    
    return (
        <View>
            <ScrollView styles={styles.container}>
            <TouchableOpacity 
                activeOpacity={0.9}
                style={styles.Button}

                
                onPress={()=>{navigation.navigate("Yoga",{type:"yoga"}),
                // showInterstitial(),
                //showAd(),
                interstitial.show()
                
                
            }}
            >
                <ImageBackground source={{uri:'https://jssuni.edu.in/jssaher/jssaher-yoga/img/about-yoga.jpg'}} resizeMode='cover' style={styles.image1}>
                <Text style={styles.ButtonText}> Yoga </Text>
                </ImageBackground>
            </TouchableOpacity>

            <TouchableOpacity
                activeOpacity={0.9}
                style={styles.Button}
                onPress={()=>navigation.navigate("Yoga",{type:"exercise"})}
            >
                <ImageBackground source={require('../assets/exercise.jpg')} resizeMode='cover' style={styles.image1}>
                <Text style={styles.ButtonText}> Exercise</Text>
                </ImageBackground>
            </TouchableOpacity>
        <StatusBar style="auto" />
        </ScrollView>
    </View>
    )
}
user_191983260

Thanks But I just added a simple function of dismiss at the end and it worked without any error the following is the code for it

let [count,setCount]=useState(0)

    function showInterstitial(){
      console.log("before count", count)
      count=count+1;
      setCount(count);
      if((count%2) == 0)
      {
          console.log("error a")
          AdMobInterstitial.removeAllListeners();
          AdMobInterstitial.setAdUnitID("ca-app-pub-3940256099942544/8691691433");
          // AdMobInterstitial.setAdUnitID("ca-app-pub-9880348026808678/8849237784");
          console.log("error aa")
          AdMobInterstitial.requestAdAsync().then(() => {
            console.log("add started");
              AdMobInterstitial.showAdAsync().catch((e) => console.log(e));
          });
          // AdMobInterstitial.dismissAdAsync()
      }
      else
      {
          console.log("counter else: ", count)
      }
      AdMobInterstitial.dismissAdAsync()
  }
user_191983260
Related