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>   ); } 

What is wrong on this below code?

The ads are appearing when I change the screen but before loading the Ads I am getting white screen for 2-3 seconds.

Why it's happening? Thank you in advance for your time and support.

import React, { useState, useEffect } from "react"; import { View, Button, Text, ScrollView, } from 'react-native' import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads'; const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-3940256099942544/5224354917';     const rewarded = RewardedAd.createForAdRequest(adUnitId, {       requestNonPersonalizedAdsOnly: true,       keywords: ['fashion', 'clothing'],     });     const Testing = ({ navigation }) =>{             const [loaded, setLoaded] = useState(false);         useEffect(() => {               const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {                 setLoaded(true);                 rewarded.show();               });               const unsubscribeEarned = rewarded.addAdEventListener(                 RewardedAdEventType.EARNED_REWARD,                 reward => {                   console.log('User earned reward of ', reward);                 },               );           // Start loading the rewarded ad straight away               rewarded.load();           // Unsubscribe from events on unmount               return () => {                 unsubscribeLoaded();                 unsubscribeEarned();               };             }, []);                        // No advert ready to show yet             if (!loaded) {               return null;             }             return (                 <ScrollView>                 <View style={{flex:1, justifyContent : 'center',alignItems : 'center'}}>                 <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>                 <Button onPress = {() => navigation.navigate('ThirdPage')} title='Next Screen'></Button>                    </View>                 </ScrollView>)             }             export default Testing 

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>   ); } 

I got this error- TypeError: undefined is not a function (near '...interstitial.onAdEvent...')

I am using- npm i react-native-google-mobile-ads

Thank you in advance for your support.

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'],       });       let interstitialListener = interstitial.onAdEvent(type => {         if (type === 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 

The below code is working please check if I still missed anything else

useEffect(() => {     let interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {         requestNonPersonalizedAdsOnly: true,         keywords: ['fashion', 'clothing'],     });     interstitial.addAdEventListener(AdEventType.LOADED, () => {         interstitial.show();     });     interstitial.load();     return () => {         interstitialListener = null;     }; }, []); 

I’m building a custom Zap to integrate Google Local Service Ads API with our CRM. It appears everything is functioning properly however, I noticed several new leads are not coming through, which appears to be due to the API request sending nested data using the values nested under the same field .

Here is an example response:

    {     "leadId": "000000000",     "accountId": "000000000",     "businessName": "Acme, Inc",     "leadCreationTimestamp": "2022-08-09T16:21:14Z",     "leadType": "PHONE_CALL",     "leadCategory": "roofer",     "geo": "Miami,Florida,United States",     "phoneLead": {       "consumerPhoneNumber": "+15555555678"     },     "chargeStatus": "NOT_CHARGED",     "currencyCode": "USD",     "timezone": {       "id": "America/New_York"     },     "id": "0000000000"   },   {     "leadId": "000000000",     "accountId": "000000000",     "businessName": "Acme, Inc",     "leadCreationTimestamp": "2022-08-09T16:39:38Z",     "leadType": "MESSAGE",     "leadCategory": "roofer",     "geo": "Miami,Florida,United States",     "messageLead": {       "customerName": "Jane Doe",       "jobType": "attic_venting",       "postalCode": "33066",       "consumerPhoneNumber": "+15555555789"     },     "chargeStatus": "CHARGED",     "currencyCode": "USD",     "timezone": {       "id": "America/New_York"     },     "id": "1111111111"   },   {     "leadId": "000000000",     "accountId": "000000000",     "businessName": "Acme, Inc",     "leadCreationTimestamp": "2022-08-10T19:12:28Z",     "leadType": "PHONE_CALL",     "leadCategory": "window_repair",     "geo": "Miami,Florida,United States",     "phoneLead": {       "chargedCallTimestamp": "2022-08-10T19:12:28Z",       "chargedConnectedCallDurationSeconds": "280s",       "consumerPhoneNumber": "+15555555890"     },     "chargeStatus": "CHARGED",     "currencyCode": "USD",     "timezone": {       "id": "America/New_York"     },     "id": "2222222222"   }, 

The issue I’m running into is when mapping the data to our CRM, the trigger test data is providing multiple fields for ‘consumerPhoneNumber’ ( based on whether it is a message/phone lead and whether the call connected ). so we are unable to map phoneLead__consumerPhoneNumber and messageLead___consumerPhoneNumber to the same field.

duplicate fields example

How can I parse the API response to properly map the consumerPhoneNumber when the value changes based on messageLead_consumerPhoneNumber versus phoneLead_consumerPhoneNumber?

I understand some basic Javascript but parsing API data is new to me. Any help would be truly appreciated!

Here is the JavaScript code for our API request.

    const options = {   url: 'https://localservices.googleapis.com/v1/detailedLeadReports:search',   method: 'GET',   headers: {     'Authorization': `Bearer ${bundle.authData.access_token}`,     'X-QUERY': bundle.authData.query   },   params: {     'query': 'manager_customer_id:XXXXXXXXX',     'pageSize': '1000'   } } return z.request(options).then((response) => {   response.throwForStatus();   const results = response.json;   const lists = results["detailedLeadReports"].map((item) => {     return Object.assign(item, {       id: item["leadId"],     });   });   return lists; });