Build WordPress App with React Native #21 : Admob

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 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

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

in iOS install Google-Mobile-Ads-SDK

pod 'Firebase/AdMob'

then run pod install

then add Admob sdk framework to project using Xcode

in info.plistadd 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

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

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

summary

this chapter we learn how to add Admob to our app also iOS and Android using Firebase make easier than react-native-admob package

The post Build WordPress Client App with React Native #21 : Admob appeared first on Kriss.