I have added two onPress event so that I can go to the next page and show the ads on click. When I press the button the page navigates to another page but the ads is not showing. I have not get any errors, what is the issue here

import React, { useEffect, useState } from 'react';
    import { Button, TouchableOpacity } from 'react-native';
    import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';
    
    const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-3940256099942544/1033173712';
    
    const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
      requestNonPersonalizedAdsOnly: true,
      keywords: ['fashion', 'clothing'],
    });
    
    const Testing = ({ navigation }) =>{
      const [loaded, setLoaded] = useState(false);
    
      useEffect(() => {
        const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {
          setLoaded(true);
        });
    
        // Start loading the interstitial straight away
        interstitial.load();
    
        // Unsubscribe from events on unmount
        return unsubscribe;
      }, []);
    
      // No advert ready to show yet
      if (!loaded) {
        return null;
      }
    return (
        <View>
        <TouchableOpacity onPress={() => {interstitial.show();}}>
        <Button onPress = {() => navigation.navigate('FirstPage')} title='Next Screen'></Button>
        </TouchableOpacity>
        <Text>Hello World Testing</Text>
        </View>
      );}
      export default Testing

CodePudding user response：

try with hooks - its working for me

ref - https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads-hook

import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

export default function App({ navigation }) {
  const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.Interstitial, {
    requestNonPersonalizedAdsOnly: true,
  });

  useEffect(() => {
    // Start loading the interstitial straight away
    load();
  }, [load]);

  useEffect(() => {
    if (isClosed) {
      // Action after the ad is closed
      navigation.navigate('NextScreen');
    }
  }, [isClosed, navigation]);

  return (
    <View>
      <Button
        title="Navigate to next screen"
        onPress={() => {
          if (isLoaded) {
            show();
          } else {
            // No advert ready to show yet
            navigation.navigate('NextScreen');
          }
        }}
      />
    </View>
  );
}