Monetize react native app with Google Admob

In this tutorial, I will explain to you how we can implement Google Admob in our react native mobile application.

Prerequisites

In order to complete this tutorial, you need to have good knowledge of React Native.

For this tutorial, I am using React Native Google Mobile Ads this module has 4 types of Google Ads.

• Full-screen App Open Ads.
• Full-screen Interstitial Ads.
• Full screen Rewarded Ads.
• Component-based Banner Ads.

Now we can start implementing Admob in our React Native app.

Step 1. Create a new React Native project or open an existing project in VSCode

Use the below command if in case you want to create a new one.

npx react-native init MyAdmobApp

Step 2. If your project is ready now we need to install the Google Admob plugin run command to install a plugin

npm i react-native-google-mobile-ads

Now go Ios directory and link the plugin in the case of Android it auto links

cd ios/

// then

pod install

Step 3. Now restart the app and relaunch

npx react-native start

// On other terminal
npx react-native run-ios

// For android
npx react-native run-android

Step 4. Now we need to set up a Google AdMob account. Login to your account go to Aps.

Under the "App settings" menu item, you can find the "App ID":

Attempting to build your app without a valid App ID in app.json will cause the app to crash on start or fail to build.

Copy your App Id.

Step 5. Go to your app and edit app.json file and add app_id as shown bellow

// MyAdmobApp/app.json

{
  "name": "MyAdmobApp",
  "displayName": "MyAdmobApp",
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-MY~AppID",
    "ios_app_id": "ca-app-pub-My~AppID"
  }
}

rebuild your app run command mentioned in step 3.

Step 6. Now we can load banner ads in our project. Code to load banner add

BannerAd Admob

import React, { useRef, useEffect, useState } from 'react';
import { BannerAd, TestIds, BannerAdSize } from 'react-native-google-mobile-ads';


const AdsScreen = ({ navigation, route }) => {


    const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-your~app_id';


    return (
        <View style={styles.container}>
            <BannerAd
                unitId={adUnitId}
                size={BannerAdSize.INLINE_ADAPTIVE_BANNER}
                requestOptions={{
                    requestNonPersonalizedAdsOnly: true,
                }}
                onAdLoaded={() => {
                    console.log('Advert loaded');
                }}
                onAdFailedToLoad={(error) => {
                    console.error('Advert failed to load: ', error);
                }}
            />
        </View>
    )
}


export default AdsScreen;

FullScreenAd/ Interstitial Admob

import React, { useRef, useEffect, useState } from 'react';
import { BannerAd, TestIds, BannerAdSize } from 'react-native-google-mobile-ads';
import { View, Text, TouchableOpacity } from 'react-native';


const FullAdsScreen = ({ navigation, route }) => {


    const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-your~app_id';
    const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.INTERSTITIAL, {
        requestNonPersonalizedAdsOnly: true,
    });


    useEffect(() => {
        // Start loading the interstitial straight away
        load();
    }, [load]);


    useEffect(() => {
        if (isClosed) {
            // Action after the ad is closed
            navigation.navigate('Home');
        }
    }, [isClosed, navigation]);



    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => show()}>
                <Text>Click to show interstitial</Text>
            </TouchableOpacity>
        </View>
    )
}


export default FullAdsScreen;

Now, your device can show the test ad when it was in development mode and it shows the actual app when your app was live. Check adUnitId varaible in above code.

Here are some sample images of Ads loading in my current project.

Thanks for reading.