Monetizing Your React Native App Using AdMob

Written by

jigneshmayani90@gmail.com

Post Date

October 17, 2025

comments

No Comments

Monetizing Your React Native App Using AdMob

Written by

Debasish S.

Post Date

Oct 17, 2025

589 Views

You’ve built your React Native app. It looks great, runs smoothly, and maybe even has a growing user base. But here’s the question every developer eventually faces — how do you turn those users into revenue?

One of the simplest and most reliable ways is through in-app ads, and Google AdMob makes that process surprisingly easy. Whether you’re building a casual game, a utility app, or a productivity tool, AdMob lets you integrate ads seamlessly while maintaining full control over user experience.

In this guide, we’ll go step-by-step through how to integrate AdMob with your React Native app, configure both Android and iOS, and share practical strategies to boost your ad revenue — without annoying your users or violating policies.

What is AdMob?

Google AdMob is a mobile advertising platform that allows app developers to earn revenue by displaying ads inside their apps. It supports multiple ad formats, each with its own purpose:

Banner Ads — Small ads displayed at the top or bottom of the screen.
Interstitial Ads — Full-screen ads shown at natural pauses or transitions.
Rewarded Ads — Users watch an ad in exchange for in-app rewards (like extra lives or coins).
App Open Ads — Ads shown when the app is launched, monetizing those app-open moments.

The key is choosing the right format for your app’s flow and user behavior.

Before We Begin

Make sure you have:

Once that’s ready, let’s dive in.

Step 1: Create Your AdMob App

1. Go to the Google AdMob dashboard.

2. Click Apps → Add App and select your platform (Android or iOS).

3. Copy your App ID — you’ll need it later when configuring the native projects.

Step 2: Install the AdMob Package

Run the following command inside your React Native project:

npm install react-native-google-mobile-ads
# or
yarn add react-native-google-mobile-ads

This library provides a clean React Native interface for AdMob’s SDKs.

Step 3: Configure Your Native Projects

Android

Add your AdMob App ID in AndroidManifest.xml:

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

iOS

In Info.plist, add:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>

Also include your App IDs in app.json:

{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

Step 4: Handle iOS App Tracking Transparency (ATT)

Apple requires apps to request user consent before serving personalized ads. Add this to your Info.plist:

<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>
  

Then, in your code:

import { >requestTrackingPermission } from 'react-native-tracking-transparency';
const status = awaitrequestTrackingPermission();
console.log('ATT status:', status);

Without ATT consent, only non-personalized ads will appear — and Apple may reject your app if this is missing.

Step 5: Use Test Ads During Development

Never use live ads during testing.

AdMob provides test ad unit IDs for all formats (Banner, Interstitial, Rewarded, and App Open).
Using real ads before launch can result in invalid clicks, warnings, or even account suspension.

Step 6: Add Ads to Your App

Once your setup works with test ads, it’s time to integrate live ad units and position them strategically.

1. Banner Ads

Perfect for consistent, low-impact monetization.

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

const bannerAdUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx';
export default function BannerExample() {
  return (
    <View style={{ alignItems: 'center', marginVertical: 10 }}>
      <BannerAd
        unitId={bannerAdUnitId}
        size={BannerAdSize.BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
}

Best Practice: Place banners away from buttons or text inputs to prevent accidental taps.

2. Interstitial Ads

Use these between natural breaks — not mid-action.

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

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

export default function useInterstitial() {
  useEffect(() => {
    const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {
      interstitial.show();
    });
    interstitial.load();
    return unsubscribe;
  }, []);
}

Tip: Show interstitials only after a user completes an action (like finishing a level or submitting a form).

3. Rewarded Ads

These reward users for voluntarily watching an ad — great for engagement and retention.

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

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

export default function useRewardedAd(onReward) {
  useEffect(() => {
    const rewardListener = rewarded.addAdEventListener(RewardedAdEventType.EARNED_REWARD, reward => {
      onReward(reward);
    });
    rewarded.load();
    return rewardListener;
  }, []);
}

Use Case: Offer users a “Watch Ad to Earn Reward” button for premium access or bonus features.

4. App Open Ads

Monetize app launches — but don’t block the main experience.

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

const appOpenAdUnitId = __DEV__ ? TestIds.APP_OPEN : 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx';
const appOpenAd = AppOpenAd.createForAdRequest(appOpenAdUnitId);

export default function useAppOpenAd() {
  useEffect(() => {
    const unsubscribe = appOpenAd.addAdEventListener(AdEventType.LOADED, () => {
      appOpenAd.show();
    });
    appOpenAd.load();
    return unsubscribe;
  }, []);
}
  

Important: Wait until your splash screen or intro finishes before showing App Open ads.

Step 7: Monetization Best Practices

Limit ad frequency — quality beats quantity.
Show interstitials only during natural breaks.
Keep rewarded ads optional and valuable.
Delay App Open ads slightly for better UX.
Always request ATT consent on iOS.
Monitor performance via the AdMob dashboard.
Use ad mediation to maximize fill rate and revenue.

Step 8: Follow Ad Placement Rules

Violating AdMob policies can tank your revenue — or your entire account. Here’s how to stay safe:

Don’t place banners near interactive buttons (like “Submit Order”).
Avoid interrupting user tasks with interstitials.
Delay App Open ads until after the splash screen.
Use rewarded ads strategically, not excessively.
Never test with live ads — always use test units.

A clean user experience doesn’t just keep you compliant — it keeps your users happy, and happy users engage more (which means more revenue anyway).

Step 9: Advanced Optimization

Once your ads are live, start refining your strategy:

Conclusion

Monetizing your React Native app with AdMob isn’t just about slapping in ads — it’s about doing it thoughtfully.

When you create a balance between profit and user satisfaction — the true mark of a sustainable app business.

Pro Tip: Happy users bring better engagement and, ultimately, better ad revenue. Prioritize their experience, and the profits will follow.

Monetizing Your React Native App Using AdMob

Monetizing Your React Native App Using AdMob

shares

What is AdMob?

Before We Begin

Step 1: Create Your AdMob App

Step 2: Install the AdMob Package

Step 3: Configure Your Native Projects

Android

iOS

Step 4: Handle iOS App Tracking Transparency (ATT)

Step 5: Use Test Ads During Development

Step 6: Add Ads to Your App

1. Banner Ads

2. Interstitial Ads

3. Rewarded Ads

4. App Open Ads

Step 7: Monetization Best Practices

Step 8: Follow Ad Placement Rules

Step 9: Advanced Optimization

Conclusion

Innovative Software Solutions for Every Industry

Got a project in mind? Let’s build something exceptional, just for you!

Services

Explore

Inquiry

Location

© 2025 Silversky Technology