Implementing Google AdMob in React Native

A guide to using Google AdMob in your React Native App by using react-native-firebase.

Unsplash: Anthony Rosset

Introduction

AdMob is a Google service that provides advertising on mobile platforms such as iOS and Android.

In this article, we will use @react-native-firebase/admob from rnfirebase.io to implement AdMob banner, interstitial, and rewarded ads.

We will realize a simple Instagram like application and implement ads. We need these things:

• React Native
• Google AdMob Account
• Firebase Project

Setting up the app

First, we need a React Native App. You can create one by using React Native CLI:

npx react-native init RNAdMod

Sample Application

Initialize Firebase

To use @react-native-firebase/admob, we need to initialize a firebase project for @react-native-firebase/app.

The setup of firebase is not the purpose of this article but you can find the instructions here: https://rnfirebase.io/.

Create Google AdMob project

You need a Google AdMob account. You can create one here: https://admob.google.com/home/.

Once your account is created, you need to add an app:

Adding App

Then you can create ad unit Ids:

Create ad unit id

Note: We currently can’t use native ads with @react-native-firebase/admob.

After creating your unit Ids, you will have to place App Ids in a JSON file name firebase.json at the root of the project:

firebase.json

Configure AdMob

Before adding ads, we need to set up AdMob in the project. The configuration will provide indications to AdMob servers about the kind of Ads you need (maxAdContentRating, tagForChildDirectedTreatment, etc..).

Place this code where you want to configure AdMob: (In my case App.js)

App.js

Implement Ads

Interstitial Ads

These types of ads are displayed in full screen. You can use at different times: User makes an action, between activities, or during the pause between levels in a game.

To display an interstitial ad, we need to:

• Configure the ad
• Load it from AdMob when the component is mounted
• And naturally, show it :)

Here is an example of an ad display by clicking a button:

Interstitial.js

Interstitial Example

Rewarded Ads

This type of ad is used to create an interaction with the user and allow him to earn In-App points.

The configuration is very similar to the interstitial one:

Rewarded.js

Rewarded Example

Banner Ads

These ads stay on application screens, we can place them wherever we want.

They don’t need a special configuration, only to be big enough. If they are too small, AdMob will not be able to provide Ads.

Banner Ads Guidance: https://support.google.com/admob/answer/6293636?hl=en

The @react-native-firebase/admob packet provides us a <Banner /> component to implement the Ads:

Banner.js

Banner Example

GitLab Repo: dmg.link/blog-admob-repo.

You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀

Automate your React Native App with Fastlane

How to Use Face ID With React Native or Expo