React Native Google Mobile Ads

https://docs.page/invertase/react-native-google-mobile-ads
Admin
React Native Google Mobile Ads is a library for integrating Google AdMob advertisements into React...
Tokens:17,785
Snippets:182
Trust Score:8.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install AdMob Module (Expo)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Install the admob module and config plugin using npx expo install for Expo projects.

```bash
# Install the admob module and config plugin
npx expo install react-native-google-mobile-ads

```

--------------------------------

### Install expo-build-properties Plugin

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Install the expo-build-properties plugin if you haven't already. This is a prerequisite for adding native dependencies for mediation adapters in Expo projects.

```bash
npx expo install expo-build-properties

```

--------------------------------

### Load and Display a Rewarded Ad with Event Listeners

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

This example demonstrates how to load a rewarded ad, listen for load and earned reward events, and display the ad when the user interacts with a button. It includes setting up event listeners and managing the ad's loaded state.

```javascript
import React, { useEffect, useState } from 'react';
import { Button } from 'react-native';
import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewarded = RewardedAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {
      setLoaded(true);
    });
    const unsubscribeEarned = rewarded.addAdEventListener(
      RewardedAdEventType.EARNED_REWARD,
      reward => {
        console.log('User earned reward of ', reward);
      },
    );

    // Start loading the rewarded ad straight away
    rewarded.load();

    // Unsubscribe from events on unmount
    return () => {
      unsubscribeLoaded();
      unsubscribeEarned();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Rewarded Ad"
      onPress={() => {
        rewarded.show();
      }}
    />
  );
}

```

--------------------------------

### Server Side Verification Callback Example

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

This log entry illustrates the format of a Server Side Verification callback from AdMob, showing the parameters that are sent to your specified callback URL.

```http
[14/Aug/2020 12:51:43] "GET /views/admob-ssv/?ad_network=...&ad_unit=...&custom_data=my-custom-data&reward_amount=1&reward_item=test_reward_item&timestamp=1597377102267&transaction_id=148cc85...&user_id=9999&signature=MEUCIQCQSi3cQ2PlxlEAkpN...&key_id=3335... HTTP/1.1" 200 0

```

--------------------------------

### Native Ad Request Options: Start Video Muted

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Controls the starting audio state for video ads. Set `startVideoMuted` to `false` to request un-muted audio. Defaults to muted.

```javascript
NativeAd.createForAdRequest(TestIds.NATIVE, {
  startVideoMuted: false,
});

```

--------------------------------

### Install AdMob Module (npm)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Install the admob module using npm for your React Native project.

```bash
# Install the admob module
npm install react-native-google-mobile-ads

```

--------------------------------

### Gather Consent and Initialize SDK

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Combines requesting consent information and loading/presenting a consent form if necessary. Initializes the Google Mobile Ads SDK if consent is granted and the SDK hasn't been started.

```javascript
import mobileAds, { AdsConsent, AdsConsentStatus } from 'react-native-google-mobile-ads';

const isMobileAdsStartCalledRef = useRef(false);

useEffect(() => {
  // Request consent information and load/present a consent form if necessary.
  AdsConsent.gatherConsent()
    .then(startGoogleMobileAdsSDK)
    .catch((error) => console.error('Consent gathering failed:', error));

  // This sample attempts to load ads using consent obtained in the previous session.
  // We intentionally use .then() chaining (instead of await) to ensure parallel execution.
  startGoogleMobileAdsSDK();
}, []);

async function startGoogleMobileAdsSDK() {
  const {canRequestAds} = await AdsConsent.getConsentInfo();
  if (!canRequestAds || isMobileAdsStartCalledRef.current) {
    return;
  }

  isMobileAdsStartCalledRef.current = true;

  // (Optional, iOS) Handle Apple's App Tracking Transparency manually.
  const gdprApplies = await AdsConsent.getGdprApplies();
  const hasConsentForPurposeOne = gdprApplies && (await AdsConsent.getPurposeConsents()).startsWith("1");
  if (!gdprApplies || hasConsentForPurposeOne) {
    // Request ATT...
  }

  // Initialize the Google Mobile Ads SDK.
  await mobileAds().initialize()

  // Request an ad...
}
```

--------------------------------

### Call Native Method (JavaScript)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Once you have the module object, you can call its methods as you would in JavaScript. This example calls the setHasUserConsent method.

