fbpx

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 App Templates 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
  2. 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
  4. 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
  6. 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
  8. Build WordPress Client App with React Native #8: Implementing SinglePost Screen
  9. Build WordPress Client App with React Native #9: implement simple share
  10. 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
  12. Build WordPress Client App with React Native #12: Categories screen
  13. 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
  15. 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
  17. 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
  19. 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

Integrating your mobile app with AdMob helps you to earn more revenue while delivering the users a better user experience. In this chapter, you will learn how to include AdMob in your mobile app to easily monetize your product with relatively less work.

The first step of adding AdMob to your mobile app, be it android or ios, is creating an AdMob account here. After setting up your account, you can follow the steps that suit your mobile OS.

Add AdMob to Your iOS Apps

iOS app developers have the option to integrate AdMob to an app built with or without the use of Firebase. Here, we will be considering how to add AdMob to an app built with Firebase.

You can add the AdMob dependencies to your project using the following command.

in iOS install Google-Mobile-Ads-SDK

pod 'Firebase/AdMob'

 

Then run pod install in your command line to install the dependency.

Update the app’s Info.plist file with a GADApplicationIndentifier key using your AdMob app ID as its value.

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

 

Add Banner Ads to an iOS App Using AdMob

You can easily add banners to your already setup Firebase ios app now.

First, create a banner from the AdMob dashboard.

Then, install and import react-native AdMob package. Now you can import Firebase to the home screen and create an AdMob Banner object and an AdRequest. When setting up a banner ID, you can use a platform component as a 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';

 

Now you can add the banner to the home screen.

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

 

The resulting banner on your home screen would look like this.

 

 

Add AdMob to Your Android App

Add Banner Adds to an Android App Using AdMob

In your build.gradle file, add the following dependency to start using AdMob in your app.

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

 

Import the following package to the MainApplication.js file in your project.

import io.invertase.firebase.admob.RNFirebaseAdMobPackage;

 

Add **packages.add(new RNFirebaseAdMobPackage())**; to your code to get the package.

@Override
protected List&lt;ReactPackage&gt; getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List&lt;ReactPackage&gt; 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());**

 

Finally, add the AdMob publisher key to your AndroidManifest.xml to complete the creation of the banner ad.

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

 

The resulting page would look like this with the new addition of the banner ad.

Summary

Now that you understand how to add AdMob, generating revenues from your mobile app would be an easier task. You can now dig deeper into the field and find out more about adding other types of adds, like interstitial, native, and rewarded adds, in addition to banner ads.


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.