This post is to document the steps on how I integrated Google AdMob in my React Native Application and how the issues were resolved. My React Native version is 0.62.2.

I’m using react-native-firebase to integrate AdMob for displaying Advertisements. The steps to install react-native-firebase may be different for lower versions of react-native where manual install might be preferred for both iOS and Android builds.

Install the following packages:

npm install @react-native-firebase/app
nvm install @react-native-firebase/admob

Within the root of your React Native Project, add firebase.json file:

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

Before you build the App, you need to add the valid App Ids for both Android and iOS devices. The App Ids can be found in your Google AdMob account while registering the App for iOS/Android. You can create an account here.

Build the Android version with:

react-native run-android

For the iOS version, you need to run “pod install” first inside the iOS folder to install native modules: RNFBAdMob, RNFBApp, and RNVectorIcons and then run:

react-native run-ios

Even after adding the App Ids, my build was giving error for Android build as Execution failed for task ':app:mergeDexDebug' error.

To resolve this, I had to make changes to my build.gradle file under App Sub Folder under the Android folder.

defaultConfig {
        ....
        multiDexEnabled true
    }

dependencies {
    ...
    implementation 'com.android.support:multidex:1.0.3'
}

If your App is targeting children, make sure to set these configuration using setRequestConfiguration:

import admob, { MaxAdContentRating } from '@react-native-firebase/admob';

admob()
  .setRequestConfiguration({
    // Update all future requests suitable for parental guidance
    maxAdContentRating: MaxAdContentRating.PG,

    // Indicates that you want your content treated as child-directed for purposes of COPPA.
    tagForChildDirectedTreatment: true,

    // Indicates that you want the ad request to be handled in a
    // manner suitable for users under the age of consent.
    tagForUnderAgeOfConsent: true,
  })
  .then(() => {
    // Request config successfully set!
  });

There are different types of Ad Units, I’m using Banner Ads for my case. Also, note that you need to create an Ad Unit in Google AdMob account for the specific type of Ad e.g. Banner Ad and that Ad Unit Id is required to be used in your component. You should use the Test Id in your dev environment.

Below is the example Ad Component:

import React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import { BannerAd, BannerAdSize, TestIds } from '@react-native-firebase/admob';


const AdComp = (props) => {
    const adUnitId = __DEV__ ? TestIds.BANNER : Platform.OS === 'ios' ? 'ca-app-pub-xxxx/xxxx' : 'ca-app-pub-xxxx/xxxx';

    return(
        <View style={{height: '10%', paddingLeft: 20}}>
            <BannerAd 
            unitId={adUnitId}
            size={BannerAdSize.LARGE_BANNER}
            requestOptions={{
              requestNonPersonalizedAdsOnly: true,
            }} />
        </View>
    );
};

export default AdComp;

You May also face metro server related issues like 500 error for which you might need to restart the metro server which made it work.

If you face the error as:

Unable to load script from assets ‘index.android.bundle’

Follow the below steps:

1. Go to your project directory and check if this folder exists android/app/src/main/assets

If it exists then delete two files viz index.android.bundle and index.android.bundle.meta

ii) If the folder assets doesn’t exist then create the assets directory there.

2. From your root project directory do

cd android
./gradlew clean

3. Finally, navigate back to the root directory and check

If there is only one file i.e. index.js then run following single command

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

If there are two files i.e index.android.js and index.ios.js then run this as a single command

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res