androidreact-nativeadmobadmob-rewardedvideoad

Show AdMob Rewarded Ad multiple times in React Native


I have created a Button to display a rewarded Ad whenever it gets clicked. There are two issues now: 1. It takes too much time to load the Ad (I can click the button once or twice before anything happens). 2. I want to reload the Ad right after it closes. It works but the App needs to restart.

AdMobRewardedComponent.js

  async componentDidMount() {
  await setTestDeviceIDAsync("EMULATOR");
  AdMobRewarded.setAdUnitID("ca-app-pub-3940256099942544/5224354917");

  AdMobRewarded.addEventListener("rewardedVideoDidLoad", () => {
  console.log("VideoLoaded")
  });
  AdMobRewarded.addEventListener("rewardedVideoDidFailToLoad", () =>
  console.log("FailedToLoad")
  );
  AdMobRewarded.addEventListener("rewardedVideoDidOpen", () =>
  console.log("Opened")
  );
  AdMobRewarded.addEventListener("rewardedVideoDidClose", () => {
    loadAd(request.build());
  console.log("Closed")
  });
  AdMobRewarded.addEventListener("rewardedVideoWillLeaveApplication", () =>
  console.log("LeaveApp")
  );
  AdMobRewarded.addEventListener("rewardedVideoDidStart", () =>
  console.log("Started")
  );
  AdMobRewarded.addEventListener("rewardedVideoDidRewardUser", () =>
  console.log("Rewarded"),
  );
  await AdMobRewarded.requestAdAsync();
}

componentWillUnmount() {
  AdMobRewarded.removeAllListeners();
}

_handlePress = async () => {
  await AdMobRewarded.showAdAsync();
};

render() {
  const { loadedAd } = this.state;
  return (
  <TouchableButton onPress={this._handlePress} title="Coins erhalten!" image="adButton" status="active" style={styles.adButton}/>
    );
  }
};

Is there a way to request a new Ad without restarting the whole App? Thanks for every answer!


Solution

  • In order to prevent the problem which the button can be pressed several times you can use debounce functionality: React Native: Using lodash debounce

    Or, you can manage your open ads at your store, so you can make sure that you don't open an ad twice and you can open a new ad once the previous ad had been closed, for instance:

    const {  isInterstitialAdOpen,  } = useSelector(state => state.home);
    
    if ((!__DEV__ && !isInterstitialAdOpen)) {
                    dispatch(openInterstitialAd());
                    AdMobInterstitial.setAdUnitID(AdMobController.getGeneralInterstitialId());
                    AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
                    AdMobInterstitial.addEventListener('adClosed', () => dispatch(closeInterstitialAd()));
                    AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd()).catch((error) => {
                    });
                }