[React Native] Admob 사용

react-native로 만든 앱에 광고를 넣기 위해 react-native-admob을 사용했다.(안드로이드만 사용)

$ npm i --save react-native-admob@next
$ react-native link react-native-admob@next

android/app/build.gradle에 다음을 추가한다.

dependencies {
    ...
    implementation "com.google.firebase:firebase-core:17.0.0"
    implementation "com.google.firebase:firebase-ads:17.2.1"
}

사용법은 다음과 같다.

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from 'react-native-admob'

// 배너 광고
<AdMobBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[AdMobBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
/>

// DFP(Doubleclick For Publisher) - 조건을 상세하게 커스터마이징할 수 있는 배너
<PublisherBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[PublisherBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
  onAppEvent={event => console.log(event.name, event.info)}
/>

// 전면 광고
AdMobInterstitial.setAdUnitID('your-admob-unit-id');
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());

// 리워드 광고
AdMobRewarded.setAdUnitID('your-admob-unit-id');
AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());

배너 광고를 추가한 뒤 에뮬레이터로 확인하면 경고가 뜨는데 이 경우엔 다음과 같이 하면 해결할 수 있다.

 

node_modules/react-native-admob/RNAdMobBanner.js에서

UIManager.RNGADBannerView.Commands.loadBanner를

UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner로 변경하면 된다.

27  loadBanner() {
28    UIManager.dispatchViewManagerCommand(
29      findNodeHandle(this._bannerView),
30      UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner,
31      null,
32    );
33  }

 

참고 문헌

1. https://github.com/sbugert/react-native-admob/issues/339