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

2020年10月1日 (木) 18:10時点における版

react-native-firebaseインストール

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

インストール確認

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の下に置く

andorid/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

=iOS

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

参考

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/