If you're developing an app using Expo and React Native and are looking to monetize it through ads, Google AdMob is one of the best solutions to consider. Integrating AdMob ads into your app allows you to generate revenue by displaying ads in a non-intrusive way.

In this article, we’ll walk you through the process of adding AdMob to your Expo React Native project, from setting up your AdMob account to displaying ads in your app.

What is AdMob?

AdMob is Google’s mobile advertising platform that allows developers to monetize their apps with a variety of ad formats, such as banner ads, interstitial ads, and rewarded video ads. By showing these ads, you can earn revenue based on ad impressions and user interactions.

Why Use AdMob in Your Expo React Native App?

Integrating AdMob into your app brings multiple benefits:

Monetization: Earn money through ads without changing the app's core functionality.

Google's Support: AdMob is a reliable and well-supported platform, offering a wide range of tools and analytics.

Multiple Ad Formats: You can choose from banner ads, interstitial ads, and video ads to suit your app's user experience.

Steps to Integrate AdMob with Expo React Native

Follow these steps to integrate AdMob ads into your Expo project:

1. Create an AdMob Account

Before you can start displaying ads, you need to create an AdMob account and set up ad units. Follow these steps:

• Go to the AdMob website and sign in with your Google account.

• Once logged in, create a new AdMob account by following the setup wizard.

• Add your app to AdMob by clicking Apps > Add App and following the prompts.

• Create ad units. You can create different types of ad units, such as:

  • Banner Ads: Typically shown at the top or bottom of the screen.

  • Interstitial Ads: Full-screen ads that show between content transitions.

  • Rewarded Ads: Ads where users are rewarded for watching a video or interacting with the ad.

Make sure to note down your Ad Unit IDs, as you’ll need them later.

2. Install Dependencies

Run the following command in your project directory:

npm install react-native-google-mobile-ads expo-build-properties expo-tracking-transparency

3. Add the Plugin in app.json

After installing the dependencies, you need to configure the plugin in the app.json file to ensure Expo knows about the native configuration required for react-native-google-mobile-ads.

Apple requires apps to display the App Tracking Transparency authorization request for accessing the IDFA (leaving the choice to the user, whether to use personalized or non-personalized ads). Within your projects configuration file, you have to provide a user tracking usage description

Here is how you can modify your app.json to include the Google Mobile Ads plugin:

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
          "skAdNetworkItems": [
            "cstr6suwn9.skadnetwork",
            "4fzdc2evr5.skadnetwork",
            "4pfyvq9l8r.skadnetwork",
            "2fnua5tdw4.skadnetwork",
            "ydx93a7ass.skadnetwork",
            "5a6flpkh64.skadnetwork",
            "p78axxw29g.skadnetwork",
            "v72qych5uu.skadnetwork",
            "ludvb6z3bs.skadnetwork",
            "cp8zw746q7.skadnetwork",
            "3sh42y64q3.skadnetwork",
            "c6k4g5qg8m.skadnetwork",
            "s39g8k73mm.skadnetwork",
            "3qy4746246.skadnetwork",
            "f38h382jlk.skadnetwork",
            "hs6bdukanm.skadnetwork",
            "v4nxqhlyqp.skadnetwork",
            "wzmmz9fp6w.skadnetwork",
            "yclnxrl5pm.skadnetwork",
            "t38b2kh725.skadnetwork",
            "7ug5zh24hu.skadnetwork",
            "gta9lk7p23.skadnetwork",
            "vutu7akeur.skadnetwork",
            "y5ghdn5j9k.skadnetwork",
            "n6fk4nfna4.skadnetwork",
            "v9wttpbfk9.skadnetwork",
            "n38lu8286q.skadnetwork",
            "47vhws6wlr.skadnetwork",
            "kbd757ywx3.skadnetwork",
            "9t245vhmpl.skadnetwork",
            "eh6m2bh4zr.skadnetwork",
            "a2p9lx4jpn.skadnetwork",
            "22mmun2rn5.skadnetwork",
            "4468km3ulz.skadnetwork",
            "2u9pt9hc89.skadnetwork",
            "8s468mfl3y.skadnetwork",
            "klf5c3l5u5.skadnetwork",
            "ppxm28t8ap.skadnetwork",
            "ecpz2srf59.skadnetwork",
            "uw77j35x4d.skadnetwork",
            "pwa73g5rt2.skadnetwork",
            "mlmmfzh3r3.skadnetwork",
            "578prtvx9j.skadnetwork",
            "4dzt52r2t5.skadnetwork",
            "e5fvkxwrpn.skadnetwork",
            "8c4e2ghe7u.skadnetwork",
            "zq492l623r.skadnetwork",
            "3rd42ekr43.skadnetwork",
            "3qcr597p9d.skadnetwork"
          ],
          "userTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
        }
      ],
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ],
    ]
  }
}

