Google AdMob for React Native via FireBase

React Native — Time to Monetize your app

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.
• 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.
• 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

AdMob Banner Ad in React Native app

Interstitial Ad

Interstitial Ads work on a trigger. Because these are full page ads, they are not always visible as Banner Ads.

To implement interstitial ads, import the required dependency and follow the code below

Again, TestIds.INTERSTITIAL is a test ID. Replace it with production Ad ID when releasing the app.

.load() method loads the ad. This ad takes some time in loading. That is why .show() is called on the LOADED event. If you call the .show() method immediately after .load() the app with crash.

Finally .show() shows the ad on full screen, like following

Admob interstitial ad in React Native app

Reward Ad

Again, reward Ads are similar to interstitial ads in the trigger mechanism. To implement, import the required dependency and follow the code below

Again, TestIds.REWARDED is a test ID. Replace it with production Ad ID when releasing the app.

.load() method loads the ad. This ad takes some time in loading. That is why .show() is called on the LOADED event. If you call the .show() method immediately after .load() the app with crash.

Reward Ads also have a .EARNED_REWARD event, which is called when the reward ad throws a callback (generally when user has seen the required length of the ad). After this callback, you can provide user with the reward.

Finally .show() shows the ad on full screen. The reward ad will look like this

Admob reward ads in React native app

Step 6: Testing the app on a device

To run Android app, you should start emulator first (or connect a device), either via Android Studio or adb , then call

$ react-native run-android

Conclusion

In this blog, we learned how to implement Google AdMob functionality in React Native app. AdMob functionality is a must for an app where user wants to earn some revenue from ad clicks. You can also combine the interstitial ads and rewards ads with in-app rewards like a level up in a game, extra lives etc.

Resource

Github