React NativeアプリでGoogleAdmob広告を表示する方法

1. GoogleAdmobを開いてログイン

2. AdMoBアカウントを作成

3. アプリ→アプリ追加
   

4. アプリを検索して追加する
   

5. Mobile Ads SDK をインポートするPodfileに書き込む

pod 'Google-Mobile-Ads-SDK'

$ pod install --repo-update
Analyzing dependencies
Downloading dependencies
Installing Google-Mobile-Ads-SDK (7.68.0)
Installing GoogleAppMeasurement (7.1.0)
Installing GoogleUserMessagingPlatform (1.4.0)
Installing GoogleUtilities (7.1.1)
Installing PromisesObjC (1.2.11)
Installing nanopb (2.30906.0)
Generating Pods project
Integrating client project
Pod installation complete! There are 39 dependencies from the Podfile and 42 total pods installed.

6. 追加したアプリの広告ユニットのアプリIDをInfo.plistに書き込む
   

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-2275084682351870~3490412043</string>

7. AppDelegate書き込み

@import GoogleMobileAds; //@implementation AppDelegateの上に書かないとエラー

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  [[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
  return YES;
}

@end

8. アプリの広告ユニットを追加
   

9. AdMobでアプリを登録した時に表示される広告ユニットID
   

10. 実際にコードに落とし込む>その後キャッシュクリアしてビルド１

$ npm i --save react-native-admob@next
// ネイティブ広告を選択
$ npm i react-native-admob-native-ads
$ react-native link react-native-admob

import {AdMobBanner} from 'react-native-admob';
<AdMobBanner
    adSize="fullBanner"
    adUnitID="AdMobでアプリを登録した時に表示される広告ユニットID"
    testDevices={[AdMobBanner.simulatorId]}
    onAdFailedToLoad={(error) => console.error(error)}
  />