【React Native】Google AdMob導入方法【iOS&Android両対応】

2021/04/20 追記
Androidにおいて、ライブラリをインストールしたときにreact-native-admobのエラーが発生することが確認できました。
参考: react-native-admobをインストールしたときのandroidでのエラー
修正方法を一番下に追記しています。

---

React NativeにGoogle AdMobを導入する際、情報が古かったり同様の方法でやってもうまくいかないことが多かったので、詳細に導入方法をまとめてみます。
Google AdMobを利用する際には現時点で2つ方法があります。

• react-native-admobを利用する方法
• react-native-firebaseを利用する方法

今回はreact-native-admobを利用する方法について説明します。

導入した環境

React Native 0.62.2
iOS 13.3 CocoaPods
Android 10.0
実装した広告: バナー広告

iOS

react-native-admobのREADMEと同様に進んでいきます。

1. npm or yarnでreact-native-admobをインストール

npm i --save react-native-admob@next
もしくは
yarn add react-native-admob@next

2. Google Mobile Ads SDKを追加

Google AdMob公式を参考に進んでいきます。
事前にAdMobアカウントを作成・アプリ登録を済ませたあと、対象のアプリケーションにMobile Ads SDKをインポートします。
pod 'Google-Mobile-Ads-SDK'
をiosファイルの中にあるPodfileに書き込み、
pod install --repo-update

3. Info.plistの更新

iosファイルの中にあるInfo.plistに GADApplicationIdentifier キーとAdMobアプリIDの文字列値を追加します。

Info.plist

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

4. AppDelegate.mの変更

AppDelegate.m

+ @import GoogleMobileAds;

  @implementation AppDelegate

  - (BOOL)application:(UIApplication *)application
            didFinishLaunchingWithOptions: (NSDictionary *)launchOptions {
+    [[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
     return YES;
  }

  @end

自分の場合、すでに何行かコードが書いてありましたが、 @implementation AppDelegate の直上に @import GoogleMobileAds; を入れ、

AppDelegate.m(抜粋)

  UIViewController *rootViewController = [UIViewController new];
+ [[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
  rootViewController.view = rootView;

このように追加しました。

5. react-native-admobをimportし、コンポーネントを配置

import { AdMobBanner } from 'react-native-admob'; とし、下のように配置しました。

  render() {
  return (
+  <AdMobBanner
+    adSize="fullBanner"
+    adUnitID="AdMobでアプリを登録した時に表示されるAppID"
+    testDevices={[AdMobBanner.simulatorId]}
+    onAdFailedToLoad={(error) => console.error(error)}
+  />
  ...

このようにテスト広告が表示されれば成功です。

Android

1. npm or yarnでreact-native-admobをインストール

iOSと同様にインストールします。

2. Google Mobile Ads SDKのインストール

android/build.gradleの中に

android/build.gradle

allprojects {
   repositories {
        google()
   }
}

があることを確認して、今度はandroid/app/build.gradleの中に以下のコードを追加します。

android/app/build.gradle

 dependencies {
+    implementation 'com.google.android.gms:play-services-ads:19.1.0'
 }

3. Android Manifest.xmlの変更

次に、android/src/main/AndroidManifest.xmlに以下のようにコードを追加します。

AndroidManifest.xml

  <manifest>
    <application>
          <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
+     <meta-data
+         android:name="com.google.android.gms.ads.APPLICATION_ID"
+         android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
  </manifest>

GoogleMobileAds公式ページにはまだ下に手順が書かれていますが、追加するのはここまでです。

4. react-native-admob/android/build.gradleのSDKバージョンを固定する

上記の方法でアプリをビルドしてみたものの失敗したので、解決策を探していたところこの方法で解決できました。
node_modules/react-native-admob/android/build.gradleを見ると、以下のように記述されていると思います。

node_modules/react-native-admob/android/build.gradle

...
dependencies {
    implementation 'com.facebook.react:react-native:+'
    implementation 'com.google.android.gms:play-services-ads:+'
}

こちらの下の段、admobのSDKが更新された影響で古いAPIと互換性が無いことでビルドが失敗していたようです。(参考)
現在の最新のadmobのSDKバージョンは19.6.0のようなので、以下のように書き直します。

-  implementation 'com.google.android.gms:play-services-ads:+'
+  implementation 'com.google.android.gms:play-services-ads:19.6.0'

5. react-native-admobをimportし、コンポーネントを配置

iOSと同様の方法で配置します。

このように表示されれば成功です！

Execution failed for task ':react-native-admob:compileDebugJavaWithJavac'.

Admobの実装が終わった後、他のライブラリをインストールし、Androidでシミュレーターを起動する時に以下のようなエラーメッセージが出ることが確認できました。

* What went wrong:
Execution failed for task ':react-native-admob:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

こちら（react-native-admobをインストールしたときのandroidでのエラー）の記事によると、node_module/react_native_admobのbuild.gradleを修正することが書かれていました。

あれ？ 4. react-native-admob/android/build.gradleのSDKバージョンを固定する
でそこは修正したよな…？と思っていましたが、他のライブラリをインストールするとnode_modulesの部分は元のコードに戻ってしまいます。

そこで、今回はpatch-packageでreact-native-admobにパッチを当てることでライブラリをインストールしても勝手に修正されないように変更します。

参考: React Nativeのライブラリをpatch-packageで手軽に修正する方法

1. package.jsonに追記

package.json

  "scripts": {
     "android": "react-native run-android --variant=developDebug --appIdSuffix=dev",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
+    "postinstall": "patch-package"
  }

2. ライブラリのインストール

npmの場合は
npm i patch-package --save-dev
yarnの場合は
yarn add --dev patch-package postinstall-postinstall

3. /node_modules/react-native-admob/android/build.gradleの内容を変更

/node_modules/react-native-admob/android/build.gradle

 dependencies {
    implementation 'com.facebook.react:react-native:+'
-   implementation 'com.google.android.gms:play-services-ads:+'
+   implementation 'com.google.android.gms:play-services-ads:19.6.0' 
 }

固定するバージョンは各自がインストールしたSDKのバージョンに合わせてください。

4. パッチファイルの生成

npmの場合は
npx patch-package react-native-admob
yarnの場合は
yarn patch-package react-native-admob

すると、

• Creating temporary folder
• Installing react-native-admob@2.0.0-beta.6 with yarn
• Diffing your files with clean files
✔ Created file patches/react-native-admob+2.0.0-beta.6.patch

このようなログが表示され、patch/react-native-admob+2.0.0-beta.6.patch のようなファイルが生成されていることが確認できると思います。

これで新しいライブラリをインストールしたときに node_modules/react-native-admob の中身が変更されなくなります。
僕の実装ではこちらの修正をするだけで正常に起動するようになりました。
この修正でも起動できない場合は、こちら（react-native-admobをインストールしたときのandroidでのエラー）の記事を参考にするとよいかと思います。（Takuya-Nakamuraさん、情報ありがとうございます！）

おわりに

ぱっと見そこまで複雑ではありませんが、自分はなぜか2週間くらい広告を表示させるのに手間取ってしまいました…
npmでreact-native-admobをインストールしたときに同時に古いバージョンのReactがインストールされてしまったり、podfileに記述することでライブラリをインストールしようとして失敗したり。
React Nativeで実装している記事が少なく、かつバージョンが変わるのがとても早いため、今回は備忘録としてまとめました。
React Nativeでadmobを導入する今回の記事が少しでもお役に立てれば幸いです。