### Install Dependencies

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/CONTRIBUTING.md

Install the necessary project dependencies using Yarn.

```bash
yarn
```

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

### Install react-native-google-mobile-ads (Bare React Native)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Install the admob module for bare React Native projects using npm.

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

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

### Install react-native-google-mobile-ads (Expo)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

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

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

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

### Example Server-Side Verification Callback

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

This is an example of how AdMob might call your server with the `userId` and `customData` parameters included in the ad request. Developers must verify these incoming requests.

```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
```

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

### Set User Consent in JavaScript

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

After installing the module and rebuilding your client, you can call native methods from JavaScript. This example shows how to set user consent.

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

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

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

### Add Third-Party Pod Dependency

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

To integrate a mediation network, add its specific pod dependency to your Podfile. Ensure you run `pod install` afterwards.

```ruby
s.dependency 'GoogleMobileAdsMediationAppLovin'
```

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

### Install Expo Build Properties Plugin

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

Install the `expo-build-properties` plugin using npm or yarn if you haven't already. This plugin is necessary for managing native dependencies within Expo projects.

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

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

### Rebuild Project (Expo without EAS)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Commands to rebuild your project's native code and install the new build on your device if you are using Expo without EAS.

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

# For Android
npx expo prebuild
npx expo run:android
```

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

### Load and Display Interstitial Ads with Event Listeners

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Load an interstitial ad and manage its lifecycle using event listeners for LOADED, OPENED, and CLOSED events. This example shows how to conditionally render a button to show the ad once it's loaded.

```jsx
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();
      }}
    />
  );
}
```

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

### Native Ad Request Options: Start Video Muted

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Control the initial audio state for video ads. By default, videos start muted. Set to `false` to request un-muted audio.

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

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

### iOS Test Device Identifier Example

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/common-reasons-for-ads-not-showing.mdx

This is an example of how to set test device identifiers in the Google Mobile Ads SDK for iOS. Copy your device ID from console logs.

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

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

### Android Test Device Identifier Example

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/common-reasons-for-ads-not-showing.mdx

This is an example of how to set test device identifiers in the Google Mobile Ads SDK for Android. Copy your device ID from logcat output.

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

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

### Configure Jest for Mocking Native Code

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/testing.mdx

Add this Jest configuration to mock the native code of the react-native-google-mobile-ads library in your tests. Ensure the path to the setup file is correct.

```json
// jest.config.js|ts|mjs|cjs|json
{
  "setupFiles": [
    "./node_modules/react-native-google-mobile-ads/jest.setup.ts"
  ]
}
```

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

### Install Mediation Adapters with Expo Build Properties

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

Add mediation adapter dependencies for Android and iOS using the `expo-build-properties` plugin in your `app.json` or `app.config.js`. Specify the adapter's package name for Android and pod name for iOS. Remember to rebuild your development client after making changes.

```json
// app.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"
              }
            ]
          }
        }
      ]
    ]
  }
}
```

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

### Requesting Consent Information

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

It is recommended to request consent information each time your application starts to determine if the consent modal should be shown. The `AdsConsent.requestInfoUpdate()` method returns a promise that resolves with consent information.

```APIDOC
## Requesting Consent Information

It is recommended you request consent information each time your application starts to determine if the consent modal should be shown, e.g. due to provider changes.

The `AdsConsent` helper provides a promise based method to return the users consent status called `requestInfoUpdate`.

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

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

The method returns an `AdsConsentInfo` interface, which provides information about consent form availability and the users consent status:

- **status**: The status can be one of 4 outcomes:
  - `UNKNOWN`: Unknown consent status.
  - `REQUIRED`: User consent required but not yet obtained.
  - `NOT_REQUIRED`: User consent not required.
  - `OBTAINED`: User consent already obtained.
- **isConsentFormAvailable**: A boolean value. If `true` a consent form is available.

