How to Create React Native App with Admob for Android

React Native is a JavaScript framework for mobile App which is supportable for both Android and iOS platforms. It is an open-source framework based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

Earn more from your mobile apps using Google AdMob. AdMob is one of the world's largest mobile advertising platform. It is a multi-platform mobile ad network that allows you to monetize your app. User clicks on ads and earns revenue, the simplest way to improve your skills and business from Admob.

Admob's helps you to maximize revenue from ads and in-app purchases. By integrating AdMob you can start earning right away.

I am Using React Native Version 55. Here I tell you how to create an app then how we can implement AdMob. I use AdMob Banner and Interstitial.  I also mention Some Errors and solutions where I stuck while developing my app so it might be helpful.

To install React Native you can refer to this link below:

https://facebook.github.io/react-native/

Once you install React Native, you need these tools to create your React Native App.

• Terminal
• Code Editor
• Emulator/ Real Device

1. Create React Native App:

react-native init MyApp(App Name)

Or For Specific Version:

react-native init MyApp(App Name) --version 0.46.1

2. Run React Native App:

cd MyApp

react-native run-android

3. After running react-native run-android, you will see your new app running in your Android emulator look like this

4. Install React Native Admob

First, you need to create an AdMob account
Go to this Link:
https://www.google.com/admob/

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

Or For Specific Version:

npm install --save react-native-admob@0.46.1

react-native link react-native-admob

If you do not link react-native-admob, you may find this Error.

Invariant Violation: requireNativeComponent: "RNGADBannerView" was not found in the UIManager.

Click here on Solution.

If you get this Error:

Android: The SDK Build Tools revision (23.0.1) is too low for the project ':react-native-social-share'. Minimum required is 25.0.0. Click here on Solution.

5.  In the App.js file,

1. Admob Banner:

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

<View>

              <AdMobBanner

               adSize="smartBannerPortrait"

               adUnitID="your-admob-unit-id"

               didFailToReceiveAdWithError={this.bannerError}

               onAdFailedToLoad={error => console.error(error)} />

</View>

{adUnitID='your-admob-unit-id'} You can use own created AdUnitID for testing or you can use sample AdUnitID. I used Sample AdUnitId here.


The Code will look like this in App.js file

If you get this error:
Internal Error, an invalid response was received from the ad server. Click here on Solution.

If you have this Error:

Invariant Violation: the Native component for “RNGADBannerView” does not exist.

Click here on Solution.

2. AdMob Interstitial:

import { AdMobInterstitial } from 'react-native-admob';

componentWillMount() {

    AdMobInterstitial.setAdUnitID('your-admob-unit-id');

    AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);

    AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());

  }

The Page Looks Like This:

After running the command, It will display on Emulator or Real Device:

Here some example, which I created Apps on React Native with Admob Banner:

• SQL TO ElastiSearch Query
• Love Calculator
• FlashLight

Thanks for Reading !!!