```javascript
GoogleMobileAdsMediationAppLovin.setHasUserConsent(true)
```

--------------------------------

### Jest Configuration for Mocking Native Code

Source: https://docs.page/invertase/react-native-google-mobile-ads/testing

Add this Jest configuration to your project to mock the native code of the react-native-google-mobile-ads library. This setup file is provided by the library.

```javascript
{
  "setupFiles": [
    "./node_modules/react-native-google-mobile-ads/jest.setup.ts"
  ]
}
```

--------------------------------

### Configure Mediation Adapters in app.json for Expo

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Add mediation adapter dependencies to your app.json or app.config.js file using the expo-build-properties plugin. This example shows how to add the AppLovin mediation adapter for both Android and iOS.

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "dependencies": [
              // Example: Add the AppLovin mediation adapter for Android. Replace {X.Y.Z.A} with the specific adapter version you are integrating.
              "com.google.ads.mediation:applovin:{X.Y.Z.A}"
            ]
          },
          "ios": {
            "pods": [
              {
                // Example: Add the AppLovin mediation adapter for iOS.
                "name": "GoogleMobileAdsMediationAppLovin"
              }
            ]
          }
        }
      ]
    ]
  }
}

```

--------------------------------

### Create Implementation File (iOS)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Implement the native methods you want to expose to React Native. Ensure necessary third-party SDKs are imported. Use RCT_EXPORT_MODULE() to expose the class and RCT_EXPORT_METHOD() to expose methods.

```objective-c
#import "GoogleMobileAdsMediationAppLovin.h"
#import <Foundation/Foundation.h>
// Import the necessary third-party SDKs.
#import <AppLovinSDK/AppLovinSDK.h>

@implementation GoogleMobileAdsMediationAppLovin

// The React layer interfaces with the class name, e.g. GoogleMobileAdsMediationAppLovin, by default. 
RCT_EXPORT_MODULE();

// This exports the method to the React layer.
RCT_EXPORT_METHOD(setHasUserConsent:(BOOL)hasUserConsent)
{
  [ALPrivacySettings setHasUserConsent:hasUserConsent];
}

@end
```

--------------------------------

### Configure iOS Static Frameworks (Expo)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Enable static frameworks for iOS using the expo-build-properties plugin by merging this configuration into your app.json.

```json
// <project-root>/app.json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

```

--------------------------------

### Create and Load App Open Ad

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Use this snippet to create and preload an App Open ad. It utilizes a test ID for development and a production ID for live applications. Ensure ads are preloaded to be ready when the app is opened.

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

const adUnitId = __DEV__ ? TestIds.APP_OPEN : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const appOpenAd = AppOpenAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

// Preload an app open ad
appOpenAd.load();

// Show the app open ad when user brings the app to the foreground.
appOpenAd.show();

```

--------------------------------

### Request Consent Information Update

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Use `AdsConsent.requestInfoUpdate()` to get the user's consent status. This promise-based method helps determine if the consent modal should be shown.

```javascript
import { AdsConsent } from 'react-native-google-mobile-ads';

const consentInfo = await AdsConsent.requestInfoUpdate();
```

--------------------------------

### Displaying a Native Ad Component

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

This snippet shows how to create and display a native ad component. It includes fetching ad data, rendering various ad assets like icon, headline, and media, and ensuring the ad attribution is visible. Use this for custom native ad layouts.

```javascript
const NativeComponent = () => {
  const [nativeAd, setNativeAd] = useState<NativeAd>();

  useEffect(() => {
    NativeAd.createForAdRequest(TestIds.NATIVE)
      .then(setNativeAd)
      .catch(console.error);
  }, []);

  if (!nativeAd) {
    return null;
  }

  return (
    // Wrap all the ad assets in the NativeAdView component, and register the view with the nativeAd prop
    <NativeAdView nativeAd={nativeAd}>
      // Display the icon asset with Image component, and use NativeAsset to register the view
      {nativeAd.icon && (
        <NativeAsset assetType={NativeAssetType.ICON}>
          <Image source={{uri: nativeAd.icon.url}} width={24} height={24} />
        </NativeAsset>
      )}
      // Display the headline asset with Text component, and use NativeAsset to register the view
      <NativeAsset assetType={NativeAssetType.HEADLINE}>
        <Text style={{fontSize: 18, fontWeight: 'bold'}}>
          {nativeAd.headline}
        </Text>
      </NativeAsset>
      // Always display an ad attribution to denote that the view is an advertisement
      <Text>Sponsored</Text>
      // Display the media asset
      <NativeMediaView />
      // Repeat the process for the other assets in the NativeAd.
    </NativeAdView>
  );
};

```

