Admob ads implementation via expo.io(react-native) SDK in 2019.

Quick guide to implement ads in react-native apps.

I have been working around my way to try and understand how to implement Google’s admob ads in react-native apps, as of June 2019. There exists a module on github, react-native-admob that will do all the task for you. But there is a SDK called expo.io that will streamline things even more for us. Main pro of expo SDK is that it renders your app in real time. You dont even need to go to XCode or Android Studio to make builds.

AdMob and React-Native(using Expo.io)

Alright, let’s jump into the code, first of all we import the stuff we’ll need.

import React, { Component } from ‘react’;
import { Text ,View, StyleSheet , Button } from ‘react-native’;
import { Constants } from ‘expo’;
// AdMob
import {
 AdMobBanner,
 AdMobInterstitial,
 PublisherBanner,
 AdMobRewarded
} from ‘expo-ads-admob’;

Next we’ll default export a class that will contain our react-native code.

export default class App extends Component {
bannerError = () => {
    console.log('banner ad not loading')
  }
bannerAdReceived = () => {
    console.log('banner ad received')
  }
showInterstitial = async () => {
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
    
    try{
      await AdMobInterstitial.requestAdAsync();
      await AdMobInterstitial.showAdAsync();
    }
    catch(e){
      console.log(e);
    }
}
showRewarded = async () => {
    AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
    
    try{
      await AdMobRewarded.requestAdAsync();
      await AdMobRewarded.showAdAsync();
    }
    catch(e){
      console.log(e);
    }
  }
render() {
 return (
 <View style={styles.container}>
<Text>Text in the center!!!</Text>
<Button
 style={styles.interstitialBanner}
 title=”InterstitialAd”
 onPress={this.showInterstitial}
 />
<Button
 style={styles.rewardedBanner}
 title=”rewardedVideoAd”
 onPress={this.showRewarded}
 />
<AdMobBanner style={styles.bannerAd}
 bannerSize="fullBanner"
 adUnitID="ca-app-pub-3940256099942544/6300978111"
 onDidFailToReceiveAdWithError={this.bannerError}
 onAdViewDidReceiveAd = {this.bannerAdReceived} />
<PublisherBanner
 bannerSize="mediumRectangle"
 adUnitID="ca-app-pub-3940256099942544/6300978111"
 onDidFailToReceiveAdWithError={this.bannerError}
 onAdViewDidReceiveAd = {this.bannerAdReceived} />
 
 </View>
 );
 }
}

There are couple of things to look here, we’ll break down our code into pieces, first..

showInterstitial = async () => {
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
    
    try{
      await AdMobInterstitial.requestAdAsync();
      await AdMobInterstitial.showAdAsync();
    }
    catch(e){
      console.log(e);
    }
}

Here, showInterstitial is a async function that will show a rewarded ad when called. We call this function using a button. That button is created as a component inside the render() function of the class. Same code follows in rewarded ad, where showInterstitial is replaced with showRewarded function.

Inside the showIntersitial function, first of all we call the setAdUnitID function of class AdMobInterstitial which takes in a string as ID of the ad, which you ll create from your ad mob account. Next, requestAdAsync() makes a request to google for an ad, and the next function showAdAsync() diplays it on the screen.

And all of this is wrapped inside a try a try-catch block to handle the promise rejection.

Lastly, banner ads are made using <AdMobBanner> component. There is no need for function class for them. Now eventListners can be added to this code to handle the errors if any(In production). When running the code you should see the following screens.

Two buttons(InterstitialAd and rewardedVideoAd) for respective ads and a banner ad in the footer.

When clicked interstitialAd and rewardedVideoAd, respective ads should open.

InterstitialAd

rewardedVideoAd

Hope you learned something from this post, leave a clap if you did. Ask any query in the responses. Lastly, I’ll drop github repo below,

https://github.com/afrozopsy/react-native-admob-implementation