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 ;-)

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

--

--

--

Learn and improve, with these articles, to create your applications for Android and Ios with React Native and Expo, a tool that will help us develop, test and publish our apps made with React Native

Recommended from Medium

Google & Facebook Authentication in Flutter-Firebase (1/2)

Intents in Android

How To Build a Gradle Plugin for Android in Kotlin

Firebase Test Lab, Android Security, WebViews, Clean Stateflow Transformation, and more!

Don't forget to remember

Create a Splash Screen for your Android Application

Fueled Reactive apps with Asynchronous Flow — Part 4— Use Case layer Implementation

Fueled Reactive apps with Asynchronous Flow  — Part 3— Data layer Implementation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Martin

Martin

Experto en integración de aplicaciones con más de 5 años de experiencia con IBM WMB y IIB y en la creación de flujos para Mule ESB con Anypoint Studio

More from Medium

Getting Started with React Native and Redux

Testing React Native Apps w/ Jest

A deeper look into React Native and its architecture, Part I

How to implement push notifications in a React Native app using Sendbird Chat