--------------------------------

### Delay App Measurement Initialization (app.json)

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Set `delay_app_measurement_init` to `true` in `app.json` to delay SDK initialization until the first ad request, crucial for EEA users.

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

--------------------------------

### App-ads.txt Configuration for Test Ads

Source: https://docs.page/invertase/react-native-google-mobile-ads/common-reasons-for-ads-not-showing

Include this line in your app-ads.txt file to enable ads using demo ad units. This is necessary for both iOS and Android platforms.

```text
google.com, pub-3940256099942544, DIRECT, f08c47fec0942fa0
```

--------------------------------

### Initialize Google Mobile Ads SDK

Source: https://docs.page/invertase/react-native-google-mobile-ads

Initialize the Google Mobile Ads SDK once, ideally at app launch. This promise resolves when initialization is complete or after a 30-second timeout. Ensure this is called before loading ads, especially if preloading or consent is required.

```javascript
import mobileAds from 'react-native-google-mobile-ads';

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    // Initialization complete!
  });

```

--------------------------------

### Create a Rewarded Ad Instance

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Instantiate a RewardedAd object using either a test ID or your production Ad Unit ID. You can also provide keywords for better ad targeting.

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

const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewarded = RewardedAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

```

--------------------------------

### Create Expo Module

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Use the 'create-expo-module' tool to scaffold a new native module in your Expo project. Run this command from your project's root directory.

```bash
npx create-expo-module --local
```

--------------------------------

### Initialize and Display NativeAdView

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Use NativeAdView as the root for a native ad. Pass the NativeAd object to the nativeAd prop to register the ad view. This component wraps other components that display ad assets.

```javascript
const NativeComponent = () => {
  const [nativeAd, setNativeAd] = useState<NativeAd>();

  useEffect(() => {
    NativeAd.createForAdRequest(TestIds.NATIVE)
      .then(setNativeAd)
      .catch(console.error);
  }, []);

  if (!nativeAd) {
    return null;
  }

  return (
    <NativeAdView nativeAd={nativeAd}>
      // Components to display assets must be placed here
    </NativeAdView>
  );
};

```

--------------------------------

### Build Native Code (Expo with EAS)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Create a new build for your Expo project with EAS, either for online or local builds, after configuring native code changes.

```bash
# For online builds
npx eas build --profile development

# For local builds
npx eas build --profile development --local

```

--------------------------------

### Configure Outbound Ad Requests

Source: https://docs.page/invertase/react-native-google-mobile-ads

Set global ad request configurations before initializing the SDK. This is useful for enforcing content ratings, child-directed treatment, and under-age consent settings for all ad requests.

```javascript
import mobileAds, { MaxAdContentRating } from 'react-native-google-mobile-ads';

mobileAds()
  .setRequestConfiguration({
    // Update all future requests suitable for parental guidance
    maxAdContentRating: MaxAdContentRating.PG,

    // Indicates that you want your content treated as child-directed for purposes of COPPA.
    tagForChildDirectedTreatment: true,

    // Indicates that you want the ad request to be handled in a
    // manner suitable for users under the age of consent.
    tagForUnderAgeOfConsent: true,

    // An array of test device IDs to allow.
    testDeviceIdentifiers: ['EMULATOR'],
  })
  .then(() => {
    // Request config successfully set!
  });

```

--------------------------------

### User Tracking Usage Description (app.json)

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Provide a `user_tracking_usage_description` in `app.json` to explain identifier usage for personalized ads.

```json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
  }
}
```

--------------------------------

### Delay App Measurement Initialization (Expo app.json)

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Configure `delayAppMeasurementInit` in the Expo `app.json` for delayed SDK initialization.

```json
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "delayAppMeasurementInit": true
        }
      ]
    ]
  }
}
```

--------------------------------

### Create an Interstitial Ad Instance

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Initializes an InterstitialAd instance using either a test ID for development or a production Ad Unit ID. Optional request options like keywords can be provided.

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

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

```

--------------------------------

### Rebuild Project (Bare React Native)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Rebuild your project after configuring app IDs for the changes to take effect. Use npx pod-install for iOS and npx react-native run-android for Android.

