Integrating Ads in React Native: AdMob and Alternatives

1. Ad formats and why architecture matters

Ads can be integrated into a React Native app through four basic formats, each serving a different usage scenario. Banner ads permanently occupy a small area of the screen and deliver low but consistent revenue. Interstitial ads appear full-screen at natural transition points, for instance between two levels of a game or after completing a task. Rewarded video ads offer users a reward in exchange for voluntarily watching a video, while native ads visually blend into an existing content feed.

Deciding exactly where integrating ads happens within the app architecture directly affects both revenue and user retention. Overly aggressive interstitial placement drives users out of the app, while overly cautious placement leaves revenue potential on the table. The technical foundation for all these formats in React Native is AdMob through the official Google package react-native-google-mobile-ads, which bundles native SDKs for iOS and Android behind a shared JavaScript API.

An often underestimated aspect is that ad SDKs reach deeply into native platform APIs, especially tracking and identifier mechanisms. Integrating AdMob without considering consent flows and tracking permissions from the start risks app store rejections and legal issues once the app goes live. The following sections therefore cover not just the implementation of the ad formats themselves, but also the accompanying consent and mediation infrastructure.

2. Setting up an AdMob account and ad units

Before anything happens in code, an app needs to be registered in the AdMob dashboard and a dedicated ad unit created for each desired ad format. Every ad unit gets a unique ID that is later referenced in the React Native code, separately for iOS and Android, since both platforms require their own app IDs and ad unit IDs. It's recommended to create separate ad units for banner, interstitial and rewarded even if they belong to the same content area, because AdMob then delivers granular performance data per placement.

During development, only Google's provided test ad unit IDs should be used, never real production IDs. Showing real ads during local development violates AdMob policies and can, in the worst case, lead to a suspension of the entire publisher account, because Google can flag invalid traffic such as repeated developer clicks as attempted fraud.

3. Installing and configuring react-native-google-mobile-ads

Installation happens via npm or yarn, followed by configuration in app.json for Expo projects or direct native configuration for bare React Native. On iOS, the SKAdNetwork entry additionally needs to be added to Info.plist so ad networks can perform cross-platform attribution without individual user identification. On Android, the app ID is stored in AndroidManifest.xml as a meta-data entry.

In Expo projects, the config plugin from react-native-google-mobile-ads handles these native adjustments automatically during the prebuild step, avoiding manual errors in Info.plist and AndroidManifest.xml. It's important that the app IDs from the AdMob dashboard are copied exactly into the plugin configuration, since an incorrect app ID results in no ads loading at all, without the error message always making this clearly identifiable.

# Install the AdMob SDK wrapper for React Native
npm install react-native-google-mobile-ads

# Expo: run prebuild after adding the config plugin to app.json
npx expo prebuild --clean

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY",
          "iosAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~ZZZZZZZZZZ",
          "userTrackingUsageDescription": "This identifier will be used to deliver personalized ads."
        }
      ]
    ]
  }
}

4. Implementing banner ads

Banner ads are integrated through the BannerAd component, which can take a fixed or adaptive size. Adaptive banners automatically adjust to screen width and typically deliver a better fill rate than rigid standard sizes, because more advertisers can bid on the dynamically computed format. A banner should never be placed so that it covers interactive UI elements of the actual app or provokes accidental clicks, since AdMob can flag such placements as a policy violation.

A common mistake is remounting the banner component on every re-render of the parent component, causing unnecessary ad requests and a worse user experience. The banner component should therefore live in a stable position within the component tree, ideally outside lists with frequent re-renders, and handle a fallback state via onAdFailedToLoad if no ad is available.

// BannerAdSlot.tsx - adaptive banner with graceful fallback
import { View } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB';

export function BannerAdSlot() {
  return (
    <View style={{ alignItems: 'center' }}>
      <BannerAd
        unitId={adUnitId}
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{ requestNonPersonalizedAdsOnly: false }}
        onAdFailedToLoad={(error) => console.warn('Banner failed to load', error)}
      />
    </View>
  );
}

5. Interstitial ads with frequency capping

Interstitial ads follow a clear lifecycle: load, wait until loaded, then show at a sensible transition point. The decisive difference from banner ads is that interstitials have to be preloaded, since the loading process itself takes noticeable time and showing one immediately without preloading usually fails. A clean pattern preloads the next ad as soon as the current one is closed, so no waiting time occurs at the next trigger point.

Frequency capping, meaning limiting how often a user sees an interstitial within a given time span, is critical both for user experience and for long-term eCPM values. If an interstitial is shown at every single navigation step, session length drops measurably, and advertisers subsequently rate the placement lower. A proven rule of thumb is to show interstitials no more often than every three to five user interactions, and never at the very first app launch.

// InterstitialAdManager.ts - preload and show with frequency capping
import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

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

let actionsSinceLastAd = 0;
const MIN_ACTIONS_BETWEEN_ADS = 4;

interstitial.addAdEventListener(AdEventType.LOADED, () => {
  console.log('Interstitial preloaded and ready');
});

