React native has its own default back button.

How can I add InterstitialAd in React Native, when I press React native back button from a page or if I exit the page(Not exiting the App) by pressing the Home button in Bottom Tabs Navigator bar.

I have added my Home button in Tabbar. so that a user directly clicks Home button from a particular page.

This is the page where I have added InterstitialAd

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 TestAds = ({ 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 TestAds 

My App.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 Contact from './Contact'; import Test from './Test'; import TestAds from './TestAds'; const Tab = createBottomTabNavigator(); const HomeTabs = ({ navigation }) =>{   return (     <Tab.Navigator screenOptions={{ headerShown: false }}>       <Tab.Screen name="Contact" component={Contact} />       <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="TestAds" component={TestAds} />       </Stack.Navigator>     </NavigationContainer>   ); } 

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

Add a new comment.