```bash
# For iOS
npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

```

--------------------------------

### Open Debug Menu

Source: https://docs.page/invertase/react-native-google-mobile-ads/ad-inspector

Opens the debug menu for ad testing. Requires an AD_UNIT_ID.

```javascript
await mobileAds().openDebugMenu(AD_UNIT_ID);
```

--------------------------------

### Incorrect NativeAsset Placement

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Demonstrates incorrect usage where asset views are wrapped in additional components, which can disrupt SDK functionality for click handling and recording.

```javascript
<NativeAsset assetType={NativeAssetType.CTA}>
  <TouchableOpacity style={{ padding: 8 }}>
    <Text>{nativeAd.cta}</Text>
  </TouchableOpacity>
</NativeAsset>
<NativeAsset assetType={NativeAssetType.ICON}>
  <View style={{ borderRadius: 8, overflow: 'hidden' }}>
    <Image source={{uri: nativeAd.icon.url}} width={24} height={24} />
  </View>
</NativeAsset>
```

--------------------------------

### Open Ad Inspector Programmatically

Source: https://docs.page/invertase/react-native-google-mobile-ads/ad-inspector

Launches the Ad Inspector overlay to analyze ad requests in real-time. The promise resolves when the inspector is closed, or rejects if an error occurs.

```javascript
try {
  await MobileAds().openAdInspector();
  // The promise will resolve when the inspector is closed.
} catch (error) {
  // The promise will reject if ad inspector is closed due to an error.
  console.log(error);
}
```

--------------------------------

### Show an Interstitial Ad and Handle States

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads-hook

This snippet demonstrates how to load an interstitial ad, show it when a button is pressed, and navigate to another screen based on ad states like `isClosed`. It also handles cases where the ad is not yet loaded.

```javascript
import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

export default function App({ navigation }) {
  const { isLoaded, isClosed, load, show } = useInterstitialAd(TestIds.INTERSTITIAL);

  useEffect(() => {
    // Start loading the interstitial straight away
    load();
  }, [load]);

  useEffect(() => {
    if (isClosed) {
      // Action after the ad is closed
      navigation.navigate('NextScreen');
    }
  }, [isClosed, navigation]);

  return (
    <View>
      <Button
        title="Navigate to next screen"
        onPress={() => {
          if (isLoaded) {
            show();
          } else {
            // No advert ready to show yet
            navigation.navigate('NextScreen');
          }
        }}
      />
    </View>
  );
}
```

--------------------------------

### Register Test Device ID on iOS

Source: https://docs.page/invertase/react-native-google-mobile-ads/common-reasons-for-ads-not-showing

This Objective-C snippet shows how to set the test device identifiers for iOS. Copy the provided sample device ID to your clipboard.

```objectivec
GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers = 
  @[ @"2077ef9a63d2b398840261c8221a0c9b"  ]; // Sample device ID

```

--------------------------------

### Create Header File (iOS)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Define the Objective-C interface for your native module. This class must conform to the RCTBridgeModule protocol.

```objective-c
#import <React/RCTBridgeModule.h>

@interface GoogleMobileAdsMediationAppLovin : NSObject <RCTBridgeModule> @end
```

--------------------------------

### Expo Build Properties for Proguard

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Configure `extraProguardRules` in `app.json` for Expo projects to include the consent SDK rule.

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "extraProguardRules": "-keep class com.google.android.gms.internal.consent_sdk.** { *; }"
          }
        }
      ]
    ]
  }
}
```

--------------------------------

### Rebuild Development Client for Expo

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

After configuring native dependencies in app.json, rebuild your Expo development client to include the new native dependencies. This ensures the mediation adapters are properly integrated.

```bash
npx expo prebuild --clean
npx expo run:android
npx expo run:ios

```

--------------------------------

### Build Native Code (Expo without EAS)

Source: https://docs.page/invertase/react-native-google-mobile-ads

If using Expo without EAS, prebuild your native code and run the app on iOS or Android.

```bash
# For iOS
npx expo prebuild
npx expo run:ios

# For Android
npx expo prebuild
npx expo run:android

```

--------------------------------

### Configure App Tracking Transparency in app.json (React Native)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Set the user tracking usage description in your project's app.json file for React Native. This is required by Apple for accessing IDFA.

```json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
  }
}

