13

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.

Crazy Chenz
  • 12,650
  • 12
  • 50
  • 62
  • I think I just rubber ducky-ed this .. the answer is likely to use expo-dev-client instead of Expo Go. Investigating this now, so not adding it as the answer yet. – Crazy Chenz May 22 '22 at 13:34
  • Hello @Crazy Cheng, What is the result bro? Dis you successfully run the app? And were you able to put the app on play store? Please let us know. – Habibur Rahman Aug 13 '22 at 07:34
  • @CrazyChenz the link here seems dead. I get a 404 error. https://docs.expo.dev/versions/latest/sdk/admob/ – Erick Adam Mar 01 '23 at 01:12

4 Answers4

13

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"
  }
}
Crazy Chenz
  • 12,650
  • 12
  • 50
  • 62
  • Hi, my local eas build is always failing with "/home/expo/workingdir/build/android/app/src/debug/AndroidManifest.xml:29:85-105 Error: [stderr] Attribute meta-data#com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT@value value=(true) from AndroidManifest.xml:29:85-105 [stderr] is also present at [:react-native-google-mobile-ads] AndroidManifest.xml:19:13-34 value=(false)." Any idea why this happens? :/ – AnyamBorogass Oct 12 '22 at 08:13
0

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

Germain Rugaba
  • 1
0

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
Fazle Rabbi
  • 1
  • 3
0

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

Rehan Goraya
  • 51
  • 5