**Note:** The return status of this call is the status of _form presentation and response collection_, **not
the the actual user consent**. It simply indicates if you now have a consent response to decode.
(_i.e._ if user consent is **required**, the form has been presented, and user has
**denied** the consent, the status returned by this method will be `OBTAINED`,
and not `REQUIRED` as some may expect). To check the actual consent status
see [Inspecting consent choices](/european-user-consent/#inspecting-consent-choices) below.
```

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

### Clone the Repository

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/CONTRIBUTING.md

Clone the project repository to your local machine to begin development.

```bash
git clone https://github.com/invertase/react-native-google-mobile-ads.git
cd react-native-google-mobile-ads
```

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

### Create and Load App Open Ad

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Use this snippet to create and preload an App Open ad. Ensure you use the correct Ad Unit ID for testing or production. Ads must be preloaded to be ready for display.

```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();
```

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

### Configure app-ads.txt for Test Ads

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/common-reasons-for-ads-not-showing.mdx

Include this line in your app-ads.txt file to enable ads using demo ad units. Ensure your app-ads.txt is correctly set up for your platform.

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

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

### Gather Consent and Initialize SDK

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Combines requesting consent information and loading/presenting a consent form if necessary. It's recommended to call this on app launch. The SDK uses the consent status from the previous session if an error occurs.

```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...
}
```

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

### Create a Rewarded Ad Instance

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Use `createForAdRequest` to initialize a RewardedAd instance. Provide an Ad Unit ID and optional request options like keywords. For testing, use `TestIds.REWARDED`.

```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'],
});
```

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

### Initialize Google Mobile Ads SDK

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Initialize the Google Mobile Ads SDK. This should be called once, ideally at app launch, before loading any ads. It returns a promise that resolves when initialization is complete or after a timeout. If using mediation, wait for this promise to settle before loading ads.

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

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

```

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

### Configure iOS Static Frameworks (Expo)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Enable static frameworks for iOS in Expo projects by merging this configuration into your app.json, app.config.js, or app.config.ts file.

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

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

### Configure Outbound Ad Requests

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Set global ad request configurations before initializing the SDK. This includes content rating, child-directed treatment, age of consent, and test device identifiers. Ensure this is called before `initialize()` if you need to set these parameters.

```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!
  });

```

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

### Rebuild Project (Expo with EAS)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Commands to create a new build for your Expo project with EAS, either for online or local builds.

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

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

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

### Load and Display Rewarded Interstitial Ads with Event Listeners

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Set up event listeners for ad load and reward events, then load the ad. Once loaded, a button will appear to show the ad. 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();
      }}
    />
  );
}
```

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

### Launch Ad Inspector Programmatically

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/ad-inspector.mdx

Launches the Ad Inspector overlay programmatically. The promise resolves when the inspector is closed, or rejects if it's closed due to an error.

```APIDOC
## Launch ad inspector programmatically

Ad inspector can be launched programmatically with the `openAdInspector` method in the `MobileAds` instance.

```js
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);
}
```
```

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

### Rebuild Expo Development Client

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

After configuring mediation adapters in your `app.json` or `app.config.js`, rebuild your development client to include the new native dependencies. Run `expo prebuild --clean` to clear existing native configurations, then `expo run:android` or `expo run:ios` to build the client for your respective platform.

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

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

### Configure User Tracking Description (Bare React Native)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Add the `user_tracking_usage_description` to your `app.json` for bare React Native projects. This message is displayed to users when requesting tracking permission.

```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": "This identifier will be used to deliver personalized ads to you."
  }
}
```

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

### Rebuild Project (Bare React Native)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Commands to rebuild your project after configuring AdMob App IDs in app.json for bare React Native projects.

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

# For Android
npx react-native run-android
```

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

### Displaying a Native Ad

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Use `NativeAdView` to wrap ad assets and register them with the `nativeAd` prop. Populate asset views with data from the `NativeAd` object and wrap them with `NativeAsset` components. `NativeMediaView` is used for displaying media assets.

```tsx
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>
  );
};

```

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

### Create an Interstitial Ad Instance

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Instantiate an InterstitialAd with your Ad Unit ID and optional request options. Use TestIds for development.

```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'],
});
```

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

### Display Native Ad with NativeAdView

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Use the `NativeAdView` component as the root for displaying native ad assets. Pass the loaded `NativeAd` object to the `nativeAd` prop. Components for displaying ad assets should be placed within this view.

