How To Implement AdMob In React Native With Firebase

A comprehensive guide to monetizing your React Native mobile applications using Google's AdMob platform integrated with Firebase for analytics and insights.

Monetization represents a critical consideration for mobile app developers seeking sustainable revenue streams. AdMob, Google's mobile advertising platform, provides a proven path to generating income from mobile applications. When combined with Firebase, developers gain access to powerful analytics tools that provide insights into user behavior and ad performance, creating a comprehensive monetization and analytics solution.

This guide covers the complete implementation process, from initial setup through production deployment, with practical code examples for each advertising format. Whether you're building your first React Native application or looking to add monetization to an existing project, the steps outlined here will help you integrate advertising effectively. For teams specializing in cross-platform mobile development, implementing AdMob properly is essential for sustainable app revenue.

Understanding AdMob and Ad Formats

AdMob, developed by Google, stands as one of the most widely adopted mobile advertising platforms globally. The platform enables app developers to monetize their applications through various advertising formats while benefiting from Google's extensive advertiser network. By combining AdMob with Firebase, developers unlock additional capabilities including user behavior analytics, conversion tracking, and unified project configuration that simplifies development across multiple Firebase services.

Firebase Integration Benefits

Integrating AdMob with Firebase provides detailed analytics about how users interact with ads, informing decisions about ad placement and frequency. The unified platform approach simplifies project configuration when building applications that leverage multiple Firebase services such as authentication, crash reporting, or cloud messaging alongside advertising.

Types of AdMob Ads

Each advertising format serves distinct purposes within a comprehensive monetization strategy. Understanding the characteristics of each format helps developers make informed decisions about implementation timing and placement.

Advertising Format Options

Banner Ads

Rectangle strips at top or bottom of device screen displaying text, images, or interactive content. Ideal for continuous visibility during extended user sessions with minimal screen real estate.

Interstitial Ads

Full-page advertisements appearing at natural transition points like between game levels or screen transitions. Support static images and video content for richer engagement.

Rewarded Ads

Full-screen advertisements offering users incentives like virtual currency or premium features in exchange for watching. Opt-in nature creates higher engagement rates.

Native Ads

Customizable format seamlessly integrated into application content. Adapts to visual design but requires additional development effort for cross-platform frameworks.

Setting Up Firebase and AdMob

Creating a Firebase project forms the foundation for integrating AdMob into a React Native application. The setup process involves configuring both Firebase and AdMob, with each platform providing specific configuration files that enable secure communication between your application and their respective services.

Navigate to console.firebase.google.com
Create a new project following the guided setup
Enable Google Analytics for user behavior insights (optional)
Add iOS application with your bundle identifier
Download GoogleService-Info.plist file
Add Android application with your package name
Download google-services.json file

Installing React Native Firebase AdMob

The installation process begins with adding the core React Native Firebase package followed by the AdMob module. According to the React Native Firebase documentation, this modular approach allows developers to include only the services their application requires, keeping bundle sizes optimized.

Installation Commands

1# Install core Firebase package2npm install @react-native-firebase/app3# or4yarn add @react-native-firebase/app5 6# Install AdMob module7npm install @react-native-firebase/admob8# or9yarn add @react-native-firebase/admob10 11# iOS: Navigate to ios directory and install pods12cd ios && pod install

iOS Configuration

iOS configuration requires importing Firebase in your AppDelegate and updating Info.plist with your AdMob App ID and SKAdNetwork settings. As documented in the Google AdMob iOS Quick Start, proper configuration of these files is essential for the advertising SDK to function correctly.

AppDelegate.m Configuration

1// Import Firebase at top of file2#import <Firebase.h>3 4// Configure in didFinishLaunchingWithOptions5- (BOOL)application:(UIApplication *)application6didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {7 if ([FIRApp defaultApp] == nil) {8 [FIRApp configure];9 }10 // ... rest of your code11}

Info.plist Updates

1<key>GADApplicationIdentifier</key>2<string>ca-app-pub-xxxxxxxx~xxxxxxxx</string>3<key>SKAdNetworkItems</key>4<array>5 <dict>6 <key>SKAdNetworkIdentifier</key>7 <string>cstr6suwn9.skadnetwork</string>8 </dict>9</array>

Android Configuration

Android configuration involves placing the google-services.json file in the correct directory and updating build.gradle files to apply the Google Services plugin. This integration enables Firebase services to recognize your application and route ad requests appropriately.

android/build.gradle

1buildscript {2 dependencies {3 classpath 'com.google.gms:google-services:4.4.0'4 }5}

android/app/build.gradle

1apply plugin: 'com.google.gms.google-services'2 3// Place google-services.json in android/app/ directory

Implementing Banner Ads

Banner ads represent the most common advertising format due to their simplicity and continuous monetization potential. The BannerAd component can be placed anywhere within your component hierarchy, providing flexible integration options for various screen layouts.

Import Dependencies

1import { TestIds, BannerAd, BannerAdSize } from '@react-native-firebase/admob';

BannerAd Component Usage

