How to show Ads in React Native?
Tags: react, reactnative, javascript, npm
Published: 2020-05-09 22:08:05


Mobile Ads are always considered to the best part of monetizing :moneybag: the app So we decided to integrate Google Admob in our app, which would let us display ads on both ios and android.

After roaming through various articles and reading official documentation for AdMob from google and scattered information here and there. I decided to write this blog which has everything in one place.

We can integrate Google Admob very easily by following the below 2 steps.

- Admob Account Setup
- Code Level Integration


## Admob Account Setup

First, you need to create an AdMob account from [Here](https://apps.admob.com/signup/admob-account) to start using google AdMob services.

Once you have successfully created an account at AdMob you need to create an App with its name platform (ios or android).

![](https://user-images.githubusercontent.com/13884296/81353131-e6a98000-90e5-11ea-99f2-6b1b4af17611.png)

Once the app is created you will be getting an appId as below which will be used to target all the ads to a specific application.

```javascript
App ID : ca-app-pub-3940256099942544~1458002511
```
So now we have an App ID which is registered at Admob lets try to create some ads, You can select ads from the Banner, Interstitial, and Rewarded ads. We will be using a simple Banner Ad here as an example.

![](https://user-images.githubusercontent.com/13884296/81353226-1d7f9600-90e6-11ea-816d-62908bfc31a1.png)

Now here the last and most important step comes in Admob account setup.
we have to create an Ad Slot, these are the slot that we use in our ios and android app where can target our ads.

![](https://user-images.githubusercontent.com/13884296/81353355-74856b00-90e6-11ea-8767-1753c54e665a.png)

We will be using the Ad Slot we created just now for the code level integration in the next step.

```js
Ad Unit Id : ca-app-pub-3940256099942544/6300978111
```
Note : Ads will only start serving on the above adSlot Id once you finish payment information [Here](https://apps.admob.com/v2/payments/overview?pli=1) and in case of the new account it may take some time to start serving the ads.


## Code level Integration 

We need to install a library called `react-native-admob` for using Google Admob in a react native app.

> npm i -S react-native-admob@next

and then run

> react-native link react-native-admob 

Ios app's out of the box does not allow you to display ads on the app for that we have to add `GoogleMobileAds.framework`.

The simplest way to import the above framework into our app will be through CocoaPods.Add the below line in your Podfile.

> pod 'Google-Mobile-Ads-SDK'

and then run below command

> pod install --repo-update

For more information on Google Mobile Ads Framework you can read [Here](https://developers.google.com/admob/ios/quick-start#import_the_mobile_ads_sdk).

Now let's add the `appId` and `adUnitId` we got from account set up in the android and ios code for displaying ads.

> IOS 

AdMob application id should be added to Info.plist. 

```js
 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>
```


> Android

Add Admob application id (com.google.android.gms.ads.APPLICATION_ID) in AndroidManifest.xml

```js

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~1458002511"/>

```

> react-native-admob usage

The implementation of `react-native-admob` was quite simple, I just imported ‘AdMobBanner’ and passed adSlot Id to it.


```js
import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {AdMobBanner} from 'react-native-admob';

const App = () => {
  const onFailToRecieveAd = (error) => console.log(error);

  return (
    <>
      <SafeAreaView>
        <AdMobBanner
          adSize="largeBanner"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
          didFailToReceiveAdWithError={onFailToRecieveAd}
        />
      </SafeAreaView>
    </>
  );
};

export default App;
```

And that’s it :), You will be seeing the ads on your app :beers: 

If you face any issues,You can find the above example in the Github Repo [Here](https://github.com/srajesh636/React-Native-Admob-Integration/blob/master/App.js)