こんにちは！C.Cです。
みなさんEAS EXPOでreact-native-google-mobile-adsライブラリを用いて広告を表示させたいのに
'RNGoogleMobileAdsModule' could not be found.というエラーが出て困ってませんか？
この記事ではエラーの意味と解決方を解説していきます。
- 'RNGoogleMobileAdsModule' could not be found.のエラーが出る理由がわかる
- 'RNGoogleMobileAdsModule' could not be found.のエラーを解決できる
もくじ
エラーの意味と理由
エラーの理由はGithubのissueを参考にさせていただきました。一部抜粋してGoogle翻訳にかけてます。
React-native-google-mobile-ads には、expo go でサポートされていないカスタム ネイティブ コードが含まれています。カスタム ネイティブ コードを完全にサポートする expo dev クライアントに移行することもできます。
https://github.com/invertase/react-native-google-mobile-ads/issues/437#issuecomment-1694713620
stackoverflowにあった質問に対する回答のほうがわかりやすいです
同じエラーが発生しました。問題は、expo go を使用してアプリを実行することでした。 eas ビルドを使用してアプリをビルドした後、 eas からビルドしたアプリをダウンロードし、デバイスまたはエミュレーターにインストールする必要があります。次に、vs code から開発サーバーを実行し、ダウンロードしたアプリを実行します。 YouTube のこちら、または expo のこちら を参照してください。さらに詳しく読みたい場合は、ドキュメントを参照してください。これがお役に立てば幸いです 🙂
https://stackoverflow.com/questions/76793698/invariant-violation-turbomoduleregistry-getenforcing-rngooglemobileadsmo
つまり、Expo Goのアプリを使用して開発を行っている限りこのエラーが出てきてしまうということです。
なのでExpo Goを使用せずに開発をしなければなりません。
水色の枠に囲まれたExpo Goアプリをつかうと'RNGoogleMobileAdsModule' could not be found.のエラーがでてしまうので黄緑枠にあるように別途開発用のアプリをインストールする必要があります
react-native-google-mobile-ads をインストールしてアプリに配置する
まずはエラー対処の前に広告を配置します。
インストール
npm install react-native-google-mobile-adsyarn add react-native-google-mobile-ads公式HPではyarnで紹介されていますが、私はnpmでパッケージ管理を行っていたのでnpmを使用しました。
app.jsonを編集する
app.jsonに"react-native-google-mobile-ads"以下を追加します。
"android_app_id"および"ios_app_id"の"ca-app-pub-xxxxxxxx~xxxxxxxx"にはGoogle admob から
アプリIDをコピペしてください。
"android_app_id"および"ios_app_id"に有効なアプリIDが入っていないとBuild後起動したときにアプリがクラッシュします。まだ、広告を作成していない場合には該当の行を削除してください。
{
"expo": {
"name": "",
"slug": "",
"version": "",
"orientation": "",
"icon": "",
"userInterfaceStyle": "",
"splash": {
"image": "",
"resizeMode": "",
"backgroundColor": ""
},
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"delay_app_measurement_init": true,
"user_tracking_usage_description": "許可することで、より関連性の高い広告を表示することができるようになります。"
}
}配置
いろいろなやり方があると思いますが一例を紹介します。
16行目の"ca-app-pub-xxxxxxxx/xxxxxxxx"の部分はGoogle admob からバナーの広告ユニットの"広告ユニットID"をコピペしてください
import React from "react";
import mobileAds ,{
BannerAd,
BannerAdSize,
TestIds,
}from "react-native-google-mobile-ads";
// 初期化
mobileAds()
.initialize()
.then((adapterStatuses) => {});
// ユニットID
const adBannerUnitId = __DEV__
? TestIds.BANNER
: "ca-app-pub-xxxxxxxx/xxxxxxxx";
export function AdmobFullBanner() {
return (
<BannerAd
unitId={adBannerUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
);
}あとは必要なページでコンポーネントを呼び出すだけ！
import React from "react";
import { AdmobFullBanner } from "../Admob";
export default function App() {
return (
//...
<AdmobFullBanner />
);
}エラーの対処法
この動画を見れば全て解決できる
'RNGoogleMobileAdsModule' could not be found.のエラーを回避するためには、繰り返しになりますが開発用のアプリをBuildしてシミュレーターもしくはデバイスにインストールする必要があります。
開発用のアプリのインストール方法は上記の動画にてiOS,Androidともに英語で詳しく解説されてます！
ですが、動画を見るのがめんどくさい方のためにこの記事でも解説して行きたいと思います。
eas-cliをインストールする
npm install -g eas-cliすでにインストールしたことのある方も一応やっておいたほうが良いです。
expo-dev-clientをインストールする
npx expo install expo-dev-client開発用アプリを使用するためには"expo-dev-client"が必要になりますのでインストールを忘れないようにしましょう
eas.jsonを作成する
EAS ビルド用に iOS または Android プロジェクトを構成するために、次のコマンドを実行します。
eas build:configure自動でやるかを聞かれるのでYesを選びます。
Would you like to automatically create an EAS project for HOGEHOGE? > (Y/n)
すると以下のような選択肢が現れます。今回は「All」を選択します
ALL
iOS
Android
eas.jsonを編集する
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
},
"preview": {
"distribution": "internal"
},
"production": {}
"development-simulator": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"simulator": true
}
}
}
上記の"development-simulator"部分をeas.jsonに追記します。
iOSシミュレーター
eas build --profile development-simulator --platform ios上記のコマンドでiOSシミュレーター用に開発用アプリをBuildします。
? Install and run the iOS build on a simulator? › (Y/n)
Buildが終了するとターミナルにiOSシミュレーターにインストールするように求められるので、
「Y」を押してインストールします。
iOSデバイス
iOSデバイスに開発用アプリをインストールするにはApple Developer memvershipに登録が必要です！
eas device:create上記のコマンドで開発するiOSデバイスをアドホック プロビジョニング プロファイルに登録します。
eas build --profile development --platform iosさらに上記のコマンドでiOSデバイス用に開発用アプリをBuildします。
Buildが終了するとターミナルにQRコードが表示されるのでiOSデバイスで読み取るとインストールがはじまります。
Androidエミュレーター & デバイス
eas build --profile development --platform android上記のコマンドでAndroid用に開発用アプリをBuildします。
Androidエミュレーター
Build終了時にターミナルにAndroidエミュレーターにインストールするように求められるので、
「Y」を押してインストールします。
Androidデバイス
Build終了時にターミナルに表示されるURLをAndorodデバイスで開くとインストールできます。
開発サーバーを立ち上げるときの注意点
npx expo start --dev-clientyarn start --dev-client開発サーバーを立ち上げる場合は必ず上記のコマンドを使用してください。
お尻に"--dev-client"をつけることでインストールした開発用アプリを使用することができます。
"npx expo start"のみだとExpo Goアプリで起動してしまうため、'RNGoogleMobileAdsModule' could not be found.のエラーが再度発生してしまいます。
最後に
私は"react-native-google-mobile-ads"のインストール前に開発用アプリをBuildしてしまったり、
"--dev-client"をつけずに開発サーバーを立ち上げてしまうなどを繰り返したため、
一月のBuild上限回数15回を超えてしまいました😅
上限回数を増やすために課金まではしたくないので結局２週間ほどアプリ開発ができない状況になってしまいました...😭
皆様はそうならないよう、解決の一助になれば幸いです！
参考サイト
https://github.com/invertase/react-native-google-mobile-ads/issues/437