```

--------------------------------

### Configure App Tracking Transparency in app.json (Expo)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Configure the user tracking usage description within the Expo plugins in your app.json file. This is necessary for iOS IDFA access.

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

```

--------------------------------

### Displaying Native Ad Headline Asset

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Use the NativeAsset component to register the view for individual assets like headlines. Customize UI components and place them inside NativeAsset, setting the assetType prop. This allows the SDK to handle clicks, impressions, and the AdChoices overlay.

```javascript
const NativeComponent = () => {
  const [nativeAd, setNativeAd] = useState<NativeAd>();

  useEffect(() => {
    NativeAd.createForAdRequest(TestIds.NATIVE)
      .then(setNativeAd)
      .catch(console.error);
  }, []);

  if (!nativeAd) {
    return null;
  }

  return (
    <NativeAdView nativeAd={nativeAd}>
      <NativeAsset assetType={NativeAssetType.HEADLINE}>
        <Text>{nativeAd.headline}</Text>
      </NativeAsset>
    </NativeAdView>
  );
};

```

--------------------------------

### Create Rewarded Interstitial Ad with SSV Options

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Use this to create a Rewarded Interstitial Ad instance with server-side verification options configured. This is useful for confirming user ad completion on your server.

```javascript
const rewardedInterstitialAd = RewardedInterstitialAd.createForAdRequest(adUnitId, {
  serverSideVerificationOptions: {
    userId: '9999',
    customData: 'my-custom-data',
  },
});
```

--------------------------------

### Load an Interstitial Ad

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads-hook

Use the `useInterstitialAd` hook to initialize an interstitial ad instance. Pass the Ad Unit ID (or TestIds.Interstitial for testing) as the first argument. The hook manages the ad's lifecycle.

```javascript
import { useInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

export default function App() {
  const interstitialAd = useInterstitialAd(TestIds.Interstitial);

  return <View>{/* ... */}</View>;
}
```

--------------------------------

### Configure AdMob App IDs (Bare React Native)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Add your AdMob Android and iOS app IDs to the app.json file for bare React Native projects.

```json
// <project-root>/app.json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

```

--------------------------------

### User Tracking Usage Description (Expo app.json)

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Configure `userTrackingUsageDescription` in the Expo `app.json` for ATT message explainer.

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

--------------------------------

### Create Package (Android)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

This class registers your native module so React Native can find it. It implements the ReactPackage interface.

```java
package com.your-app-name

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
import java.util.Collections

class GoogleMobileAdsMediationAppLovinPackage : ReactPackage {
  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
    return listOf(GoogleMobileAdsMediationAppLovinModule(reactContext))
  }

  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
    return Collections.emptyList()
  }
}
```

--------------------------------

### Handle Rewarded Interstitial Ad Events and Display

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Loads a Rewarded Interstitial Ad and sets up event listeners for LOADED and EARNED_REWARD events. The ad is displayed when the 'loaded' state is true. Ensure to unsubscribe from events on component unmount.

```javascript
import React, { useEffect, useState } from 'react';
import { Button } from 'react-native';
import {
  RewardedInterstitialAd,
  RewardedAdEventType,
  TestIds,
} from 'react-native-google-mobile-ads';

const adUnitId = __DEV__
  ? TestIds.REWARDED_INTERSTITIAL
  : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewardedInterstitial = RewardedInterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribeLoaded = rewardedInterstitial.addAdEventListener(
      RewardedAdEventType.LOADED,
      () => {
        setLoaded(true);
      },
    );
    const unsubscribeEarned = rewardedInterstitial.addAdEventListener(
      RewardedAdEventType.EARNED_REWARD,
      reward => {
        console.log('User earned reward of ', reward);
      },
    );

    // Start loading the rewarded interstitial ad straight away
    rewardedInterstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      unsubscribeLoaded();
      unsubscribeEarned();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Rewarded Interstitial Ad"
      onPress={() => {
        rewardedInterstitial.show();
      }}
    />
  );
}


```

--------------------------------

### Create Rewarded Interstitial Ad Instance

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Instantiates a RewardedInterstitialAd object. Use the TestIds for development and your Ad Unit ID from the AdMob dashboard for production. Optional request options like keywords can be provided.

```javascript
import { RewardedInterstitialAd, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__
  ? TestIds.REWARDED_INTERSTITIAL
  : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewardedInterstitial = RewardedInterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

```

