Migrate expo-ads-admob to react-native-google-mobile-ads

Starting with Expo SDK version 46 expo-ads-admob will be removed, even if you are using Expo 45 with eas build you probably already have bugs with this library. As stated in the Admob documentation, you need to migrate to react-native-google-mobile-ads.

Let us begin!

The first thing we will do is install the react-native-google-mobile-ads library

npm i react-native-google-mobile-ads

or

yarn add react-native-google-mobile-ads

Now we will need to add our configured app ids in Admob to the app.json file. It has to be added outside the expo tag: {}

"react-native-google-mobile-ads": {
  "android_app_id": "ca-app-pub-XXXXXXXXXXXXXX",
  "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXX"
 }

app.json

{
 "expo": {
  "name": "test",
  "slug": "test",
  "scheme": "test",
  "version": "1.0.0",
  "owner": "you",
  "icon": "./assets/icon.png",
  "splash": {
   "image": "./assets/splash.png",
   "resizeMode": "contain",
   "backgroundColor": "#32a060"
  },
  "updates": {
   "fallbackToCacheTimeout": 0
  },
  "assetBundlePatterns": [
   "**/*"
  ],
  "ios": {
   "supportsTablet": true,
   "bundleIdentifier": "com.you.test",
   "requireFullScreen": true,
   "buildNumber": "1.0.0"
  },
  "android": {
   "package": "com.you.test",
   "permissions": [
    "READ_EXTERNAL_STORAGE",
    "READ_INTERNAL_STORAGE",
    "CAMERA",
    "WRITE_EXTERNAL_STORAGE"
   ],
   "versionCode": 1,
   "adaptiveIcon": {
    "foregroundImage": "./assets/icon.png",
    "backgroundColor": "#32a060"
   }
  },
  "web": {
   "favicon": "./assets/icon.png"
  },
  "description": ""
 },
 "react-native-google-mobile-ads": {
  "android_app_id": "ca-app-pub-XXXXXXXXXXXXXX",
  "ios_app_id": "ca-app-pub-XXXXXXXXXXXXXX"
 }
}

Now we can try to add a banner

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';<BannerAd
      unitId={adUnitId}
      size={BannerAdSize.FULL_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />

To test it, we will no longer be able to use the expo start command and display it with the Expo app since the react-native-google-mobile-ads library contains native code that the Expo app cannot interpret.

We must generate the native code with the expo prebuild command, which will generate the native code for Android and Ios. Once the code is generated we can test it with the commands

expo run:android
expo run:ios

Taking into account that if we are not on a Mac we will not be able to test the Ios and to be able to test it we will have to do it from the cloud with the eas build:ios

We will configure our eas.json with a “preview” tag to be able to generate an apk file from the Expo cloud in the case of Android and a .gz file in the case of Ios that will allow us to test it in a simulator.

{
  "cli": {
    "version": ">= 0.52.0"
  },
  "build": {
    "development": {
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug"
      },
      "ios": {
        "buildConfiguration": "Debug"
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true,
        "cache": {
        "key": "181121"
        }
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

And we will use the command

eas build -p android --profile preview
eas build -p ios --profile preview

Before doing that we have to take into account two possible errors

In Ios it will be necessary that before uploading to the Expo cloud we have eliminated the expo-ads-admob library

In Android we must modify the following line of the AndroidManifest.xml of the native code generated with the expo prebuild

We will have the line as follows

<meta-data android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT" android:value="true"/>

You have to set the value to false

<meta-data android:name="com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT" android:value="false"/>

We already have it!

You should already be able to generate both “preview” and production apps using the react-native-google-mobile-ads library to display ads and to generate the apps with the eas build

You already know that if you liked the article you can buy me a coffee ;-)

martinmul is Creation of articles about programming and owner of freecons.eu

Remember to follow the next post for more articles on React Native & Expo

React Native & Expo