React NativeでGoogle AdMobのバナー広告を出す #iOS

環境

React Native:0.70.6
pod: 1.11.3
iOS:16.0

今回使うやつ

Google AdMobのアカウント作成

こんなもんに説明はいらねぇ
アカウント作ってアプリを追加。
広告ユニットも追加する。

インストール

_# Install the admob module
yarn add react-native-google-mobile-ads

僕はnpmでやりたいんだい!!

npmに上がってたのでnpmでやる(いいのかなぁ)

npm i react-native-google-mobile-ads

"react-native-google-mobile-ads": "^8.2.2",

勝ったな(確信)

ちまちま設定

app.json

   "Nanyara": "Kanyara",
+  "react-native-google-mobile-ads": {
+    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
+   }
   "Kokowa": "Kankeinaiyo"

Google AdMob側で発行されたアプリIDを打ち込む。

#やれと書いてたので
npx pod-install
npx react-native run-ios

テスト広告を出す

import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.FULL_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />
  );
}

こんなものが落ちてたのでアプリに突っ込んでみると

出てるジャーン(勝利確信)
※グレーのは目隠し(?)です

でも自分のunitIdに変えてみると出ない(泣)
onAdFailedToLoadでエラーが取れそうなので拾ってみると

Account not approved yet.

Google側のを読んでるとストアにリリースしないと出せないのかなって雰囲気があるので今はこのくらいでしょうか。

バナーのサイズ

size={BannerAdSize.FULL_BANNER}のFULL_BANNERはちょっと大きすぎるので大きさを変えたい。
なのでBannerAdSizeの中をのぞいてやると

{
	"ADAPTIVE_BANNER": "ADAPTIVE_BANNER",
	"ANCHORED_ADAPTIVE_BANNER": "ANCHORED_ADAPTIVE_BANNER",
	"BANNER": "BANNER",
	"FLUID": "FLUID",
	"FULL_BANNER": "FULL_BANNER",
	"INLINE_ADAPTIVE_BANNER": "INLINE_ADAPTIVE_BANNER",
	"LARGE_BANNER": "LARGE_BANNER",
	"LEADERBOARD": "LEADERBOARD",
	"MEDIUM_RECTANGLE": "MEDIUM_RECTANGLE",
	"WIDE_SKYSCRAPER": "WIDE_SKYSCRAPER"
}

こんな感じのが入ってた。
さっきのページにあったBannerAdSize(404になってる)はこれについて書いてあったのかな？

このへん？
わかんないねー。
一通り見て今回はBANNERにしました。