Displaying ads in-app is an increasingly popular method when it comes to monetizing your app. If you've ever used Facebook, Twitter, or Instagram, odds are you've seen them pop up on your feed. They're common additions to the movies or videos you watch, the games you play, and the streaming services you use to listen to your favorite music. Many apps even draw on our distaste for interruption by offering to cut the ads out of our experience for a fee, and believe it or not, these tactics can really add up!

While there are quite a few options available to someone looking to monetize their app, few options are as easy to implement as in-app ads. That's why we created this tutorial! Today, we'll discuss how you can implement AdMob functionality in your React Native app. But first...

What is AdMob?

AdMob, a portmanteau for "advertising on mobile", provides a way for Google to aid app developers in their pursuit of earning more money from their apps. The ads themselves are created and paid for by advertisers looking to promote their product, and it works by matching your app to ads based on criteria that you have set. As advertisers pay different prices for different ads, the amount you earn will vary, but it's an easy method for bringing in extra revenue.

Types of AdMob Ads

Banner: This is a basic, rectangular-shaped ad that appears at the top or bottom of the device screen.

Rewarded: This is a full-page ad that engages users by rewarding points or extra health in games. These ads support video content, and they are served only after the user chooses to view them.

Interstitial: These are full-page ads that appear at natural breaks and transition points like while you're waiting for the next level in your game to load, and they support both video content and static ads.

Native: This is a kind of customizable ad format created to match the look and feel of your app. These ads appear naturally in line with your existing app content without distracting from the user experience. As with other ad types on this list, they support video content, but they can only be added in Native apps.

Now that we know the different options available to us, let’s identify the prerequisites you'll need to implement AdMob ads in your React Native app.

Quick Note: Although you can implement AdMob ads in both iOS and Android apps, we're going to be using an Android emulator for the purposes of this tutorial.

Prerequisites

Now that we've gotten the prerequisites out of the way, here's a breakdown of the steps we'll take in this tutorial to implement AdMob in our Android emulator.

Steps

  • Set Up Your AdMod Account
  • Install Expo
  • Create a Simple React Native App
  • Install Other Dependencies
  • Create Your Banner Ad
  • Create Different Types of Ads

Step 1 – Set Up Your AdMob Account

To integrate AdMob ads in a React Native app, we first need to get our App and Banner IDs. If you haven't created an account yet, be sure to do so now before proceeding. Once you have accessed your account, navigate to your AdMob dashboard and create a new app by clicking the GET STARTED button.

From here, you'll be taken to the screen below. For platform, choose "Android", and select "Yes, the app is listed on a supported app store" before clicking on CONTINUE.

Graphical user interface, text, application, Word, email

Description automatically generated

After creating our app, our app name will appear in the side menu. If we navigate to "App Settings" using the menu on the left, we can find our App ID underneath our App name as shown in the screenshot below. This App ID will be used in our React Native app to allocate the ad space.

Graphical user interface, text, application, email

Description automatically generated

From here, we'll want to head over to "App overview" and create an Ad Unit using the button seen below.

Graphical user interface, text, application, Teams

Description automatically generated

Once we click on the ADD AD UNIT button, we'll be taken to the screen below. Here we can see the types of Ad units and the steps required to steps create each Ad unit. We can select an Ad unit by clicking the Select link at the bottom of each card. Using this section, we can add multiple types of Ad units to the app, but for our purposes, we're going to stick with a simple Banner unit.

Graphical user interface, application

Description automatically generated

Once we select our Ad type, we can provide any name that we'd like for it. With that being said, choose a relevant name that will lend to clear documentation and understanding.

Graphical user interface, application

Description automatically generated


After we fill in our Ad unit name and click the Create ad unit button, we will receive the Ad unit ID as shown in the screenshot below.

Graphical user interface, text, application, email

Description automatically generated

try our app estimate calculator CTA image

After creating an Ad unit, we can also get Ad unit ID from the dashboard.

Graphical user interface, text, application

Description automatically generated

Step 2 – Install Expo


Next, we're going to want to install our expo client, and we can do so using the command below.

npm install -g expo-cli

Step 3 – Create a Simple React Native App

After installing our expo client, we can create a React Native project using the following commands.

expo init AdmobApp

cd AdmobApp

From here, you're going to want to go inside the project directory and run the project using the expo start command.

expo start

Once the project runs, you should be able to see something like this:

Qr code

Description automatically generated

Next, we can run our Android emulator by clicking on the “Run on Android/emulator” option highlighted in the screenshot below. It is always better to run the emulator from the Android Studio before you run the project.

Text

Description automatically generated

Step 4 – Install Other Dependencies

Once that step is complete, we can install the expo AdMob package to our app using the below command.

npm i expo-ads-admob

From here, we just need to add the AdMob App ID to app.json.

