How do I use react-native-google-mobile-ads with Expo and Expo Go?

Question

How do I use react-native-google-mobile-ads with Expo and Expo Go? (e.g. Banner Ads)

A minimal example within the context of Expo would be very much appreciated.

All the online google documentation as of May 2022 refers to expo-ads-admob, but Expo documentation now mentions that expo-ads-admob is deprecated and intends to remove support for the module in v46.

Expo recommends using react-native-google-mobile-ads. When I integrate that module into the project I get a crash when I start the app via Expo Go (and Metro) .. I'm currently testing with Android.

Invariant Violation: requireNativeComponent: "RNGoogleMobileAdsBannerView" was not found in the UIManager.                                                                                  
                                                                                              
This error is located at:                                                                     
    in RNGoogleMobileAdsBannerView (created by BaseAd)                                        
    in BaseAd (created by BannerAd)                                                           
    in BannerAd (created by App)                                                              
    in RCTView (created by View)                                                              
    in View (created by App)                                                                  
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

I presume this error has to do with linking, but I am explicitly trying to get this to work within Expo and not pure react-native.

IMO, Reasons why this react-native-google-mobile-ads module is not compatible with Expo Go would suffice as an answer as well.

To re-iterate: How do I use react-native-google-mobile-ads with Expo and Expo Go? A minimal example within the context of Expo would be very much appreciated.

Answer 1

I had to add an additional plugin in my expo config to get this to work with react-native-mobile-ads:14.0.0 (NOTE: v14.1.0 did NOT work) and expo:51 over and above the steps in the accepted answer - follow the steps in the installation guide (https://docs.page/invertase/react-native-google-mobile-ads) pasted below for future-proofing:

Install the admob module and config plugin: npx expo install react-native-google-mobile-ads

Install the dev client: npx expo install expo-dev-client

Add the react-native-mobile-ads plugin to your expo config:

// <project-root>/app.json OR <project-root>/app.config.js
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

Build the dev-client (iOS or Android):

eas build --profile development --platform android OR eas build --profile development --platform ios

Answer 2

I have successfully integrated the google ads in expo app.

What steps I had followed. And the Only main important thing in expo how we can test in expo app using this packages.

Steps: One by one that everyone need to follow. 1). install the packages

• expo-dev-client
• react-native-google-mobile-ads

2). Import the import 'expo-dev-client'; in your App.js file.

3). Go the desire file where you want to add the ads.(Specific component screen where the ads will show) Add this code.

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


const adUnitId = __DEV__ ? TestIds.BANNER : 'Your_add_Id';

 <BannerAd
     unitId={adUnitId}
     size={BannerAdSize.BANNER}
     requestOptions={{
        requestNonPersonalizedAdsOnly: true,
       }}
    />

4). Then for expo you must need to follow these step

Build the dev-client (as an APK)

eas build --platform android --profile development --local

Note=>: Install the built APK into emulator or device.

Start the expo service for the dev client

npx expo start --dev-client

Answer 3

You have to complete this step for expo

npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

# For expo users not using EAS
npx expo prebuild

# For expo users using EAS
npx eas-cli build --profile development

Answer 4

V46 of expo has some issues. I used expo V45 and it works perfectly.

Answer 5

To use react-native-google-mobile-ads with an Expo managed workflow, you'll need to build your project with EAS as a "dev-client". The dev-client provides similar functionality and conveniences to Expo Go. The primary difference is that you'll either need to have a working EAS build environment setup locally or use the Expo provided cloud build.

Assuming you have a local EAS build setup and would like to build for android:

# Install the ad module
expo install react-native-google-mobile-ads

# Install the dev-client module
expo install expo-dev-client

# Build the dev-client (as an APK)
eas build --platform android --profile development --local

# Note: Install the built APK into emulator or device.

# Start the expo service for the dev client
expo start --dev-client --lan

Once the APK is install and the service is setup, you may load the app via Expo Go by scanning the QR code.

Note: Do not put the react-native-google-mobile-ads configuration in the expo section of the app.json configuration. This mistake had me digging deep into react-native-google-mobile-ads' build.gradle code.

// app.json
{
  "expo": {
  // ...
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}