React Native Firebaseを試してみる2(Admob編)

前提

・React Native Firebaseがインストール済である事

インストール

公式ドキュメントを見ればすぐできるので省略

試してみる

Bannerの設置

// ca-app-pub-3940256099942544~3347511713はテスト用のID
firebase.admob().initialize('ca-app-pub-3940256099942544~3347511713');
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
render() {
  return (
    <View style={styles.container}>
      <Banner
        unitId={"ca-app-pub-3940256099942544/6300978111"}
        size={"LARGE_BANNER"}
        request={request.build()}
        onAdLoaded={() => {
          console.log('Banner loaded');
        }}
        onAdFailedToLoad={(error) => {
          console.log(error);
        }}
      />
    </View>
  );
}
Banner広告が表示されます。

Interstitialの設置

// ca-app-pub-3940256099942544~3347511713はテスト用のID
const advert = firebase.admob().interstitial('ca-app-pub-3940256099942544/1033173712');
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
load = () => {
  advert.loadAd(request.build());
  advert.on('onAdLoaded', () => {
    advert.show();
  });
}

render() {
  return (
    <View>
      <Button 
        title='show interstitial'
        onPress={ this.load }
      />
    </View>
  );
}
Interstitial広告が表示されます。