```tsx
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>
  );
};
```

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

### Initialize Adverts with Test IDs

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Initialize various ad types (App Open, Interstitial, Rewarded, Banner) using test IDs for development purposes. This prevents accidental use of production ads.

```jsx
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} />
```

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

### Create a Rewarded Interstitial Ad Instance

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Instantiate a RewardedInterstitialAd with an ad unit ID and optional request options. Use TestIds for development and your AdMob ID for production. Keywords can be provided to tailor ad delivery.

```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'],
});
```

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

### Load an Interstitial Ad with a Hook

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads-hook.mdx

Use the `useInterstitialAd` hook to create and manage an interstitial ad instance. The first argument is the Ad Unit ID, which can be a test ID or your production ID. The hook automatically handles ad loading and destruction.

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

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

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

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

### Configure User Tracking Description (Expo)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Configure the `userTrackingUsageDescription` within the `plugins` section of your `app.json` for Expo projects. This setting is crucial for handling user tracking permissions.

```json
// <project-root>/app.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."
        }
      ]
    ]
  }
}
```

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

### NativeAsset Placement - Do

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Place asset views directly within `NativeAsset` components. Avoid wrapping them in additional views like `TouchableOpacity` or `View` to ensure proper SDK handling of clicks and asset registration.

```tsx
<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>

```

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

### Open Ad Inspector Programmatically

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/ad-inspector.mdx

Launch the Ad Inspector overlay programmatically using the `openAdInspector` method. 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);
}
```

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

### NativeAsset Placement - Don't

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Do not wrap asset views with extra components like `TouchableOpacity` or `View` inside `NativeAsset`. This can interfere with the SDK's ability to manage clicks and register assets correctly.

```tsx
<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>

```

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

### Configuring NativeMediaView Resize Mode and Aspect Ratio

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Customize the display of media assets using the resizeMode prop ('cover', 'contain', 'stretch') and style properties like aspectRatio. The aspectRatio defaults to nativeAd.mediaContent.aspectRatio.

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

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

### Register Custom Package in MainApplication (Android)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

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

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

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

### Delay App Measurement Initialization (Expo)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Configure `delayAppMeasurementInit` to `true` within the `react-native-google-mobile-ads` plugin in your `app.json`, `app.config.js`, or `app.config.ts` for Expo builds.

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

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

### Expo Proguard Rules for Consent SDK

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Configure `extraProguardRules` in your `app.json`, `app.config.js`, or `app.config.ts` to include the consent SDK rules for Expo builds.

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

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

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

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Add your Android and iOS AdMob App IDs to the app.json file for bare React Native projects. Rebuild your project for changes to take effect.

```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"
  }
}
```

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

### Set User Consent in iOS

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

Implement the `setHasUserConsent` method in your iOS module to manage user consent for AppLovin. This requires importing the `AppLovinSDK`.

```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)
    }
  }
}
```

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

### Displaying Main Image/Video with NativeMediaView

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

The NativeMediaView component automatically populates its content for main image and video assets. It should be placed within the NativeAdView hierarchy.

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

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

### useInterstitialAd Hook

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads-hook.mdx

The `useInterstitialAd` hook provides states and functions to manage interstitial ads. It allows you to load ads, check their loaded status, and display them to the user. The hook also provides states to track ad events like opening, closing, clicking, and errors.

```APIDOC
## useInterstitialAd Hook

### Description

The `useInterstitialAd` hook is used to manage the lifecycle of an interstitial ad. It returns several states and functions that allow you to control when an ad is loaded and shown, and to react to ad events.

### Return Values

