Geek Culture
Published in

Geek Culture

Monetize Your React Native Expo Application With Google AdMob

How To Add BannerAd, InterstitialAd, RewardAd In React Native Expo Apps

How To Show Ads On Your React Native Expo Apps

Hello, Native developers!

My name is Rohit Kumar Thakur. I generally write about React Native, Django, Data Science, Machine Learning, and Python.

In this article, I am going to show you how to monetize your React Native Expo applications. I know building any application takes time, sweat, and sleep. And we all know that money is the ultimate motivation. If you start earning from the apps you make, then all your hard work is going to pay off. So, let’s start.

Here is the step-by-step video tutorial of this article:

Show Ads on your react native mobile apps

Project Setup

  • Choose the directory of your choice
  • In the same directory, open the command prompt or terminal.
  • Initialize and expo app using the command: expo init TestAdMob
  • Select the blank template and continue to dependencies downloading
  • Navigate to the newly built directory using the command: cd TestAdMob
  • Install expo AdMob using the command: expo install expo-ads-admob

Now, open this project in your favorite code editor. Oh! VS Code? Nice.

Code

BannerAd

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect } from 'react';
import { AdMobBanner } from 'expo-ads-admob';
export default function App() {
return (
<View style={styles.container}>
<Text>Admob Test</Text>
<AdMobBanner
bannerSize="fullBanner"
adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
servePersonalizedAds // true or false
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

InterstitialAd

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect } from 'react';
import { AdMobInterstitial } from 'expo-ads-admob';
const interstitial = async () => {
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
try {
await AdMobInterstitial.requestAdAsync();
await AdMobInterstitial.showAdAsync();
} catch (error) {
console.log(e);
}
};
export default function App() {
useEffect (() => {
interstitial();
},[])
return (
<View style={styles.container}>
<Text>Admob Test</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

RewardAd

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect } from 'react';
import { AdMobRewarded } from 'expo-ads-admob';
const reward = async () => {
await AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
try{
await AdMobRewarded.requestAdAsync();
await AdMobRewarded.showAdAsync();
} catch (error){
console.log(e)
}
}
export default function App() {
useEffect (() => {
reward();
},[])
return (
<View style={styles.container}>
<Text>Admob Test</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Well, that’s it. Now, your device can show the test ad.

Expo provides the default AdUnitID. You can use this ID for testing purposes. But if you want to show the real ad then, you have to make an account on Google AdMob.

After you make your account, Google AdMob will give you an AdUnitID. Simply, replace that id with expo AdUnitID.

Now, Your Mobile App will show you the real ad. You can make fortune from it.

Now, clap, clap and clap! And do follow for more project-based articles on React Native expo.

Thanks for reading.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

JavaScript Date Libraries Showdown

📃Visual Tag Icons in WorkFlowy

What are Pure Functions in Javascript?

How to Scan a Website for Threats in Node.JS

How to Format Code in VS Code

Frontend Weekly Digest #247 (1–6 February 2022)

“Defend the Web” write-up (Intro 10— JavaScript code exposure and decryption)

5 Reasons Why You Should Bet on JavaScript in 2020

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kumar Thakur

Rohit Kumar Thakur

ninza7.me

More from Medium

Create You First Firebase Project in React and implement Google Sign-In Method

Let’s Create a Web Application Using React JS in 20 Minutes. No Need for a 10 Hour Video — Part 1

Implementing Online Payment with Stripe and React

Creating A Live Broadcast Web and Mobile App