interstitial.addAdEventListener(AdEventType.CLOSED, () => {
  actionsSinceLastAd = 0;
  interstitial.load(); // preload the next one immediately
});

interstitial.load();

export function maybeShowInterstitial() {
  actionsSinceLastAd += 1;
  if (actionsSinceLastAd >= MIN_ACTIONS_BETWEEN_ADS && interstitial.loaded) {
    interstitial.show();
  }
}

6. Rewarded video ads for reward flows

Rewarded ads differ fundamentally from the other two formats because the user voluntarily starts the ad, in exchange for a clearly communicated reward such as extra lives, temporary premium content, or virtual currency. This voluntary nature leads in practice to noticeably higher acceptance and better completion rates than forced interstitials, because users knowingly enter the exchange.

Technically, it's essential to grant the reward only after the EARNED_REWARD event, never at the start of the ad. A user who cancels the video early must not receive the reward, otherwise the incentive system becomes trivially exploitable. Equally important is a clearly visible, non-skippable countdown during the minimum viewing duration, so it's transparent to users when the reward is guaranteed.

// RewardedAdManager.ts - grant reward only after EARNED_REWARD event
import { RewardedAd, RewardedAdEventType, AdEventType, TestIds } from 'react-native-google-mobile-ads';

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

rewarded.addAdEventListener(RewardedAdEventType.EARNED_REWARD, (reward) => {
  grantUserReward(reward.amount, reward.type); // only here, never before this event
});

rewarded.addAdEventListener(AdEventType.CLOSED, () => {
  rewarded.load(); // preload the next rewarded ad
});

rewarded.load();

export function showRewardedAd() {
  if (rewarded.loaded) {
    rewarded.show();
  }
}

function grantUserReward(amount: number, type: string) {
  console.log(`Granting ${amount} ${type} to user`);
}

7. Mediation for higher fill rate and eCPM

AdMob alone doesn't always cover every request with a matching bid, especially in less lucrative countries or niche audiences. Mediation solves this by letting multiple ad networks compete for the same ad request simultaneously, either in the classic waterfall model, where networks are queried one after another in descending historical eCPM order, or in the more modern bidding model, where all networks bid in real time at once.

AdMob supports mediation directly in the dashboard and allows integrating networks like Meta Audience Network as additional bidding partners. Every additional mediation network, however, requires its own native SDK and thus adds app weight and additional consent requirements, so the number of integrated networks should be weighed against the marginal benefit of improved fill rate.

8. GDPR consent and App Tracking Transparency

For users from the European Economic Area, legally compliant consent before loading personalized ads is mandatory. Google's User Messaging Platform (UMP SDK) provides a ready-made consent dialog for this, which automatically detects whether the user comes from a region with applicable requirements, and only unlocks personalized ads after explicit consent. Without consent, AdMob still serves non-personalized ads, but with noticeably lower eCPM values.

On iOS, the App Tracking Transparency (ATT) prompt is additionally required, independent of GDPR consent, before the Identifier for Advertisers (IDFA) may be used for cross-platform tracking. Both consent mechanisms must be triggered in the correct order and before the first ad request, since a delayed or missing consent flow violates both app store policies and European data protection law.

// iOS reference: requesting App Tracking Transparency before ad requests
import AppTrackingTransparency

func requestTrackingAuthorization() {
    ATTrackingManager.requestTrackingAuthorization { status in
        switch status {
        case .authorized:
            print("Tracking authorized, personalized ads allowed")
        case .denied, .restricted, .notDetermined:
            print("Tracking denied, serve non-personalized ads only")
        @unknown default:
            break
        }
    }
}

9. Testing, pitfalls and a comparison to alternatives

The most common mistake in a first AdMob integration is showing ads before the app has delivered any meaningful user value yet, for instance an interstitial right at the very first app launch. That not only leads to poor store ratings, it can also be classified by AdMob itself as a policy violation. A second common mistake is invalid traffic from accidental self-clicks during testing with production ad unit IDs, which in the extreme case results in permanent account suspension.

Besides AdMob, AppLovin MAX and Unity Ads have established themselves as serious alternatives, especially for gaming apps with a high share of rewarded ads. The choice between providers depends heavily on the target audience, app genre and existing mediation strategy.

10. Summary

Integrating ads in React Native means, in practice, implementing three ad formats cleanly both technically and strategically: banner for steady baseline revenue, interstitials with strict frequency capping at transition points, and rewarded ads for voluntary, highly accepted interactions. AdMob through react-native-google-mobile-ads forms the technical foundation for this, complemented by mediation for higher fill rate and the mandatory consent infrastructure from UMP SDK and App Tracking Transparency.

Consistently following the order consent before ad request, and preload before show, avoids the most common pitfalls: store rejections, account suspensions from invalid traffic, and poor user retention from overly aggressive interstitial placement. AppLovin MAX and Unity Ads remain relevant alternatives, especially for gaming apps with a strong rewarded focus, while AdMob remains the solid starting point for most apps thanks to the broadest market coverage and lowest integration effort.

11. FAQ: Integrating Ads in React Native with AdMob