| Name           | Type                               | Description                                                                                                        |
| :------------- | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
| `isLoaded`       | boolean                            | Whether the ad is loaded and ready to to be shown to the user. Automatically set to false when the ad was shown.   |
| `isOpened`       | boolean                            | Whether the ad is opened. The value is remained `true` even after the ad is closed unless **new ad is requested**. | 
| `isClicked`      | boolean                            | Whether the ad is clicked.                                                                                         |
| `isClosed`       | boolean                            | Whether your ad is dismissed.                                                                                      |
| `isShowing`      | boolean                            | Whether your ad is showing. The value is equal with `isOpened && !isClosed`.                                       |
| `error`          | Error \| undefined                 | `Error` object throwed during ad load.                                                                             |
| `revenue`        | PaidEvent                          | See [Impression-level ad revenue].                                                                                 |
| `reward`         | [ RewardedAdReward ](#) \| undefined | Loaded reward item of the Rewarded Ad. Available only in RewardedAd.                                               |
| `isEarnedReward` | boolean                            | Whether the user earned the reward by Rewarded Ad.                                                                 |
| `load`           | Function                           | Start loading the advert with the provided RequestOptions.                                                         |
| `show`           | Function                           | Show the loaded advert to the user.                                                                                |

### Usage Example

```tsx
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>
  );
}
```

### Notes

- The `isOpened` value remains `true` even after the ad is closed. It changes to `false` when an ad is initialized via calling `load()`.
- To determine whether the ad is currently showing, use the `isShowing` value.
```

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

### Use Interstitial Ad Hook

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads-hook.mdx

This snippet demonstrates how to use the `useInterstitialAd` hook to load and show an interstitial ad. It handles ad loading, display logic based on ad readiness, and navigation after the ad is closed.

```tsx
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>
  );
}
```

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

### Handle Rewarded Ad Events and Display

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Listen for ad events like `LOADED` and `EARNED_REWARD` using `addAdEventListener`. Load the ad and display it when the user interacts with a button. Ensure to unsubscribe from events on component unmount.

```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();
      }}
    />
  );
}
```

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

### Receiving Ad Events

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Listen to ad events using `addAdEventListener` on the `NativeAd` object. Remember to remove the listener when it's no longer needed to prevent memory leaks.

```tsx
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>
  );
};

```

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

### Create Rewarded Interstitial Ad with SSV Options

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Use `serverSideVerificationOptions` when creating a Rewarded Interstitial Ad to pass custom data to your SSV callback. This requires setting `userId` and `customData` within the options.

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

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

### Set User Consent in Android

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

Implement the `setHasUserConsent` method in your Android module to manage user consent for AppLovin. This requires importing `AppLovinPrivacySettings`.

```kotlin
// ... existing imports
import com.applovin.sdk.AppLovinPrivacySettings

class GoogleMobileAdsMediationApplovinModule : Module() {
  override fun definition() = ModuleDefinition {
    // ... existing definition

    // Add your custom method here.
    Function("setHasUserConsent") { hasUserConsent: Boolean ->
      AppLovinPrivacySettings.setHasUserConsent(hasUserConsent)
    }
  }
}
```

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

### Configure SKAdNetwork for Expo Projects

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Integrate SKAdNetwork identifiers into your app.json using the 'plugins' configuration for Expo projects. Ensure these identifiers are kept up-to-date for accurate conversion tracking.

```json
// <project-root>/app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "skAdNetworkItems": [
            "cstr6suwn9.skadnetwork",
            "4fzdc2evr5.skadnetwork",
            "2fnua5tdw4.skadnetwork",
            "ydx93a7ass.skadnetwork",
            "p78axxw29g.skadnetwork",
            "v72qych5uu.skadnetwork",
            "ludvb6z3bs.skadnetwork",
            "cp8zw746q7.skadnetwork",
            "3sh42y64q3.skadnetwork",
            "c6k4g5qg8m.skadnetwork",
            "s39g8k73mm.skadnetwork",
            "wg4vff78zm.skadnetwork",
            "3qy4746246.skadnetwork",
            "f38h382jlk.skadnetwork",
            "hs6bdukanm.skadnetwork",
            "mlmmfzh3r3.skadnetwork",
            "v4nxqhlyqp.skadnetwork",
            "wzmmz9fp6w.skadnetwork",
            "su67r6k2v3.skadnetwork",
            "yclnxrl5pm.skadnetwork",
            "t38b2kh725.skadnetwork",
            "7ug5zh24hu.skadnetwork",
            "gta9lk7p23.skadnetwork",
            "vutu7akeur.skadnetwork",
            "y5ghdn5j9k.skadnetwork",
            "v9wttpbfk9.skadnetwork",
            "n38lu8286q.skadnetwork",
            "47vhws6wlr.skadnetwork",
            "kbd757ywx3.skadnetwork",
            "9t245vhmpl.skadnetwork",
            "a2p9lx4jpn.skadnetwork",
            "22mmun2rn5.skadnetwork",
            "44jx6755aq.skadnetwork",
            "k674qkevps.skadnetwork",
            "4468km3ulz.skadnetwork",
            "2u9pt9hc89.skadnetwork",
            "8s468mfl3y.skadnetwork",
            "klf5c3l5u5.skadnetwork",
            "ppxm28t8ap.skadnetwork",
            "kbmxgpxpgc.skadnetwork",
            "uw77j35x4d.skadnetwork",
            "578prtvx9j.skadnetwork",
            "4dzt52r2t5.skadnetwork",
            "tl55sbb4fm.skadnetwork",
            "c3frkrj4fj.skadnetwork",
            "e5fvkxwrpn.skadnetwork",
            "8c4e2ghe7u.skadnetwork",
            "3rd42ekr43.skadnetwork",
            "97r2b46745.skadnetwork",
            "3qcr597p9d.skadnetwork"
          ]
        }
      ]
    ]
  }
}

