React Native ADMOB

How to add ADMOB in React Native.

In this Tutorial i will explain how to add admob in react native. i have used React native 0.60.5. 

follow the step to add admob in ur android apps.
There are two libraries you can use to display advertisement in your mobile apps:

1. react-native-admob
2. react-native-firebase

This can be accomplished using below steps:

1. install react-native-admob

2. Android configurations

3. Create and register app on Google AdMob

4. Integration Code

Let's have a look at these steps one by one.

Install React-native-admob

Following Command will install latest version of react native admob.

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

Android Configurations

This step is important to link the library properly, if you don’t see below changes in your files then you can manually add these changes.

·         In android/settings.gradle

1 2 3 4

rootProject.name = 'AppNAme' include ':react-native-admob' project(':react-native-admob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android') include ':app'

·         In android/app/build.gradle

1 2 3

dependencies {     implementation project(':react-native-admob') }

·         In android/app/src/java/com/[appName]/MainApplication.java

Import package:

1	import com.sbugert.rnadmob.RNAdMobPackage;

Add package inside “List<ReactPAckage> getPackage()”:

1 2 3 4 5 6 7

@Override protected List<ReactPackage> getPackages() {   return Arrays.<ReactPackage>asList(       new MainReactPackage(),         new RNAdMobPackage()   ); }

We will use this “AdUnitId” in the “Coding….” explained below:

Integration Code

·         Add below code into AndroidManifest.xml

<meta-data

android:name="com.google.android.gms.ads.APPLICATION_ID"

android:value="ca-app-pub-3940256099942544~3347511713"/>

·         You can find “Application_Id” in Google AdMob account => “Apps” => “View all apps”. Highlighted part in the below screen is your appId.

·         Add below code in your app.js to show “Banner Ads”

Add “adUnitID” we previously created. Make sure you add unit ID, not AppID

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import React, { Component } from 'react'; import { View } from 'react-native'; import {     AdMobBanner,     AdMobRewarded,     AdMobInterstitial,     PublisherBanner,   } from 'react-native-admob'; class App extends Component {     render() {         return (              <View style={styles.container}>                 <AdMobBanner                     adSize="smartBannerPortrait"                     adUnitID="ca-app-pub-3940256099942544/6300978111"                     onAdFailedToLoad={error => console.error(error)}                 />              </View>                )              } } const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: "center",     alignItems: "center",   }, }); export default App;

With this code you should see below output: