Adding Admob to Expo project step by step

In this simple tutorial, I want to show you how to add Admob Page Banner, Admob Interstitial Banner, Admob Reward Banner to your React Native project with Expo.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, React Native, Expo, installed Expo XDE on your machine, account in Expo ecosystem, installed Expo Client on your phone (optional), Admob.
All the following was done with the next requirements: Node v6.9.5, Exp v49.2.2, Expo XDE v.22.1, Expo Mobile Client v2.3.0.1012011

1. Create a new Expo project

Let’s create a simple Expo project using the following command:

You will be asked about template type for an app. Choose blank type.

Go to your newly created project:

Let’s run this project using the next command:

You will see something like this in terminal:

Next, you can run this starter application on your phone using Expo Client App. After scanning QR, waiting a few minutes you will see something like this on your phone:

Expo Starter App Screen

2. Integrate Admob

By default, Expo already includes the Admob library, so we don’t need to run any additional commands to install it. Let’s setup Admob in the App.js file:

3. Configure a banner

This is the most classic type of advertisements in the mobile app. To show the banner at the bottom of page, we need to add AdmobBanner component with some styles into App component. We will add a new property – bottomBanner to App StyleSheet.

Our App.js should look like this:

When you finished changes in App.js using your code editor, Expo should reload your app in Expo Mobile Client. Here’s what it should look like:

4. Configure an interstitial banner

The interstitial banner is not a component, so we need to call it programmatically. For example, let’s add a simple button. If you press this button – it will call showInterstitial method.
P.s. Don’t forget to import Button from react-native package in App.js.

App.js should look like this:

Here’s what happened:

Interstitial Button
Interstitial Button

After “Interstitial” button pressed:

Interstitial Banner
Interstitial Banner

If you noticed, we added event listeners for this type of banner, so we can check when the user opened ad, closed ad, when ad not loaded, etc.

5. Configure a reward banner

If you want to show rewarded ad – it’s almost the same as to show interstitial ad. First of all, let’s determine that our rewarded ad will use test Admob ID Banner (Always test with test ads) and register new event listeners for this type of banner.  Our componentDidMount and componentWillUnmount methods will look like this:

We will add a new button – “Rewarded” (with some simple styles) and when user press this button, we will call new showRewarded method. The final version of App.js should look like this:

When you press “Rewarded” button it can take a few seconds to load rewarded ad:

Rewarded Button

You can see a different rewarded videos:

First type of rewarded video
First type of rewarded video
Second type of rewarded ad
Second type of rewarded ad


Hope this example will help you to monetize your next React Native app with Expo. As you saw, it’s not hard to add a classic banner and interstitial/rewarded ads. But do not overdo with the ads in your apps. You can find the final code of this tutorial here.
P.s. don’t forget to handle all errors in your app 🙂

If you have any questions, advice, feel free to leave them in the comments!

If you liked this, please help spread the word by hitting the recommend button below. Thanks!