「Javascript/reactnative/admob/react-native-cli/react-native-firebase」の版間の差分

2020年10月16日 (金) 12:31時点における最新版

react-native-firebaseインストール

yarn add @react-native-firebase/app
yarn add @react-native-firebase/admob

公式：https://rnfirebase.io/admob/usage

インストール確認

package.jsonにreact-native-firebaseとadmobが入ってるか確認。

 "dependencies": {
   "@react-native-firebase/admob": "^7.5.1",
   "@react-native-firebase/app": "^8.4.5",
   "react": "16.13.1",
   "react-native": "0.63.2"
 },

AppId設定

firebase.json

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "admob_ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

上記はadmobが公開してるサンプルAppId

Androidでの追加設定

1. google-services.jsonをandroid/appの下に置く

android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        classpath 'com.google.gms:google-services:4.2.0' # add
    }
}

android/app/build.gradle

apply plugin: 'com.google.gms.google-services'

iOSの追加設定

1. GoogleService-Info.plistをxcodeプロジェクトの直下に置く

ios/AdMobSample/AppDelegate.m

#import <Firebase.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
}

サンプル

App.js

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  RewardedAd,
  RewardedAdEventType,
} from '@react-native-firebase/admob';

起動

android

$ react-native run-android

androidでfind your app IDが出る時

adb logcatで、以下エラーが出る時

$ adb logcat
> * Invalid application ID. Follow instructions here:                          *
> * https://googlemobileadssdk.page.link/admob-android-update-manifest         *
> * to find your app ID.

以下辺りに、admobのAppIdが有るはずだが、何かしらのエラーで、無い可能性が有るので見てみる。

android//app/build/intermediates/bundle_manifest/debug/processDebugManifest/bundle-manifest/AndroidManifest.xml
android//app/build/intermediates/merged_manifests/debug/AndroidManifest.xml
android//app/build/intermediates/instant_app_manifest/debug/AndroidManifest.xml
android//app/build/intermediates/manifest_merge_blame_file/debug/manifest-merger-blame-debug-report.txt

Dexエラーの対応

以下エラーが出る時

Execution failed for task ':app:mergeDexDebug'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > java.lang.NullPointerException

android/gradle.propertiesのorg.gradle.jvmargsに大きなサイズを指定する。 以下だとだめだったが、

org.gradle.jvmargs=-Xmx1024m -XX:MaxPermSize=256m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

以下2パターンどちらでも直った。

org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=256m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
org.gradle.jvmargs=-Xmx1024m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

Gradle 7.0.に更新してほしいと出た時

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

gradle/wrapper/gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-6.4.1-all.zip

Use '--warning-mode all'とでたら

以下を実行し、色々buildする

gradle --warning-mode all

Java ヒープ・スペースと出る場合

以下エラーが出る場合

Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> Java ヒープ・スペース

android/gradle.propertiesのorg.gradle.jvmargsを大きな値で入れると直る。

org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

どうしてもビルドできないときは

reactnativeのdeamonを一度切って、 一旦buildとかを削ったりして再度buildする

// build削除
rm -fr android/app/build
rm -fr .gradle/
rm -fr android/.gradle/
rm -fr android/app/build/
rm -fr android/.idea
// build再ビルド
gradle --warning-mode all
react-native run-android
gradle --warning-mode all
react-native run-android

それでもできないときは

nodeプラグインを一旦消して、上のbuildの削除をして、nodeを再インストール

rm -fr node_modules/
// ここで上のbuildの削除をして・・。
npm install
// ここで上のbuildの再インストール。

iOS

$ cd ios/ && pod install
$ react-native run-ios

テストデバイス

import { InterstitialAd, RewardedAd, BannerAd, TestIds } from '@react-native-firebase/admob';
InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);
RewardedAd.createForAdRequest(TestIds.REWARDED);
<BannerAd unitId={TestIds.BANNER} />

// testDevicesも追加、インステ例
const interstitial = InterstitialAd.createForAdRequest(
  Platform.select({
    android: 'ca-app-pub-3940256099942544/1033173712',
    ios: 'ca-app-pub-3940256099942544/4411468910',
  }),
  {
    testDevices: ['29DCxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'],
  },
);

上記appIdはadmob公式のもの。

参考：https://github.com/invertase/react-native-firebase/blob/master/packages/admob/lib/index.d.ts

メディエーション

Javascript/reactnative/admob/react-native-cli/mediation [ｼｮｰﾄｶｯﾄ]

インステandroidについて

facebookのandroidが出なかったが、上記テストデバイスを追加したところ出るようになった。

以下adnwについては、contextをactivityにキャストしてるので、react-native-firebaseでは、キャストエラーとなり再生されない。

• adcolony
• applovin
• tapjoy
• nend
• unityads
• maio

例として、adcolonyの以下ソースの172行目にcontextのActivity相当のクラスかどうかのチェックが入る。 https://github.com/googleads/googleads-mobile-android-mediation/blob/master/ThirdPartyAdapters/adcolony/adcolony/src/main/java/com/google/ads/mediation/adcolony/AdColonyMediationAdapter.java

参考

https://rnfirebase.io/admob/usage

https://medium.com/javascript-in-plain-english/implement-admob-in-react-native-with-firebase-4e5000419109

https://dev-yakuza.github.io/react-native/react-native-firebase-admob/