React Native - Using ad admob

July 27, 2017

Hello Sobat, Hari ini saya akan memberikan tutorial bagaimana cara memasang iklan admob pada aplikasi android menggunakan react native, baik untuk langkah-langkahnya sobat bisa lihat dan langsung parktekan.

Vidio Tutorial

Admob
Membuat akun admob disini, jika soba sudah membuat akun admob selanjutnya buat iklan dengan format unit iklan banner dan iklan native jika sudah sobat akan dapat kode unit iklan seperti gambar dibawah

Jika semua sudah beres selanjutnya membuat aplikasinya

Package
Menambahkan library admob pada package.json dengan mengetik perintah pada terminal

npm i react-native-admob -S

Index.android.js
Maskan Source Code Berikut, untuk pemasangan iklan lihat vidio

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableHighlight,
} from 'react-native';

import {AdMobBanner} from 'react-native-admob'

export default class codetrAdmob extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.codetr}>CodeTR</Text>
          <AdMobBanner
            bannerSize="fullBanner"
            adUnitID="your-admob-unit-id"
            testDeviceID="EMULATOR"
            didFailToReceiveAdWithError={this.bannerError} />

        <Text style={styles.codetr}>--------------------</Text>

          <AdMobBanner
            bannerSize="mediumRectangle"
            adUnitID="your-admob-unit-id"
            testDeviceID="EMULATOR"
            didFailToReceiveAdWithError={this.bannerError} />
      </View>
    );
  }
}

var styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
   },
   codetr: {
      fontSize: 30,
      textAlign: 'center',
      margin: 10,
   },
});


AppRegistry.registerComponent('codetrAdmob', () => codetrAdmob);