Under the "App settings" menu item , you can find the "App ID". The app IDs for Android and iOS need to be inserted into your apps native code

Adding SKAdNetworkItems is crucial for ensuring that your app complies with Apple's privacy requirements and that ad networks can accurately attribute conversions.

4. Rebuild Your App

After modifying app.json, make sure to rebuild your app so that the new configurations take effect.

If you're using Expo without EAS, run the following commands:

# For iOS
npx expo prebuild
npx expo run:ios

# For Android
npx expo prebuild
npx expo run:android

After running npx expo prebuild, it will generate the native iOS and Android configurations for the AdMob settings. Check your Info.plist and AndroidManifest.xml to ensure the configurations are correct.

Requesting App Tracking Transparency authorization

To request the App Tracking Transparency authorization we recommend using a library or making it part of the UMP consent flow European User Consent page.

import {
  getTrackingPermissionsAsync,
  PermissionStatus,
  requestTrackingPermissionsAsync,
} from "expo-tracking-transparency";

const { status } = await getTrackingPermissionsAsync();
if (status === PermissionStatus.UNDETERMINED) {
  await requestTrackingPermissionsAsync();
}

const adapterStatuses = await mobileAds().initialize();

// Now ads can be loaded.

Before loading ads, have your app initialize the Google Mobile Ads SDK by calling initialize which initializes the SDK and returns a promise once initialization is complete (or after a 30-second timeout). This needs to be done only once, ideally at app launch.

5. Test ads

Whilst developing your app with AdMob, you'll want to make sure you use test ads rather than production ads from your Google AdMob account - otherwise your account may be disabled!

import { AppOpenAd, InterstitialAd, RewardedAd, BannerAd, TestIds } from 'react-native-google-mobile-ads';

# App Open
AppOpenAd.createForAdRequest(TestIds.APP_OPEN);

# Interstitial
InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);

# Rewarded
RewardedAd.createForAdRequest(TestIds.REWARDED);

# Banners
<BannerAd unitId={TestIds.BANNER} />

6. Configure AdMob in Your App

Banners

Create an AdUnits.ts file to centralize and manage Ad Unit IDs for both Android and iOS.

import { Platform } from "react-native";

export const AdUnits = {
  home: Platform.select({
    ios: "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx",
    android: "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx",
  }),
};

Create an AdsBanner.tsx component to manage banner ads.

import { AdUnits } from "path/to/AdUnits";
import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { BannerAd, TestIds } from "react-native-google-mobile-ads";

type AdsBannerProps = {
  adUnit: string;
};

const AdsBanner = ({ adUnit }: AdsBannerProps) => {
  const [failed, setFailed] = useState(false);

  return (adUnit || __DEV__) && !failed ? (
    <View style={styles.container}>
      <BannerAd
        size="BANNER"
        onAdFailedToLoad={() => setFailed(true)}
        unitId={__DEV__ ? TestIds.BANNER : AdUnits?.[adUnit]}
      />
    </View>
  ) : null;
};

export default AdsBanner;

const styles = StyleSheet.create({
  container: {
    paddingVertical: 16,
    justifyContent: "center",
    alignItems: "center",
  },
});

During development, the app will display test ads, and if an ad fails to load, the ad view will be hidden.

Next, position it in the location where you want to display the banner ads.

import AdsBanner from "path/to/AdsBanner";

<AdsBanner adUnit="home" paddingBottom={0} />;

Conclusion

Integrating AdMob into your Expo React Native project is a great way to monetize your app while maintaining a good user experience. By following the steps above, you can easily add banner, interstitial, and rewarded ads to your app and start generating revenue.

Remember to test your ads thoroughly, monitor performance via the AdMob dashboard, and ensure that you're complying with Google’s policies. With these steps, you can effectively leverage AdMob to support the growth of your app.