1<BannerAd2 unitId={TestIds.BANNER}3 size={BannerAdSize.SMART_BANNER}4 requestOptions={{5 requestNonPersonalizedAdsOnly: true,6 }}7 onAdLoaded={() => {8 console.log('Advert loaded');9 }}10 onAdFailedToLoad={(error) => {11 console.error('Advert failed to load: ', error);12 }}13/>

Placement Best Practices

Position banner ads at the bottom of content views to minimize interference with primary application content. Avoid placing banners within scrollable content areas where they might scroll out of view repeatedly. Test appearance across multiple device screen sizes to ensure consistent rendering.

Implementing Interstitial Ads

Interstitial ads require event-driven implementation through the InterstitialAd singleton. Unlike banner ads that remain visible, interstitial ads are event-driven and should appear at natural transition points within your application flow, such as after completing a level or between content sections.

Create Interstitial Ad

1import { InterstitialAd, TestIds } from '@react-native-firebase/admob';2 3const interstitial = InterstitialAd.createForAdRequest(4 TestIds.INTERSTITIAL,5 { requestNonPersonalizedAdsOnly: true }6);

Event Listeners

1interstitial.on('adLoaded', () => {2 console.log('Interstitial ad is ready');3});4 5interstitial.on('adFailedToLoad', (error) => {6 console.error('Interstitial failed to load: ', error);7});8 9interstitial.on('adClosed', () => {10 console.log('User closed the ad');11 interstitial.load(); // Preload next ad12});

Display Interstitial Ad

1const showInterstitial = () => {2 if (interstitial.loaded) {3 interstitial.show();4 } else {5 interstitial.load(); // Prepare for next trigger6 }7};

Implementing Rewarded Ads

Rewarded ads follow a similar pattern to interstitial ads but include reward handling functionality that enables users to earn incentives for completing the ad experience. This voluntary advertising model creates a positive user perception while generating revenue.

Create Rewarded Ad

1import { RewardedAd, TestIds } from '@react-native-firebase/admob';2 3const rewarded = RewardedAd.createForAdRequest(4 TestIds.REWARDED,5 { requestNonPersonalizedAdsOnly: true }6);

Reward Event Handler

1rewarded.on('rewarded', (reward) => {2 const { amount, type } = reward;3 grantUserReward(amount, type);4});5 6rewarded.on('adClosed', () => {7 rewarded.load(); // Load next rewarded ad8});

Common Reward Patterns

Virtual Currency

Grant in-app currency for purchases or upgrades

Premium Features

Unlock paid features temporarily or permanently

Game Resources

Provide extra lives, energy, or progression boosters

Bonus Content

Unlock exclusive levels, items, or cosmetic options

Best Practices and Testing

Following best practices ensures successful monetization while maintaining positive user experience and AdMob policy compliance. Proper implementation prevents common issues that could impact your application performance or result in account penalties. For comprehensive mobile app development guidance, explore our web development services that cover the full application lifecycle.

Critical: Use Test IDs During Development

Never use production ad unit IDs during development. Test IDs prevent invalid click violations and protect your AdMob account. Replace TestIds.BANNER, TestIds.INTERSTITIAL, and TestIds.REWARDED with production unit IDs only when deploying to app stores.

Implementation Checklist

Error Handling

Implement fallback behavior when ads fail to load through onAdFailedToLoad callbacks

Preloading Strategy

Load new ads immediately after ad closure to ensure availability for next use

Cross-Device Testing

Verify ad behavior on multiple iOS and Android devices with different screen sizes

Performance Monitoring

Monitor app performance metrics after implementing advertising features

Policy Compliance

Never click your own ads; use test IDs throughout development

User Experience

Place ads at natural break points to minimize disruption to user flow

Conclusion

Implementing AdMob in React Native with Firebase provides a powerful monetization pathway for mobile applications. The comprehensive integration enables developers to leverage multiple advertising formats while benefiting from Firebase's analytics and insights.

Success requires careful attention to implementation details, user experience considerations, and AdMob policy compliance. Each advertising format serves distinct purposes within a comprehensive monetization strategy, and understanding when and how to implement each format maximizes revenue potential while maintaining positive user experiences.

For teams building React Native applications, proper testing and configuration validation before production deployment prevents common issues that could impact application performance or AdMob account standing. Following these practices establishes a solid foundation for sustainable mobile application monetization.

Looking to build a complete mobile application with monetization features? Our mobile app development services can help you create cross-platform applications that leverage the full potential of React Native and Firebase integration. Additionally, our AI automation services can complement your monetization strategy with intelligent analytics and user insight tools.

Frequently Asked Questions

Sources

React Native Firebase - Official documentation for React Native Firebase packages and installation
Implement AdMob in React Native with Firebase - DEV Community - Implementation guide with code examples for Banner, Interstitial, and Rewarded ads
Google AdMob iOS Quick Start - Official SDK requirements and ad format documentation

Ready to Monetize Your React Native App?

Our team of React Native experts can help you implement AdMob and other monetization strategies effectively.