//app.json
{
  "name": "AdmobApp",
  "displayName": "AdmobApp",
  "expo": {
    "name": "AdmobApp",
    "slug": "AdmobApp",
    "version": "1.0.0",
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-5750711746491614~7905204041"
      }
    },
    "ios": {
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511"
      }
    }
  }
}

Now our app is primed and ready for AdMob ads!

Step 5 – Create Your Banner Ad

Now it's time to create our banner ad! To do this, we need to import an AdMob dependency called AdMobBanner.

import React from "react";
import { Platform, View } from "react-native";
import { AdMobBanner } from "expo-ads-admob";
const BannerAd = () => {
  const unitID = Platform.select({
     ios: "ca-app-pub-3940256099942544/2934735716",
    android: "ca-app-pub-5750711746491614/5984590042",
  });
 
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <AdMobBanner
        adUnitID={unitID}
        bannerSize="smartBanner"
        servePersonalizedAds={true}
        style={{
          padding: 30,
        }}
      />
    </View>
  );
};
 
export default BannerAd;

When using the <AdmobBanner /> tag, we should consider some of its properties, such as:

  • adUnitID: The ad unit ID retrieved from your AdMob account.
  • bannerSize: The size of the banner ad (ex; smartBanner, fullBanner, banner)
  • servePersonalizedAds: Whether you want to show personalized ads. This should be a boolean value.

Once we set the banner properties to display the way we'd like it to, we can import BannerAd.js to App.js, as shown below.

import React, { useState } from "react";
import { View, Button, StatusBar } from "react-native";
import BannerAd from "./BannerAd";

When you run the code, you should be able to see the banner ad example similar to how it is shown in the screenshot below.


Step 6 – Create Different Types of Ads

Interstitial Ads

Now let’s see how we can go about integrating Interstitial Ads into our React Native app. Interstitial ads are full-page, interactive ads that work on a trigger.

To start, let's import the Interstitial ad to App.js as shown in the screenshot below.

import React from "react";
import { View, Button, StatusBar, Text } from "react-native";
import { AdMobInterstitial } from "expo-ads-admob";

Add Your Ad Unit ID

  // AD UNIT ID FOR INTERSTITIAL AD
  const interstitialID = Platform.select({
    ios: "ca-app-pub-39402560777742544/44777910",
    android: " ca-app-pub-5750711746491614/3737075935",
  });

Next, create the following function to display Interstitial ads.

  // INTERSTITIAL AD
  function showInterstitial() {
    AdMobInterstitial.setAdUnitID(interstitialID);
    AdMobInterstitial.requestAdAsync().then(() => {
      AdMobInterstitial.showAdAsync().catch((e) => console.log(e));
    });
  }

Following this step, we can call the showInterstitial () function as seen below.

<Button title="Interstitial Ad" onPress={showInterstitial} />

Once you run the code, it should show your Interstitial ad in full screen, as you can see in the following screenshot.

Graphical user interface, text, application, chat or text message

Description automatically generated

Reward Ads

AdMob Reward ads are a kind of video ad similar to Interstitial ads. Similar to Interstitial ads, they also work on trigger mechanisms, and the reward ads force users to watch a video up to a certain length in order to acquire specific rewards.

Let’s integrate Reward Ads into the screen. To accomplish this, we need to import the AdMobRewarded component from the expo-ads-admob package.

import React from "react";
import { View, Button, StatusBar, Text } from "react-native";
import { AdMobRewarded } from "expo-ads-admob";

Add your ad unit ID to App.js

  // AD UNIT ID FOR REWARDED AD
  const rewardedAdID = Platform.select({
    ios: "ca-app-pub-3940256077742544/1712489713",
    android: " ca-app-pub-5750711746491614/2844464964",
  });

Next, create a function to show Reward ads.

  // REWARD AD
  function showRewardAds() {
    AdMobRewarded.setAdUnitID(rewardedAdID);
    AdMobRewarded.requestAdAsync().then(() => {
      AdMobRewarded.showAdAsync().catch((e) => console.log(e.message));
    });
  }

Last but not least, call the showRewardAds () function as shown below.

<Button title="Rewarded Ad" onPress={showRewardAds} />

Once you run the code, the Reward ad show pop up similar to the one in the screenshot below.

Graphical user interface, website

Description automatically generated


Conclusion

As you can see from this tutorial, AdMob ads really are easy to add to an app, and if you're looking for new revenue streams for your app, they're a fantastic option to help you get started.

Are you interested in seeing a specific tutorial here on the blog? Please feel free to share your thoughts with our Content Marketing Manager at eryn@crowdbotics.com!

Have you checked out the Crowdbotics App Builder yet? Designed to facilitate the rapid development of universal software applications, it allows developers to scaffold and deploy working apps quickly by identifying the best packages for a given feature set.

Consider Crowdbotics your all-in-one dashboard for app development! Do you have a project that you're not sure where to start? We can help—our expert team of PMs, designers, developers, and engineers are here to help you go from idea to deployment 3x faster than manual development. To learn more and get a detailed estimate, get in touch with us today!