[React Native - ios/android] react-native-google-mobile-ads 사용하여 admob 적용

* firebase 설치 없이 간단하게 admob 적용이 가능해졌다.

 

admob에서 app ID, ad unit ID는 생성했다는 전제 하에 정말 간단하게 적용이 가능하다. 

* reference : https://docs.page/invertase/react-native-google-mobile-ads

 

1. package 설치

yarn add react-native-google-mobile-ads

 

2. app ID 등록

 - app.json 파일에 app id 등록 후 rebuild

 

# project > app.json

{
...

  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

# For iOS
npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

 

3. google mobile 광고 SDK 초기화

 - App.js 파일에 초기화 설정

 

# project > App.js

...
import mobileAds from 'react-native-google-mobile-ads';

const App = () => {

  mobileAds()
    .initialize()
    .then(adapterStatuses => {
      // Initialization complete!
    });
       
 ...

 

4. 광고 설정

 - 광고를 삽입할 위치에 배너 삽입

 - 개발 모드일 경우 unitId 에 test ID 를 적용하고, 실제 운영 배포 시에 개인의 ad unit ID 를 적용해준다.

...

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

...
# Banners
<BannerAd unitId={TestIds.BANNER} />
...