--------------------------------

### Create Native Module (Android)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

This class contains the native logic you want to call from JavaScript. It exposes methods to the React layer. Ensure necessary third-party SDKs are imported.

```java
package com.your-app-name

import android.util.Log
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
// Import the necessary third-party SDKs.
import com.applovin.sdk.AppLovinPrivacySettings

class GoogleMobileAdsMediationAppLovinModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

  // The React layer interfaces with the value of this API. 
  override fun getName() = "GoogleMobileAdsMediationAppLovin"

  // This exposes the method to the React layer.
  @ReactMethod
  fun setHasUserConsent(hasUserConsent: Boolean) {
    AppLovinPrivacySettings.setHasUserConsent(hasUserConsent)
  }
}
```

--------------------------------

### Initialize Test Ads with Test IDs

Source: https://docs.page/invertase/react-native-google-mobile-ads

Initialize various ad types using test IDs provided by react-native-google-mobile-ads. This is crucial for development to avoid using production ad units.

```javascript
import { AppOpenAd, InterstitialAd, RewardedAd, BannerAd, TestIds } from 'react-native-google-mobile-ads';

# App Open
AppOpenAd.createForAdRequest(TestIds.APP_OPEN);

# Interstitial
InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);

# Rewarded
RewardedAd.createForAdRequest(TestIds.REWARDED);

# Banners
<BannerAd unitId={TestIds.BANNER} />

```

--------------------------------

### Register Package (Android)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Add your custom package to the list of packages in your MainApplication file to register it with React Native.

```kotlin
override fun getPackages(): List<ReactPackage> =
  PackageList(this).packages.apply {
    // Add your custom package here.
    add(GoogleMobileAdsMediationAppLovinPackage())
}
```

--------------------------------

### Configure Server Side Verification Options

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Customize Server Side Verification parameters by setting the userId and customData fields within the serverSideVerificationOptions in your request configuration.

```javascript
const rewardedAd = RewardedAd.createForAdRequest(adUnitId, {
  serverSideVerificationOptions: {
    userId: '9999',
    customData: 'my-custom-data',
  },
});

```

--------------------------------

### Displaying Native Ad Media Content

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Use NativeMediaView to display main image and video assets. It automatically populates its content and should be placed within a NativeAdView. It respects the resizeMode property.

```javascript
const NativeComponent = () => {
  return (
    <NativeAdView nativeAd={nativeAd}>
      <NativeMediaView />
      // Other assets..
    </NativeAdView>
  );
};

```

--------------------------------

### Native Ad Request Options: Aspect Ratio

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Customizes the native ad request to prefer a specific media aspect ratio. Use NativeMediaAspectRatio enum values. This does not guarantee all creatives will match the preference.

```javascript
NativeAd.createForAdRequest(TestIds.NATIVE, {
  aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
});

```

--------------------------------

### Request App Tracking Transparency Authorization (React Native)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Request App Tracking Transparency authorization using react-native-permissions. This should be done before initializing mobile ads.

```javascript
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const result = await check(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
if (result === RESULTS.DENIED) {
  // The permission has not been requested, so request it.
  await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
}

const adapterStatuses = await mobileAds().initialize();

// Now ads can be loaded.

```

--------------------------------

### Inspect User Consent Choices

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Retrieves specific user consent flags to handle common use cases based on user choices. Useful for conditional logic after consent has been gathered.

```javascript
import { AdsConsent } from 'react-native-google-mobile-ads';

const {
  activelyScanDeviceCharacteristicsForIdentification,
  applyMarketResearchToGenerateAudienceInsights,
  createAPersonalisedAdsProfile,
  createAPersonalisedContentProfile,
  developAndImproveProducts,
  measureAdPerformance,
  measureContentPerformance,
  selectBasicAds,
  selectPersonalisedAds,
  selectPersonalisedContent,
  storeAndAccessInformationOnDevice,
  usePreciseGeolocationData,
} = await AdsConsent.getUserChoices();

if (storeAndAccessInformationOnDevice === false) {
  // The user declined consent for purpose 1.
}
```

--------------------------------

### Load Native Ad

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Loads a native ad using the provided Ad Unit ID. Use TestIds.NATIVE for testing purposes. This method returns a promise that resolves with a NativeAd object.

