Build WordPress App with React Native #21 : Admob
Tags: firebase, reactnativewordpre, admob
Published: 2019-12-14 12:05:56

---
title: Build WordPress App with React Native #21 : Admob
published: true
date: 2019-12-14 09:22:22 UTC
tags: Firebase,React native Wordpre,admob
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-21-admob/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the [React Native Mobile Templates](https://www.instamobile.io) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)
17. [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/)
18. [Build WordPress Client App with React Native #18 : changing Theme](https://kriss.io/build-wordpress-client-app-with-react-native-18-manually-changing-theme/)
19. [Build WordPress Client App with React Native #19 : Notify user when offline](https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/)
20. [Build WordPress Client App with React Native #20 : Saving data to cache](https://kriss.io/build-wordpress-client-app-with-react-native-20-saving-data-to-cache/)

for this chapter we want to add Admob to monetize content app in traditional fortunately Admob also include on Firebase service that means we can add some extra set up after set up Firebase

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

in iOS install Google-Mobile-Ads-SDK

```
pod 'Firebase/AdMob'
```

then run `pod install`

then add Admob sdk framework to project using Xcode

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1bd8814f-8ab3-482e-91ed-8d4c96237dac/Greenshot_2562-11-27_01.12.16.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45AQ4N4GNC%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T091759Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOT%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQCt%2FRqGNn9oa8khk0YQcctC8%2ByG%2FKezHSCsLgnqMKU7JQIhAK0LqiFhOqmrq0FsZdGLSlcEKn8JTwghjY9YA2eh%2Bg%2F9KtICCD0QABoMMjc0NTY3MTQ5MzcwIgxyR68r6n6l10n9GH8qrwK%2FqFghoFhg%2B3eBV7zFZ5KVuBmsypl0DrZTIWpM%2F34pfBVjFMxrn10eWVt8APx6YSIaBQcNzaudfgSUcJTfjrZ9%2FisAMGvPkHXakytOT9VSqrfSOUpIsYpupjw%2B233paNtgIxTn5S2v1OtVyxPoOCMJFrEJCKWkhqr14LPR09fCmAWcecz4zlNFBrLILvwmbPqyoZnu8dUeVUmlUAvQZoxwj2TpTqt3iB%2BGRuCpqa1oZQhwJ8E3BhWRXU5YE6%2Fnly2ctxr8Lah9DDp9XdAmzQVKyLhrjIdmGO7zwTUmQOVEu5SRcogMQP64QfldBQwLUcD6IX80xfqrLpSGYWzN2IIy6BIuO49c1%2Fx2Kf%2FC9Zf3VqrqLJRuWJK%2FUIRrVGukzN3eEUGltEFFqxKTmnGaOaUwyLfR7wU6zAIq0e5rBiiV4HZ8AhLzDmi7dH2ZmghVHr%2B9%2FMLD%2FpEhkIgwAMHrBWz9ZMoBOgBJZM7PmvQaa92xbTVh5R9PsgojKoWUXORVYI5LIV8eXCVgJFeVaj8GULqj1ioJRKeJVCXXGJSHEHht6CX0xT8Gf8du32wNFN%2FNT6gUIx9bcCOfjrwud9WNVW%2F8tDQAL1TypgY9o3vTGcA1e2thpxa0ki9wkbKFpefum7%2BYwYLrJpLkmAoaSpqmnsc3aLCUFZbuzI%2Bbp3FDp7xVeOrIBpcSHw13BsFcBRUlJtee0fJoeHU%2FU2kQRdfnV7ccbzeVZEeZMGSdc9XyBMDbV79iyZX1D75fAk9ldmboljVIYbyfxk46apVwLe1RlpLpdqENQnZ6VTJmt02pkxLDADiRsc5Q3U3jEeGxTFuua%2FffxVxb5UYKKPN%2Fv9Q3zvhOJ0aT5Q%3D%3D&X-Amz-Signature=df978615dbfc722382e86b52ae7dcb4b13597d32a2a38f1660c8f39d1646efdc&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Greenshot_2562-11-27_01.12.16.png%22)

in `info.plist`add publisher id

```
<key>GADApplicationIdentifier</key>
  <string>ca-app-pub-2547344479047582~xxxxxxx</string>
```

now close terminal and `react-native` `run-ios`

###  add banner ads

first, create banner from admob dashboard

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/98b55d3a-9e2f-4c18-a280-b698aa3f9aa1/ads.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45KOZIZIHB%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T091821Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQCULQmWtiEqHDV6rKGpSDRYoufZEcz5fivHh7ZJjyrlCwIhAIKmSqVLyMSNSvXWiWBCcCIiK7gN6FWU2hZePxDsk7KbKtICCD4QABoMMjc0NTY3MTQ5MzcwIgyNgSoSYVzwhnbywlcqrwLY6hj4cYnO%2BwiZk1qTlt4Z%2BZRGP66S%2B8WzqnEAaysEqi%2B7r2dknE4OhGSTKGUdveuwxE6WzIrAygcr00iknVA3iNO6C4t4w%2FWw3VWM0j3lArmNrHY6D6tMwP8FhKK0H5hVEZdMZU2GXg%2B7hfWXiqyxXQSNPExz7R6UDkYh6HYa3Pcs6rDwrNHEpZrIjPHI1CtfLhMtfCe1%2FWbl8LncvT3F9aRE%2FyQDCJLmVwUnhbHKZ18eC5eH8Ed19CVWdHWW2GaVK8U3gTTTt77oY%2FgAgg7aWRtVkaJFkJvdHC%2Fqdb3JVOYWgItl3WDhiqcCtX5IatCSLkPfk8hCUPjU7irsSqvlXYyF1%2BUfS7GfhIh%2B5JBMCx2OpnWxMG40QVY6QhNsAtyqDEO2ZygNXh4TLSYHZEIwxs3R7wU6zAKyQqRv8KsoTxsdTuq%2FtgkIEDFN4R6ixbl2zsM%2Br9%2FMDF7UnUU3j5yZzgGKq1z4I6TdeTvf16ez%2BGg4CjKp26nickTpspBoRbsdkTsASJJBopJGUSO%2FC0MEpmtgtVWkF6zxRKvxYfArLcbYxcOgXeW3Dmntv1k6C2KvxZOSkeZtQPwcCgV11dVbaeRPZtX%2FxMWEiPc7WoMeGjifg2%2BWKVSl8DjEhF1WkHSsf3B%2ByFFlFQNo2Sx5SUbgGhFIdwmjczyeAK4ee0T47ICAGyfJp%2FUuDJucG87qUSZ7QMW7PVbIeHAxelEtviDUbJUErRA4Qoj081p8co1LIWm%2FpLTRospvkvHRSrYtuL3TM7deSCaRXJCFYy0JShd%2FhHGbh1zQ9QaOr8dL2jaxBRf%2Bfg93bikPZhGc%2FWaMCnoJg1OaSqubaeQUhbMFt29qbo974w%3D%3D&X-Amz-Signature=b63628fc50457045acb6427858e5225b321579bc185f49d6e39bcbac83012ee1&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22ads.png%22)

Install and import react native admob package

import Firebase to in Home Screen then create Admob Banner object and AdRequest for Banner ID we use Platform component for condition

```
import firebase from 'react-native-firebase';
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
import ContentCard from '../components/ContentCard';
const unitId =
  Platform.OS === 'ios'
    ? 'ca-app-pub-2547344479047582/1964568575'
    : 'ca-app-pub-2547344479047582/3578793688';
```

then add banner in somewhere in Home screen

```
<View>
        <Headline style={{marginLeft: 30}}>Lastest Post</Headline>
        <Banner
          unitId={unitId}
          size={'SMART_BANNER'}
          request={request.build()}
          onAdLoaded={() => {
            console.log('Advert loaded');
          }}
        />
```

result

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/dd419921-4fa6-4bee-8c55-76f5975ac0e5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45J7EB6JNG%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T091853Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCICZuCoVyZ6NyMK%2Ba38eECMX5Z2rLDec8m7i5DJ88TTlVAiEAgIZU6UrboTqhnCuApZio5pJf1LYADY3sedywOgHlTu8q0gIIPhAAGgwyNzQ1NjcxNDkzNzAiDKdipFRQgolV8u0h2yqvAp5QR6vhZ2ieCigOEb3%2BPAEgKuV5RFxeBlKZ25eIHlG%2BW2BzWxUPkBwMCCC2nYKItK0uFl4TWQgCqQ5z4Xdq%2BPYkw%2BMrnDa%2BeEIiFULi%2BmUekl57pZsO4IcqhCpbGn%2BqO7%2FVgAZ9ZiDnESI2L5HOqJACJKcbEFACfvoCATRvdCqLqDMMYgjZ4hZHYQtPWZHJ%2BN2V3Y%2BMwlVx2Na%2Br6sUFJCVNWVHeGC9AFtz5qovHFBGuP70LE1te0FCOaf2zDQOQwT%2BGpWOwxH8HN0GS71gokOUVbKdAAHMbF0juGd%2FnxBG2qnrCmldjIgkjPIGoMsGzuHb0Y%2FvAansJ0rr9M7YFaCN%2B%2BYL1I6%2F9SEn06%2FkJ%2BNq%2BkNNjMEz%2FjkprDrPvs1KvisdHQiCNuFL6DtqlV8yzzDO0tHvBTrNAja3K9r266SeAhwHHtCAB5nolZceVZR3ciVKQh7bvaapsx1nIFDjr9EIPIvguLKxIK%2BNFHdpD0II6Zq%2FeFxNcjF9dcudbScYdKuwzzILM91xXzJZFiGLtbGAAKbFKRHaCgA5nIVtAD9rQ6Ck8ZFxcIYVBIZLkbe5etbWxS9mvmTtMPc7LnOlx6cre2mlQ6nniga78aGfQsqzWRkS5rPowmkw8P6%2Fi9U0vERgIBNzhoAu6lb9uf9AX817DsSy323HOIWq1%2BxJ7VeaQV4LGed9mzlvAoq6AoQQRZKML04hIm%2FiOoBZl0%2BUVhHCefq2mv62JWy9bwYmDalo6TUbxNIi5BUvqMHvBn%2Bnjma9Q9oCkWzrMG4zUTsZtgvwAB3AZcVZydlDMaFZBX6nffcBKB9iPzmOheQC1968OIa5CF4UrYu8kjEIacztljFzkrlFww%3D%3D&X-Amz-Signature=39f7b9151cd92e7773ecd5f6be9e7264c3e434752b08dbe3d1a07fa370ecd0af&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

## for Android

open android/app/build.gradle and include firebase-ads to dependencies

```
dependencies {
......other dependencie
implementation "com.google.firebase:firebase-ads:17.2.1"
```

then open android/app/src/main/java/MainApplication.js and import package

```
import io.invertase.firebase.admob.RNFirebaseAdMobPackage;
```

then add \*\*`packages.add(new RNFirebaseAdMobPackage())**;`to getpackage

```
@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new RNFirebaseDatabasePackage());
          **packages.add(new RNFirebaseAdMobPackage());**
```

last thing goto android/app/src/main/AndroidManifest.xml add Admob publisher key

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

here result in this screen shot below

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/406fa83b-3ed5-431e-a85b-e2f493df6297/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45EX6P3QY6%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T091924Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIHzdvkzlM%2BSs4c6jP0Dg0OfWAGiBobViy9ZKj1wRzgAHAiAr%2Fh3to2To4FfkWhg6%2B0m4%2BIakZ8n1qoJGGCE4hYkHACrSAgg%2BEAAaDDI3NDU2NzE0OTM3MCIMhy2cJBRF7TONgRY9Kq8CFejVq0pTMKHue%2FxChME3cyCwrUKQmgA6zwFf5%2B18yYlQ6ZsdnXcZ2jbnOJ4I17ms52jJpFQT36U9bcsqa4jjOqZu5%2B2lcogYs38CPy27u74GkVRMr6N%2Foa%2B0vprp8AwzMBIQUjcgnBVj3%2F0SM8LvYgiyu7qULVKaRXDqDDSuNbwTcPz5R5zBVScGxqo9vaOZQxqzuYx%2FgqmXhjtTuSaffxW%2Bp6kosmO2%2ByR0CUnLMjqWXgk2JaNaL3JgelO3fwn%2FOghnIx7igDojcMNARaa9x9pTIXSpZqJHN6BnFrbixnEMXlNsYjiQi09AUbwI3jZ9udCEdZtUId2c94dH8SPopHLF6mGYVSpu00ycGZEa%2Bj%2B03AyiS59C9SIsHh9rHoEdcFq%2F4GzhkvIeRHI5i%2FylMPjQ0e8FOs4C6L4XzYiPPm1b%2Bg1JrTS6hRCJkQt8oYmwS%2BJu9dsF5dwLhoA4KUOGnOLOjx0ehnfsCaeFP7D24gSYHkmJ0E1ATMkk%2FfdoBQvfDTz044cWuVEArFNXnN8bpNKvg6G89czE2MlDYeu2DMvISaL2Jz6j5GhKsEAyrH4%2FPpQFtwONo1YLvtZ1xKtRMKTAPXM5OfK4XyIjPjtUTy21N6qU4GORIN5KFzykRsC2xcztSveaqlmYO9owVuBkK5VAHjdITiB9oDjw7OZVk6%2BwsYrIpHFhYw9HZiaM9G2d0vnY7Occ2FJZ1vVM7qV89jojR7WEjceMu2lEMdCzdh03dbD7TjaYXDM1LLjNeW%2FbQBMMNrzum%2FvgO7u0dXY36aJSzd5J4DP%2BZJq8ZWBiW911wSvqPqX249Aj%2BUnQszTryei1k9lQ0wj1V3XCFKvxr%2BCGifnatQ%3D%3D&X-Amz-Signature=1c65e2f4b5d44abdc6b9e638c60cc0eab9d7835f3fe20199e318b66cc77071ed&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

### summary

this chapter we learn how to add Admob to our app also iOS and Android using Firebase make easier than [react-native-admob](https://github.com/sbugert/react-native-admob) package

The post [Build WordPress Client App with React Native #21 : Admob](https://kriss.io/build-wordpress-client-app-with-react-native-21-admob/) appeared first on [Kriss](https://kriss.io).