[React Native] AdMob 라이브러리 변경

기존에 사용하던 라이브러리로 AdMob 광고를 표시하고 있었는데

 

정책 위반 메일을 받아서 이를 처리할 필요가 있었다.

 

그래서 react-native-admob 저장소에서 문서를 읽어봤다.

 

isReady 메소드로 처리가 가능하겠다는 생각이 들었다.

 

그러다 우연히 react-native-firebase에서 AdMob 라이브러리가 생긴 것을 확인했다.

 

기존에 사용하던 것은 아직 beta였지만

 

react-native-firebase에서는 정식 버전이라 더 안정적으로 보여 변경하기로 했다.

$ npm install @react-native-firebase/admob
$ react-native link @react-native-firebase/admob

프로젝트 디렉토리에 firebase.json을 만들고 다음을 추가한다.

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

사용법은 다음과 같다.

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  TestIds
} from '@react-native-firebase/admob'

const interstitialAd = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);
interstitial.onAdEvent((type) => {
    if (type === AdEventType.LOADED) {
        interstitial.show();
    }
}
interstitial.load();

<BannerAd
  unitId={TestIds.BANNER}
  size={BannerAdSize.SMART_BANNER}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
  onAdLoaded={() => {
    console.log('Advert loaded');
  }}
  onAdFailedToLoad((error) => {
    console.error('Advert failed to load: ', error);
  })
/>

 

참고 문헌

1. https://github.com/invertase/react-native-firebase/tree/master/packages/admob