```

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

### Displaying Native Ad Headline with NativeAsset

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Use the NativeAsset component to register a view for a specific ad asset like the headline. Customize your UI components and place them inside NativeAsset, setting the assetType prop accordingly. Ensure the asset view is a direct child of NativeAsset.

```tsx
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>
  );
};
```

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

### Import and Use Native Module in React Native

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/mediation.mdx

Import `NativeModules` in your JavaScript file and access your custom native module to call its exposed methods. Ensure the module name matches the native implementation.

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

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

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

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

### Configure SKAdNetwork for Bare React Native Projects

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Add the SKAdNetwork identifiers to your app.json file for bare React Native projects. These identifiers are crucial for conversion tracking and should be updated regularly.

```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",
    "sk_ad_network_items": [
      "cstr6suwn9.skadnetwork",
      "4fzdc2evr5.skadnetwork",
      "2fnua5tdw4.skadnetwork",
      "ydx93a7ass.skadnetwork",
      "p78axxw29g.skadnetwork",
      "v72qych5uu.skadnetwork",
      "ludvb6z3bs.skadnetwork",
      "cp8zw746q7.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "wg4vff78zm.skadnetwork",
      "3qy4746246.skadnetwork",
      "f38h382jlk.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "su67r6k2v3.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "t38b2kh725.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "vutu7akeur.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "44jx6755aq.skadnetwork",
      "k674qkevps.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "klf5c3l5u5.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "kbmxgpxpgc.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "tl55sbb4fm.skadnetwork",
      "c3frkrj4fj.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "97r2b46745.skadnetwork",
      "3qcr597p9d.skadnetwork"
    ]
  }
}

```

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

### Configure Server-Side Verification

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/displaying-ads.mdx

Customize server-side verification parameters by setting the `serverSideVerificationOptions` field in the request options. This allows you to pass custom data like `userId` and `customData` to your callback URL.

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

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

### Configure AdMob App IDs (Expo)

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/index.mdx

Add your Android and iOS AdMob App IDs using the react-native-google-mobile-ads Expo config plugin in your app.json, app.config.js, or app.config.ts file. Rebuild your project's native code.

```json
// <project-root>/app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}
```

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

### Load a Native Ad

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/native-ads.mdx

Loads a native ad using the provided Ad Unit ID. Use test IDs for development and your AdMob dashboard ID for production. This method returns a promise that resolves with a `NativeAd` object.

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

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

### Android Proguard Rules for Consent SDK

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/european-user-consent.mdx

Add this Proguard rule to your `android/app/proguard-rules.pro` file to ensure the consent SDK is not stripped during release builds.

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

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

### Import RevenuePrecisions Enum

Source: https://github.com/invertase/react-native-google-mobile-ads/blob/main/docs/impression-level-ad-revenue.mdx

Import the RevenuePrecisions enum from the library to work with ad revenue precision values. This enum includes ESTIMATED, PRECISE, PUBLISHER_PROVIDED, and UNKNOWN.

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