如何将 react-native-google-mobile-ads 与 Expo 和 Expo Go 一起使用？

Question

How do I use react-native-google-mobile-ads with Expo and Expo Go? (eg 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

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"
  }
}

Answer 2

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

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