Google AdMob for React Native via FireBase
By: Anshul Borawake
Tags: React Native, Firebase, Google Ads, Google Analytics, Monetization

This post is done on a special request from one of our thousands readers. If you have more requests, let me know in the comments

In this post, you will learn how to implement AdMob functionality, i.e. Google advertisements, in React Native apps. We will implement this in a simple React Native app and test on Android.

As we all know, advertisements are the major source of income for all tech giants like Google, Facebook, Twitter etc. Google ads are one of the most popular ads out there, and the mobile version of Google ads is what they call AdMob.

An example of Google AdMob ad. The ad is prompting user to install certain app

Type of AdMob ads

Banner: A basic ad format that appears at the top & bottom of the device screen.

Interstitial: Full-page ads appear at natural breaks & transitions, such as level completion. Supports video content.

Rewarded: Ads reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users. Supports video content.

Native: Customizable ad format that matches the look & feel of your app. Ads appear inline with app content. Supports video content. For now, Native ads are only possible in Native apps, not in hybrid apps like the ones based on Ionic or React Native.

Step 1 — Create Firebase project

For Admob implementation, all we need from Firebase project is — google-services.json file for Android

Follow these steps

Login into Firebase Console

Create Firebase Project

Add an Android app, register the Bundle ID, and give your app a name

Download google-services.json . We’ll need this file later in the project

Follow this video for the above steps if you need -

Create a firebase project

Step 2 — Create basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.64.2 & node 14.9.0

Create a blank react-native app

$ react-native init admob_app

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

Step 3 — Setup your Admob account

Signup then Sign in to your AdMob account at https://apps.admob.com.

Click Apps in the sidebar.

in the sidebar. Click Add app to add a new app or click View all apps to search a list of all of the apps you’ve added to AdMob.

to add a new app or click to search a list of all of the apps you’ve added to AdMob. In the App Settings options, you can see your App ID. This is the ID you will need to connect your app to Google AdMob in your React Native app.

Note down your App ID from App Setting in Google AdMob

In the Ad Units section, you can add multiple types of Ad units. For more details on adding Ad Units, check out the following detailed step-by-step instructions for

— Banner Ads

— Interstitial Ads

— Reward Ads

AdMob has a ton of other settings for how, when and where your ads should show up, but all that for later. In this post, we’ll limit the discussion to “How to display basic ad units in a React Native app”

Step 4 — Install AdMob dependency and implement

For this post, as I explained earlier, we are using AdMob with Firebase. The dependency we are using for this is React-Native Firebase. This main dependency contains several service modules, AdMob is one of them.

4.1 Install React-Native Firebase for Android

In your existing React Native app, add the main dependency using

$ yarn add @react-native-firebase/app # For iOS

cd ios && pod install

4.2 Install AdMob dependency

Install the module using

$ yarn add @react-native-firebase/admob # For iOS

cd ios/ && pod install

4.3 Adding your AdMob App ID

The AdMob module needs to be hooked up to your own Google AdMob account using the App ID we noted down in Step 3

Add the ID to your root level firebase.json file (create one) under the react-native object like following

{

"react-native": {

"admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"

}

}

Rebuild your application for the changes to take effect.

Step 5 — Implement different types of Ads in the app

Once everything is setup, let us implement different types of Ads in the app.

Banner Ad

Banner ads are implemented as a <BannerAd> tag itself. You can place it in your React Native app just like any other tag. Make sure you import the dependency

import { TestIds, BannerAd, BannerAdSize} from '@react-native-firebase/admob';

I imported the Banner ad at the bottom of the page, in a View positioned absolute as follows

<BannerAd

unitId={TestIds.BANNER}

size={BannerAdSize.SMART_BANNER}

requestOptions={{

requestNonPersonalizedAdsOnly: true,}}

onAdLoaded={() => {

console.log('Advert loaded');}}

onAdFailedToLoad={(error) => {

console.error('Advert failed to load: ', error);}}

/>

Here, I have used a test ID TestIds.BANNER . This uses a default test ID provided by AdMob. You will replace this with your production Ad unit ID when you release the app

DO NOT use the test ID in your production app, and DO NOT use your production Ad Unit ID while developing the app

The resulting ad looks like this