Configure AdMob for React Native / Expo

Monetizing your React Native or Expo app with AdMob is a great way to generate revenue by displaying ads. This guide will walk you through the steps to integrate AdMob into your React Native/Expo project.

Prerequisites

1. Google AdMob Account: Sign up at AdMob.
2. React Native/Expo Project: Ensure your app is set up and running.
3. Expo Managed Workflow: If you're using Expo, ensure you're on the managed workflow (or eject if necessary).
4. Firebase Project: AdMob requires a Firebase project for configuration.

Step 1: Set Up AdMob and Firebase

1. Create an AdMob Account:
   • Go to AdMob and sign in with your Google account.
   • Add your app to AdMob (iOS and/or Android).
   • Note down the Ad Unit IDs for banner, interstitial, and rewarded ads.
2. Create a Firebase Project:
   • Go to the Firebase Console.
   • Create a new project and link it to your AdMob account.
   • Add your app to Firebase (iOS and/or Android) and download the google-services.json (Android) and GoogleService-Info.plist (iOS) files.

Step 2: Install Required Packages

For React Native and Expo, you’ll need to install the necessary packages to integrate AdMob.

For Expo Managed Workflow:

Install the expo-ads-admob package:

expo install expo-ads-admob

Configure app.json:

Add the AdMob configuration to your app.json file:

{
  "expo": {
    "plugins": [
      [
        "expo-ads-admob",
        {
          "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
      ]
    ]
  }
}

For Bare React Native Workflow:

Install the react-native-google-mobile-ads package:

npm install react-native-google-mobile-ads

Link the package:

npx react-native link react-native-google-mobile-ads

Add Firebase configuration:
Place the google-services.json (Android) and GoogleService-Info.plist (iOS) files in the appropriate directories.

Step 3: Initialize AdMob in Your App

For Expo Managed Workflow:

1. Import and initialize AdMob in your app:

import { AdMobBanner, AdMobInterstitial, AdMobRewarded } from 'expo-ads-admob';

// Set your Ad Unit IDs
const bannerAdUnitID = 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy';
const interstitialAdUnitID = 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy';
const rewardedAdUnitID = 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy';

// Initialize AdMob
AdMobInterstitial.setAdUnitID(interstitialAdUnitID);
AdMobRewarded.setAdUnitID(rewardedAdUnitID);

Display a Banner Ad:

<AdMobBanner
  bannerSize="smartBanner"
  adUnitID={bannerAdUnitID}
  servePersonalizedAds={true}
  onDidFailToReceiveAdWithError={(error) => console.log(error)}
/>

Show Interstitial Ad:

await AdMobInterstitial.requestAdAsync();
await AdMobInterstitial.showAdAsync();

Show Rewarded Ad:

await AdMobRewarded.requestAdAsync();
await AdMobRewarded.showAdAsync();

For Bare React Native Workflow:

Import and initialize AdMob:

import { MobileAds } from 'react-native-google-mobile-ads';

MobileAds()
  .initialize()
  .then(() => {
    console.log('AdMob initialized');
  });

Display a Banner Ad:

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const bannerAdUnitID = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxx/xxx';

<BannerAd
  unitId={bannerAdUnitID}
  size={BannerAdSize.FULL_BANNER}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
/>

Show Interstitial Ad:

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

const interstitialAdUnitID = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-yyy/yyy';
const interstitial = InterstitialAd.createForAdRequest(interstitialAdUnitID);

interstitial.load();
interstitial.show();

Show Rewarded Ad:

import { RewardedAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const rewardedAdUnitID = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-zzz/zzz';
const rewarded = RewardedAd.createForAdRequest(rewardedAdUnitID);

rewarded.load();
rewarded.show();

Step 4: Test Your Ads

• Use test Ad Unit IDs provided by AdMob to avoid invalid clicks during development.
• For example:
  • Banner: ca-app-pub-xxx/xxx
  • Interstitial: ca-app-pub-yyy/yyy
  • Rewarded: ca-app-pub-zzz/zzz

Step 5: Publish Your App

1. Build your app for production:
   • For Expo: expo build:android or expo build:ios.
   • For React Native: Follow the official build guides for Android and iOS.
2. Upload your app to the Google Play Store or Apple App Store.
3. Monitor your AdMob dashboard for ad performance and earnings.

Tips for Maximizing Revenue

1. Ad Placement: Place ads where they are visible but not intrusive.
2. Ad Formats: Use a mix of banner, interstitial, and rewarded ads.
3. User Experience: Avoid overloading your app with ads, as it can lead to poor user retention.
4. Targeting: Use personalized ads (with user consent) for higher engagement.

By following this guide, you can successfully integrate AdMob into your React Native/Expo app and start earning money from ads. Happy coding! ⚡️