```javascript
NativeAd.createForAdRequest(TestIds.NATIVE)
  .then(setNativeAd)
  .catch(console.error);

```

--------------------------------

### Load and Display Interstitial Ad with Event Listeners

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Loads an interstitial ad and sets up event listeners for LOADED, OPENED, and CLOSED events. It conditionally renders a button to show the ad once it's loaded. Handles status bar visibility on iOS when the ad is opened or closed.

```javascript
import React, { useEffect, useState } from 'react';
import { Button, Platform, StatusBar } from 'react-native';
import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribeLoaded = interstitial.addAdEventListener(AdEventType.LOADED, () => {
      setLoaded(true);
    });

    const unsubscribeOpened = interstitial.addAdEventListener(AdEventType.OPENED, () => {
      if (Platform.OS === 'ios') {
        // Prevent the close button from being unreachable by hiding the status bar on iOS
        StatusBar.setHidden(true);
      }
    });

    const unsubscribeClosed = interstitial.addAdEventListener(AdEventType.CLOSED, () => {
      if (Platform.OS === 'ios') {
        StatusBar.setHidden(false);
      }
    });

    // Start loading the interstitial straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      unsubscribeLoaded();
      unsubscribeOpened();
      unsubscribeClosed();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Interstitial"
      onPress={() => {
        interstitial.show();
      }}
    />
  );
}


```

--------------------------------

### Add AppLovin Pod Dependency to .podspec

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Include the AppLovin mediation pod dependency in your module's `.podspec` file.

```ruby
# Add the third-party pod dependency.
s.dependency 'GoogleMobileAdsMediationAppLovin'

```

--------------------------------

### Importing RevenuePrecisions Enum

Source: https://docs.page/invertase/react-native-google-mobile-ads/impression-level-ad-revenue

Demonstrates how to import the RevenuePrecisions enum from the react-native-google-mobile-ads library. This enum specifies the type of revenue precision reported.

```javascript
import { RevenuePrecisions } from 'react-native-google-mobile-ads';

```

--------------------------------

### Set Debug Geography and Test Device for Consent

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Use this snippet to set a specific debug geography (e.g., EEA) and provide test device identifiers for simulating consent responses. This is useful for testing the UMP SDK's behavior in different consent scenarios.

```javascript
import { AdsConsent, AdsConsentDebugGeography } from 'react-native-google-mobile-ads';

const consentInfo = await AdsConsent.requestInfoUpdate({
  debugGeography: AdsConsentDebugGeography.EEA,
  testDeviceIdentifiers: ['TEST-DEVICE-HASHED-ID'],
});

```

--------------------------------

### Import Native Modules (JavaScript)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Import the NativeModules from the 'react-native' library in your JavaScript file to access your native module.

```javascript
import { NativeModules } from 'react-native'
```

--------------------------------

### Access Native Module (JavaScript)

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Access your native module directly from the NativeModules object. The name must exactly match the name exposed by your native code.

```javascript
const { GoogleMobileAdsMediationAppLovin } = NativeModules
```

--------------------------------

### Correct NativeAsset Placement

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Place the asset view (e.g., Text, Image) directly within the NativeAsset component. Avoid wrapping the asset view with additional components like TouchableOpacity or View, as this can interfere with the SDK's click handling and recording.

```javascript
<NativeAsset assetType={NativeAssetType.CTA}>
  <Text style={{ padding: 8 }}>{nativeAd.cta}</Text>
</NativeAsset>
<NativeAsset assetType={NativeAssetType.ICON}>
  <Image source={{uri: nativeAd.icon.url}} width={24} height={24} style={{ borderRadius: 8 }} />
</NativeAsset>
```

--------------------------------

### NativeMediaView with Contain Resize Mode

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Configure NativeMediaView to use 'contain' resize mode and set a specific aspectRatio. This scales the image uniformly to fit within the view while maintaining its aspect ratio.

```javascript
const NativeComponent = () => {
  return (
    <NativeAdView nativeAd={nativeAd}>
      <NativeMediaView resizeMode={'contain'} style={{ aspectRatio: 1 }} />
      // Other assets..
    </NativeAdView>
  );
};

```

--------------------------------

### Android Proguard Rule for Consent SDK

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Add this rule to `android/app/proguard-rules.pro` for Android builds to ensure the consent SDK is not stripped.

```proguard
-keep class com.google.android.gms.internal.consent_sdk.** { *; }
```

