Monetize Your React Native & Expo Apps With Google Admob

Banner Ads, Interstitial Ads, Reward Ads, and More… for Android & iOS applications

4 min readDec 6, 2022

Hey..!! My name is Rohit. Well, I am not a professional content writer. But I will ensure that at the end of this article, you can monetize yours react native & expo application with a banner ad, interstitial ad, or reward ad.

I recommend that you watch the step-by-step tutorial here:

Project setup, Package Requirements, and Code

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Start your expo project
If you visit the official documentation of Expo Admob, you will see that they clearly state that the Expo package for AdMob is deprecated for Expo SDK version 46 and above. Therefore, I am going to use the React Native Google Mobile Ads package.
Install the AdMob package

# Install the admob module
npm install react-native-google-mobile-ads

If you are an iOS user, you have to add this plugin to your app.json file. However, I am testing AdMob on an Android device, so I don’t need that.

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

Setup your Google Admob account
We will use the Ad Unit Id from the Ad settings.
Now, If you are an expo user then you have to add the following line of react-native-google-mobile-ads block

// <project-root>/app.json
{
  "expo": {
    // ...
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

Replace the default Android and iOS app ids with the real Google AdMob Ad unit.
In this instance, I am using native code in an Expo application. However, Expo Go does not support native code, so you will not be able to test this application on Expo Go. Don’t worry, though — Expo has a solution. You can use either the Prebuild or Development build method to test apps that use native code. The Prebuild method uses Android Studio or Xcode, depending on which operating system you are using. That’s why I prefer to work with the Development build method.
Build your expo app using the Development build method. You can refer to this video for step by step guide.
Sometimes the Development build fails due to the internal server issue. You just have to retry the command

Banner Ad

Add the Banner component in the return section of the Add section of your code.

return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.FULL_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />
  );

Interstitial Ads

import React, { useEffect, useState } from 'react';
import { Button } from 'react-native';
import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  requestNonPersonalizedAdsOnly: true,
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {
      setLoaded(true);
    });

    // Start loading the interstitial straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return unsubscribe;
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Interstitial"
      onPress={() => {
        interstitial.show();
      }}
    />
  );
}

Rewards Ad

import React, { useEffect, useState } from 'react';
import { Button } from 'react-native';
import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewarded = RewardedAd.createForAdRequest(adUnitId, {
  requestNonPersonalizedAdsOnly: true,
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {
      setLoaded(true);
    });
    const unsubscribeEarned = rewarded.addAdEventListener(
      RewardedAdEventType.EARNED_REWARD,
      reward => {
        console.log('User earned reward of ', reward);
      },
    );

    // Start loading the rewarded ad straight away
    rewarded.load();

    // Unsubscribe from events on unmount
    return () => {
      unsubscribeLoaded();
      unsubscribeEarned();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Rewarded Ad"
      onPress={() => {
        rewarded.show();
      }}
    />
  );
}

If you are confused or lost, I would recommend watching a step-by-step video tutorial. Few minutes of setup and you will be ready to test the application.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.