Getting Started Using Admob to React Native Expo

Many modern-day apps contain ads in them. The ads may pop out if you want to use certain features in the app. Mainly in video game apps, you may need to watch an ad before reaching another level. Ads have been a popular way to monetize the app and make some profit out of it. Some sophisticated apps also provide a payment option to remove the ads from the interface. Here, we are going to incorporate the same logic but in a slightly different way.
In this tutorial, we are going to implement Admob in the React Native application. We are going to implement an interface to show the ads as well as an option to remove ads as well.
In most cases, the users will have to pay to remove the ads. But we are going to make users watch video ads to hide the ads from the interface for a certain amount of time. In order to this, we are going to make use of the expo Admob package that provides the ad reward feature.
Requirement
- Starter React Native project. (Check out the previous tutorial for a detailed guide on how to build the starter project).
- Android Emulator or Real Device
- Admob account
- Node.js
- VSCode or other text editor IDEs.
- Yarn
- Git SCM
let's get started!
STEP 1: Fetching Admob app ID
To incorporate the AdMob in the React Native app, first, we need to get the App ID for it. For that, we need to create an Admob account (if we have not done so yet) then go to the AdMob app dashboard as shown in the screenshot below:
From the dashboard, we need to create a new app. For that, we need to go to create a new Admob app console and select the required options as directed in the screenshot below:
After clicking on 'Continue', we need to fill the App name and subsequently click on the 'ADD APP' button as shown in the screenshot below:
Next, we need to add the Ad Unit as directed in the screenshot below:
The Admob console generally provides 5 types of ads to be integrated. For this tutorial, we are going to focus on banner ads and reward ads. The ad types to be selected are shown in the screenshot below:
First, we are going to create a Banner ad as directed in the screenshot below:
Here, we have named our Ad unit name as 'header ads'. Now after clicking on 'CREATE AD UNIT', we will receive an Ad Unit ID as shown in the screenshot below:
Now, we will be able to get the Ad Unit ID from the dashboard as well:
Next, we are going to repeat the same process and create a Reward Ad. We can customize the Ad Unit name and Amount as directed in the screenshot below:
After clicking on 'CREATE AD UNIT', we will get the Ad Unit ID for the Reward Ads as well. Now, we will be able to see two Ad units in our console:
STEP 2: Setup Admob on Expo
To set up Admob on Expo, we will need to export the previous project from the Expo snack. Due to the fact that we are not authorized to access the app.json
to use in environment variables. Therefore, we need to export the entire expo project as directed in the screenshot below:
After exporting to the local system, we need to install all the required packages as mentioned in the requirement section above. First, we are going to install Expo CLI. We need to open the terminal in the project directory and run the following command:
yarn ; yarn global add expo-cli
Now that our expo-cli is installed, we need to start setting up Admod. For that, we need to open the app.json
file and add the Admob App ID to the config
section as shown in the code snippet below:
{
"expo": {
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"config": {
"googleMobileAdsAppId":"ca-app-pub-2547344479047582~7785850471"
}
},
},
Now, it is time to install the expo Admob package i.e. expo-ads-admob. For that, we need to run the following command in our project terminal:
expo install expo-ads-admob
After everything is installed, we can go ahead and run the app using the following command in the project terminal:
expo start
After this, we need to choose the required emulator, that is, Android to run the project on. Then on a successful build, we will get the app running in our emulator as shown in the screenshot below:
STEP 3: Using Admob Banner
Now, we are going to use the Banner Ad that we created before in Admob Account in our Home Screen. For that, we need to import the AdMobBanner
component in the Home.js file as directed in the code snippet below:
import {
AdMobBanner,
setTestDeviceIDAsync
} from "expo-ads-admob";
AdMobBanner
: The component that delivers the Banner Ad to the interface.setTestDeviceIDAsync
: This module enables us to display ads in the test environment.
First, we are going to call the setTestDeviceIDAsync
inside the useEffect
hook so that it triggers every time the app loads. The coding implementation is provided in the code snippet below:
const Home = () => {
React.useEffect(() => {
setTestDeviceIDAsync("EMULATOR");
}, []);
}
Next, we need to add the Banner ad to the view. For that, we are going to use the AdMobBanner
component with props configured. It will be wrapped inside the Card
component with styles as shown in the code snippet below:
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: "90%",
borderRadius: 5,
alignSelf: "center",
alignContent: "center",
alignItems: "center",
marginTop: 10,
marginBottom: 10,
}}
>
<AdMobBanner
bannerSize="smartBanner"
adUnitID="<-- Your Banner Ad Unit ID Here -->"
servePersonalizedAds // true or false
onDidFailToReceiveAdWithError={(e) => console.log(e)}
/>
</Card>
We can do a similar thing and add the Banner ad to the Setting screen as well.
The resulting Banner ad on both the screens is demonstrated in the screenshot below:
As we can notice, we have rendered out the Banner ad at the top of the Home and Setting Screen. Now, we can move on to the Reward Ads.
STEP 4: Using Admob reward ads
The Admob reward ad is a video ad that forces users to watch a video to a certain length to obtain certain rewards. We can use it in multiple scenarios such as receiving game points, upgrading levels, etc.
We are going to integrate this Reward Ad into the Setting screen. For this, we need to import the AdMobRewarded
component from the expo-ads-admob package as shown in the code snippet below:
import {
AdMobBanner,
AdMobRewarded,
setTestDeviceIDAsync,
} from "expo-ads-admob";
Next, we need to create a new function to handle the Reward Ads. In the function, we need to set the Ad Unit ID, request, and show ads asynchronously. The overall configuration of the function is provided in the code snippet below:
const initRewardAds = async () => {
// Display a rewarded ad
await AdMobRewarded.setAdUnitID("<-- Your Reward Ad Unit ID Here -->");
await AdMobRewarded.requestAdAsync();
await AdMobRewarded.showAdAsync();
};
Now, we need to add a new setting screen option to remove ads. It's going to be a List
element item with a bullhorn icon. The template for it is provided in the code snippet below:
<TouchableOpacity>
<List.Item
title="Remove Ads"
left={() => <List.Icon icon="bullhorn" />}
/>
</TouchableOpacity>
We will get the Remove Ads list option as shown in the demo screenshot below:
Next, we are going to create a Modal
component. It will be used to ask for the consent of the users to watch the video ads. For that, we need to import the required components as shown in the code snippet below:
import {
View,
TouchableOpacity,
Text,
Modal,
StyleSheet,
Alert,
} from "react-native";
import {
Card,
Title,
Paragraph,
Headline,
} from "react-native-paper";
First, we need to define a state using the useState
hook to control the visibility of the Modal
component as directed in the code snippet below:
export default ({ navigation }) => {
const [modalVisible, setModalVisible] = useState(false);
/// other code
Next, we need to add a Modal
component with a body template. In the Modal
body, we are going to add a button to trigger the Reward Ads as well. The Modal component with its prop configuration along with body template is provided in the code snippet below:
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Title style={styles.modalText}>
Watch Video Ads for remove ads
</Title>
<TouchableOpacity style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
initRewardAds();
}}
>
<Text style={styles.textStyle}>Watch Ads</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
setModalVisible(false);
}}
>
<Text style={styles.textStyle}>Nope</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
The required styles mentioned in the code snippet above is provided in the code snippet below:
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 5,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
openButton: {
backgroundColor: "#F194FF",
borderRadius: 20,
padding: 10,
marginTop:10,
elevation: 2,
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center",
},
modalText: {
marginBottom: 15,
textAlign: "center",
},
});
You may find it difficult to implement a Modal in React Native. If that is the case, you can check out the official React Native documentation.
Lastly, we need to call the Modal trigger function to the Remove ads list option as directed in the code snippet below:
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
>
<List.Item
title="Remove Ads"
left={() => <List.Icon icon="bullhorn" />}
/>
</TouchableOpacity>
If we click on the Remove Ads option, we will get the Modal with two options: Watch Video or Exit.
If we choose to watch the video ad then the video ad will play in the app as shown in the demo below:
Now that we have the video ads playing on the screen, we need to add a function called initRewardAds
to handle the Reward ad event. Inside the function, we are going to trigger two events.
First, if the user views the video ad for 5 seconds, we will trigger rewardedVideoDidRewardUser
event and close all ads.
The second event triggers the rewardedVideoDidClose
event and hide the modal itself.
The overall coding implementation of this function is provided in the code snippet below:
const initRewardAds = async () => {
// Display a rewarded ad
await AdMobRewarded.setAdUnitID("<-- Your Reward Ad Unit ID Here -->"); // Test ID, Replace with your-admob-unit-id
await AdMobRewarded.requestAdAsync();
AdMobRewarded.addEventListener("rewardedVideoDidRewardUser", () => {
// trigger function for hide ads
});
AdMobRewarded.addEventListener("rewardedVideoDidClose", () => {
// if we close ads modal will close too
setModalVisible(false);
});
await AdMobRewarded.showAdAsync();
};
STEP 5: Control Ads status across an app with Redux
To control the visibility of ads across every screen in the app, we are going to use the Redux mechanism. It is similar to the previous tutorial where we control the dark theme mode changes using Redux.
First, we need to define some constants in the constant.js file for a new ad status as directed in the code snippet below:
export const DARK_THEME = "DARK_THEME";
export const LIGHT_THEME = "LIGHT_THEME";
export const AD_ON = "AD_ON";
export const AD_OFF = "AD_OFF";
Next, we need to create a new reducer file named admob.reducer.js and add the code to toggle the ad status as shown in the code snippet below:
import { AD_OFF, AD_ON } from "../constant";
const initialState = {
ad_status: true,
};
export default (ad_status = initialState, { type }) => {
switch (type) {
case AD_ON:
return { ad_status: true };
case AD_OFF:
return { ad_status: false };
default:
return ad_status;
}
};
Now, we need to register the new reducer to the root reducer inside the combineReducers
module as shown in the code snippet below:
import { combineReducers } from "redux";
import themeReducer from "./theme.reducer";
import admobReducer from "./admob.reducer";
export default combineReducers({
themeReducer,
admobReducer,
});
Now, to trigger the reducer states, we need to create an action file named admob.action.js. Then add the action function to trigger the toggling of the ad status.
The required action implementation is provided in the code snippet below:
import { AD_OFF, AD_ON } from "../constant";
export const ToggleAdOn = () => ({
type: AD_ON,
});
export const ToggleAdOff = () => ({
type: AD_OFF,
});
export const ToggleAds = (ads_state) => {
return async (dispatch) => {
if (ads_state === true) {
dispatch(ToggleAdOn());
} else {
dispatch(ToggleAdOff());
}
};
};
In order to use the reducer, we need to go to the Home.js file and import the useSelector
hook to access the reducer state easily:
import { useSelector } from "react-redux";
const Home = () => {
const admobReducer = useSelector((reduxStoreState) => state.admobReducer);
Next, we need to use the ad_status
state from the reducer to conditionally render the AdMobBanner
as directed in the code snippet below:
{admobReducer.ad_status && (
<Card>
<AdMobBanner
/// other code
/>
</Card>
)}
Now, we need to apply the same configuration to the Setting.js file as well. We need to import the action as well as useSelector
and useDispatch
hooks.
Then, initialize the hooks as shown in the code snippet below:
import * as admobActions from "../redux/actions/admob.action";
import { useDispatch, useSelector } from "react-redux";
export default ({ navigation }) => {
const [modalVisible, setModalVisible] = useState(false);
const dispatch = useDispatch();
const admobReducer = useSelector((reduxStoreState) => state.admobReducer);
/// other code
Then, we need to apply conditional rendering to the AdmobBanner
component just like in the home screen as we can see in the code snippet below:
{admobReducer.ad_status && (
<Card>
<AdMobBanner
/// other code
/>
</Card>
)}
Now we need to trigger the toggling of ads status from action. For that, we need to dispatch the ToggleAds
method. We can do that inside the callback of the rewardedVideoDidRewardUser
event as shown in the code snippet below:
AdMobRewarded.addEventListener("rewardedVideoDidRewardUser", () => {
dispatch(admobActions.ToggleAds(false));
});
The bottom line are ads that cannot be shipped until the video ads end. If we close the ad before the ad ends, we won't get the reward and the ads will still be shown.
The final result is demonstrated in the demo below:
We have successfully integrated the Admob Banner as well as the Admob Reward ad.
Conclusion
Monetizing an app using Admobs can be profitable in the long run as the app becomes popular. This tutorial demonstrated how to set up and configure Admob into a React Native app based on the Expo ecosystem.
The tutorial also shed light on creating the Admob account and fetching the Admob Unit ID.
This is essential when displaying Admob banners in a React Native app. Finally, the major learning point was how to control the visibility of ads using the Redux mechanism.
The overall code for this tutorial is available on GitHub.
Peer Review Contributions by: Mohan Raj
