To deliver ads and earn revenue, integrate Google Mobile Ads SDK for React Native into your React Native app. This guide covers installing and initializing Google Mobile Ads SDK for React Native, and selecting an ad format. > [!IMPORTANT] > **Important:** Google Mobile Ads SDK for React Native only supports Android and iOS, and doesn't support web and desktop platforms. ## Prerequisites Before you continue, get the following: - [React Native](https://reactnative.dev) 0.85.0 or later. - An [AdMob account](https://admob.google.com) and an app ID. To get an app ID, see [Set up an app in AdMob](https://support.google.com/admob/answer/2773509). - The following Android items: - Android API level 24 or later. - The latest version of Android Studio. - Android Gradle Plugin (AGP) version 8.0 or later. - The following iOS items: - iOS version 13.0 or later. - Xcode version 16.0 or later and command-line tools enabled. - [CocoaPods](https://cocoapods.org) ## Install Google Mobile Ads SDK for React Native To install Google Mobile Ads SDK for React Native, do the following: 1. Download the [`gma-sdk-react-native` folder](https://drive.google.com/corp/drive/folders/1s5j2kx0yyYxLsdLNyBrhNJvkzmaUgOwD) from Google Drive. 2. Extract the zip archive in a separate directory outside of your working project directory. This process might avoid conflicts with your project's configuration files. 3. In your project root, create a `local_packages/` directory. 4. In this directory, copy the `mobile-ads-0.1.0.tgz` file: ```bash mkdir -p local_packages cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/ ``` Replace EXTRACT_DIR with the path to the directory where you extracted the archive. 5. Install the package with your preferred package manager: ### npm ```bash npm install ./local_packages/mobile-ads-0.1.0.tgz ``` ### yarn ```bash yarn add ./local_packages/mobile-ads-0.1.0.tgz ``` ## Configure your app To configure your app with platform dependencies, add your AdMob app IDs to your project root's `app.json` file. For testing, use the sample AdMob app IDs shown in the following example: ```json { "name": "APP_NAME", "displayName": "APP_NAME", "googleMobileAds": { "android_app_id": "ca-app-pub-3940256099942544~3347511713", "ios_app_id": "ca-app-pub-3940256099942544~1458002511" } } ``` During build time, Google Mobile Ads SDK for React Native adds the `android_app_id` property into the `AndroidManifest.xml` file and the `ios_app_id` property in your built `Info.plist` file as the `GADApplicationIdentifier` key. For platform-specific options or manual configuration, select one of the following platforms: ### Android If you manage multiple build configurations or are integrating React Native into an existing Android app, add your AdMob app ID in the `` element of your project's `AndroidManifest.xml` file instead of the `app.json` file: ```xml ``` Gradle automatically resolves Android dependencies during build time. ### iOS Complete the following steps: 1. Install CocoaPods dependencies from your project's `ios/` directory: ```bash pod install --repo-update ``` Alternatively, install CocoaPods dependencies from your project root directory: ```bash npx pod-install ``` CocoaPods autolinking configures the Xcode build phase script that adds the `ios_app_id` property from the `app.json` file in your built `Info.plist` file.
2. In your app's `Info.plist` file, add a `SKAdNetworkItems` key in the `` element for Google `cstr6suwn9.skadnetwork` and [select third-party buyers](https://developers.google.com/ad-manager/mobile-ads-sdk/ios/3p-skadnetworks.md.txt). The following example shows a complete `Info.plist` file that contains the required `SKAdNetworkItems` array: #### Complete example ``` SKAdNetworkItems SKAdNetworkIdentifier cstr6suwn9.skadnetwork SKAdNetworkIdentifier 4fzdc2evr5.skadnetwork SKAdNetworkIdentifier 2fnua5tdw4.skadnetwork SKAdNetworkIdentifier ydx93a7ass.skadnetwork SKAdNetworkIdentifier p78axxw29g.skadnetwork SKAdNetworkIdentifier v72qych5uu.skadnetwork SKAdNetworkIdentifier ludvb6z3bs.skadnetwork SKAdNetworkIdentifier cp8zw746q7.skadnetwork SKAdNetworkIdentifier 3sh42y64q3.skadnetwork SKAdNetworkIdentifier c6k4g5qg8m.skadnetwork SKAdNetworkIdentifier s39g8k73mm.skadnetwork SKAdNetworkIdentifier wg4vff78zm.skadnetwork SKAdNetworkIdentifier 3qy4746246.skadnetwork SKAdNetworkIdentifier f38h382jlk.skadnetwork SKAdNetworkIdentifier hs6bdukanm.skadnetwork SKAdNetworkIdentifier mlmmfzh3r3.skadnetwork SKAdNetworkIdentifier v4nxqhlyqp.skadnetwork SKAdNetworkIdentifier wzmmz9fp6w.skadnetwork SKAdNetworkIdentifier su67r6k2v3.skadnetwork SKAdNetworkIdentifier yclnxrl5pm.skadnetwork SKAdNetworkIdentifier t38b2kh725.skadnetwork SKAdNetworkIdentifier 7ug5zh24hu.skadnetwork SKAdNetworkIdentifier gta9lk7p23.skadnetwork SKAdNetworkIdentifier vutu7akeur.skadnetwork SKAdNetworkIdentifier y5ghdn5j9k.skadnetwork SKAdNetworkIdentifier v9wttpbfk9.skadnetwork SKAdNetworkIdentifier n38lu8286q.skadnetwork SKAdNetworkIdentifier 47vhws6wlr.skadnetwork SKAdNetworkIdentifier kbd757ywx3.skadnetwork SKAdNetworkIdentifier 9t245vhmpl.skadnetwork SKAdNetworkIdentifier a2p9lx4jpn.skadnetwork SKAdNetworkIdentifier 22mmun2rn5.skadnetwork SKAdNetworkIdentifier 44jx6755aq.skadnetwork SKAdNetworkIdentifier k674qkevps.skadnetwork SKAdNetworkIdentifier 4468km3ulz.skadnetwork SKAdNetworkIdentifier 2u9pt9hc89.skadnetwork SKAdNetworkIdentifier 8s468mfl3y.skadnetwork SKAdNetworkIdentifier klf5c3l5u5.skadnetwork SKAdNetworkIdentifier ppxm28t8ap.skadnetwork SKAdNetworkIdentifier kbmxgpxpgc.skadnetwork SKAdNetworkIdentifier uw77j35x4d.skadnetwork SKAdNetworkIdentifier 578prtvx9j.skadnetwork SKAdNetworkIdentifier 4dzt52r2t5.skadnetwork SKAdNetworkIdentifier tl55sbb4fm.skadnetwork SKAdNetworkIdentifier c3frkrj4fj.skadnetwork SKAdNetworkIdentifier e5fvkxwrpn.skadnetwork SKAdNetworkIdentifier 8c4e2ghe7u.skadnetwork SKAdNetworkIdentifier 3rd42ekr43.skadnetwork SKAdNetworkIdentifier 97r2b46745.skadnetwork SKAdNetworkIdentifier 3qcr597p9d.skadnetwork ``` > [!IMPORTANT] > **Key Point:** If you don't use the `app.json` file, you must also add a `GADApplicationIdentifier` key with a string value of your AdMob app ID to the `Info.plist` file. While testing, use sample app ID `ca-app-pub-3940256099942544~1458002511`. ## Initialize Google Mobile Ads SDK for React Native Before loading ads, call the [`initialize`](https://developers.google.com/admob/react-native/reference.md.txt#initialize) method to initialize Google Mobile Ads SDK for React Native. Call the `initialize` method once at app launch, such as in your root `App.tsx` component. The following example initializes Google Mobile Ads SDK for React Native: ```tsx import {InitializationStatus, initialize} from '@google/mobile-ads'; import {useEffect, useState} from 'react'; import {Text, View} from 'react-native'; /** * Root application component demonstrating Google Mobile Ads SDK initialization. */ export function App() { const [isInitialized, setIsInitialized] = useState(false); useEffect(() => { // Initialize the Google Mobile Ads SDK. initialize({}, (status: InitializationStatus) => { console.log('Mobile Ads SDK initialized successfully:', status); setIsInitialized(true); }); }, []); return ( {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'} ); } ``` ## Select an ad format After you initialize Google Mobile Ads SDK for React Native, you can implement ads. AdMob offers the following ad formats: | Format | Description | Documentation | |---|---|---| | App open | Appears when users open or switch back to your app, overlaying the loading or splash screen. | [Set up app open ads](https://developers.google.com/admob/react-native/app-open.md.txt) | | Interstitial | Full-screen ads that cover the interface of the host app. These ads appear at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. | [Set up interstitial ads](https://developers.google.com/admob/react-native/interstitial.md.txt) | | Rewarded | Full-screen ads that reward users for watching video ads or interacting with playable ads. | [Set up rewarded ads](https://developers.google.com/admob/react-native/rewarded.md.txt) | | Rewarded interstitial | An incentivized ad format that lets you offer rewards for ads that appear automatically during natural app transitions. | [Set up rewarded interstitial ads](https://developers.google.com/admob/react-native/rewarded-interstitial.md.txt) |