--------------------------------

### Request App Tracking Transparency Authorization (Expo)

Source: https://docs.page/invertase/react-native-google-mobile-ads

Request App Tracking Transparency authorization using expo-tracking-transparency. Ensure this is called before initializing mobile ads.

```javascript
import {
  getTrackingPermissionsAsync,
  PermissionStatus,
  requestTrackingPermissionsAsync,
} from 'expo-tracking-transparency';

const { status } = await getTrackingPermissionsAsync();
if (status === PermissionStatus.UNDETERMINED) {
  await requestTrackingPermissionsAsync();
}

const adapterStatuses = await mobileAds().initialize();

// Now ads can be loaded.

```

--------------------------------

### Add Custom Method to iOS Module

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Add the `setHasUserConsent` method to your Swift module file to interact with AppLovin's privacy settings.

```swift
// ... existing imports
import AppLovinSDK

public class GoogleMobileAdsMediationApplovinModule: Module {
  public func definition() -> ModuleDefinition {
    // ... existing definition

    // Add your custom method here
    Function("setHasUserConsent") { (hasUserConsent: Bool) in
      ALPrivacySettings.setHasUserConsent(hasUserConsent)
    }
  }
}
```

--------------------------------

### Call Native Method from React Native

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Import and call the `setHasUserConsent` method from your JavaScript code after setting up the native module.

```javascript
import { setHasUserConsent } from 'google-mobile-ads-mediation-applovin'

// Call your custom native method.
setHasUserConsent(true)

```

--------------------------------

### Displaying a Collapsible Banner Ad

Source: https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads

Enable collapsible banner ads by setting the 'collapsible' option in requestOptions. This allows ads to initially appear as a larger overlay and then collapse to a smaller size.

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

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

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.LARGE_ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        networkExtras: {
          collapsible: 'bottom',
        },
      }}
    />
  );
}

```

--------------------------------

### Listen to Native Ad Events

Source: https://docs.page/invertase/react-native-google-mobile-ads/native-ads

Use addAdEventListener to listen for events like clicks emitted by the NativeAd object. Ensure to remove the listener or destroy the ad when no longer needed.

```javascript
const NativeComponent = () => {
  const [nativeAd, setNativeAd] = useState<NativeAd>();

  useEffect(() => {
    NativeAd.createForAdRequest(TestIds.NATIVE)
      .then(setNativeAd)
      .catch(console.error);
  }, []);

  useEffect(() => {
    if (!nativeAd) return;
    const listener = nativeAd.addAdEventListener(NativeAdEventType.CLICKED, () => {
      console.log('Native ad clicked');
    });
    return () => {
      listener.remove();
      // or
      nativeAd.destroy();
    };
  }, [nativeAd]);

  if (!nativeAd) {
    return null;
  }

  return (
    <NativeAdView nativeAd={nativeAd}>
      // Components to display assets must be placed here
    </NativeAdView>
  );
};

```

--------------------------------

### Add AppLovin Dependency to Android build.gradle

Source: https://docs.page/invertase/react-native-google-mobile-ads/mediation

Include the AppLovin mediation adapter dependency in your module's `build.gradle` file. Replace `{X.Y.Z.A}` with the correct adapter version.

```groovy
// Groovy

dependencies {
  // Add the third-party SDK dependency. Replace {X.Y.Z.A} with the specific adapter version you are integrating.
  implementation 'com.google.ads.mediation:applovin:{X.Y.Z.A}'
}
```

--------------------------------

### Reset UMP SDK State for Test Devices

Source: https://docs.page/invertase/react-native-google-mobile-ads/european-user-consent

Call this function to reset the User Messaging Platform (UMP) SDK state for test devices. Note that resetting the App Tracking Transparency (ATT) state requires reinstalling the app.

```javascript
import { AdsConsent } from 'react-native-google-mobile-ads';

AdsConsent.reset();

```

--------------------------------

### Register Test Device ID on Android

Source: https://docs.page/invertase/react-native-google-mobile-ads/common-reasons-for-ads-not-showing

This Java snippet shows how to set the test device identifiers for Android using RequestConfiguration.Builder. Check logcat for your device ID.

```java
I/Ads: Use RequestConfiguration.Builder.setTestDeviceIds(Arrays.asList("33BE2250B43518CCDA7DE426D04EE231"))
to get test ads on this device."

```
Tokens:
Raw