1

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
Rahul Aadam
  • 155
  • 10

1 Answers1

0

This response occurs because this part of the code:

if (!loaded) {
  return null;
}

When your ad component is not loaded yet you don't return any component. There is two way to solve this, it's possible to add some loading component with the ActivityIndicator and wait to the ads be loaded or you can remove this part of the code and wait only for the component that call the admob, like this:

{loaded && 
  <Button onPress={() => showAd()}>
        Show Ad!
  </Button>
}
Lucas
  • 26
  • 4