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:
- Build WordPress Client App with React Native #1: Overview
- Build WordPress Client App with React Native #2: Setting Up Your Environment
- Build WordPress Client App with React Native #3: Handle Navigation with React navigation
- Build WordPress Client App with React Native #4: Add Font Icon
- Build WordPress Client App with React Native #5 : Home Screen with React native paper
- Build WordPress Client App with React Native #6 : Using Html renderer and Moment
- Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll
- Build WordPress Client App with React Native #8: Implementing SinglePost Screen
- Build WordPress Client App with React Native #9: implement simple share
- Build WordPress Client App with React Native #10: Setup and save bookmark
- Build WordPress Client App with React Native #11: Remove and Render Bookmark
- Build WordPress Client App with React Native #12: Categories screen
- Build WordPress Client App with React Native #13: Configuring firebase in contact screen
- Build WordPress Client App with React Native #14 : Implementing Settings Screen
- Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function
- Build WordPress Client App with React Native #16 : Dark theme
- Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme
- Build WordPress Client App with React Native #18 : changing Theme
- Build WordPress Client App with React Native #19 : Notify user when offline
- 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.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
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.
Top comments (0)