facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(Dexエラーの対応)
 
(同じ利用者による、間の13版が非表示)
行2: 行2:
 
  yarn add @react-native-firebase/app
 
  yarn add @react-native-firebase/app
 
  yarn add @react-native-firebase/admob
 
  yarn add @react-native-firebase/admob
 +
 +
公式:https://rnfirebase.io/admob/usage
  
 
===インストール確認===
 
===インストール確認===
行27: 行29:
 
#google-services.jsonをandroid/appの下に置く
 
#google-services.jsonをandroid/appの下に置く
  
andorid/build.gradle
+
android/build.gradle
 
<pre>
 
<pre>
 
buildscript {
 
buildscript {
行104: 行106:
 
</pre>
 
</pre>
 
    
 
    
ヒープサイズに大きなサイズを指定する。
+
android/gradle.propertiesのorg.gradle.jvmargsに大きなサイズを指定する。
 +
以下だとだめだったが、
 
<pre>
 
<pre>
org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
org.gradle.jvmargs=-Xmx1024m -XX:MaxPermSize=256m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 +
</pre>
 +
以下2パターンどちらでも直った。
 +
<pre>
 +
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
 
</pre>
 
</pre>
  
行138: 行146:
 
  rm -fr android/.gradle/
 
  rm -fr android/.gradle/
 
  rm -fr android/app/build/
 
  rm -fr android/app/build/
 +
rm -fr android/.idea
 
  // build再ビルド
 
  // build再ビルド
 
  gradle --warning-mode all
 
  gradle --warning-mode all
行154: 行163:
 
  $ cd ios/ && pod install
 
  $ cd ios/ && pod install
 
  $ react-native run-ios
 
  $ react-native run-ios
 +
 +
===テストデバイス===
 +
<pre>
 +
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'],
 +
  },
 +
);
 +
</pre>
 +
上記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
  
 
===参考===
 
===参考===

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/