How can I implement InterstitialAd ads when a user closes the currently visited page.

A user also can go back(close a page) from a page using his mobile device back button(not react native back header button).

Please check the below code

import React, { useState, useEffect } from "react"; import { View, Button, Text, ScrollView, } from 'react-native'; import { AppOpenAd, InterstitialAd, RewardedAd, BannerAd, TestIds, AdEventType } from 'react-native-google-mobile-ads'; const Test = ({ navigation }) => { useEffect(() => {         let interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {             requestNonPersonalizedAdsOnly: true,             keywords: ['fashion', 'clothing'],         });         interstitial.addAdEventListener(AdEventType.LOADED, () => {             interstitial.show();         });         interstitial.load();         return () => {             interstitialListener = null;         };     }, []); return (         <ScrollView>             <View>                 <View style={{ marginTop: 20 }}>                     <Text>                         Lorem Ipsum is simply dummy text of the printing and typesetting industry.                         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </Text>                 </View>             </View>         </ScrollView>     ) } export default Test

MyApp.js file

import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Test from './Test'; import TestTwo from './TestTwo'; const Tab = createBottomTabNavigator(); const HomeTabs = ({ navigation }) =>{   return (     <Tab.Navigator screenOptions={{ headerShown: false }}>       <Tab.Screen name="Test" component={Test} />      </Tab.Navigator>   ); } const Stack = createNativeStackNavigator(); export default function App () {   return (     <NavigationContainer>       <Stack.Navigator>         <Stack.Screen name="Home" component={HomeTabs} />         <Tab.Screen name="TestTwo" component={TestTwo} />       </Stack.Navigator>     </NavigationContainer>   ); }

Tag:google-ads-api, admob, google-mobile-ads, react-native

2 comments.

  1. Hamid khan

    I already done this in many apps, so understand and run the below code.

    const {showAd, adDismissed, adPresentError, connected, setAdShowingInterstitial} = useContext(AppContext); const [voicePressed, setVoicePressed] = useState(false); useEffect(()=>{ if(adDismissed || adPresentError || !connected){ setAdShowingInterstitial(false); navigation.navigate('backscreen')// } },[adDismissed,adPresentError,connected]); // you have to call adShow function in backbtnPress like below function handleBackButtonClick() { showAd(); setInterstitial("backscreen") return true; } useEffect(() => { BackHandler.addEventListener("hardwareBackPress", handleBackButtonClick); return () => { BackHandler.removeEventListener("hardwareBackPress", handleBackButtonClick); }; }, []);
    Reply
    1. Hamid khan

      may be some code it have missing but logic that.....

      Reply

Add a new comment.