Using react-native-google-mobile-ads to create AdMob in react native

AdMob is a popular mobile advertising platform that allows developers to monetize their mobile applications by displaying ads. The React Native framework offers several libraries to integrate AdMob in your app, including the “react-native-google-mobile-ads” library. This library provides a comprehensive set of APIs to display various types of ads in your React Native application. In this article, we will explore the steps required to integrate AdMob with the “react-native-google-mobile-ads” library.

Step 1: Create a new React Native application

The first step is to create a new React Native application using the following command:

npx react-native init AdMobExample

This command will create a new React Native project named “AdMobExample”.

Step 2: Install the required dependencies

Next, you need to install the required dependencies for integrating AdMob into your React Native application. You can do this using the following command:

npm install react-native-google-mobile-ads --save

This command will install the “react-native-google-mobile-ads” package, which is a third-party library that enables you to integrate AdMob into your React Native application.

Step 3: Create an AdMob account

To use AdMob, you need to create an AdMob account. You can do this by visiting the AdMob website and following the steps to sign up. Once you have created an AdMob account, you can create an ad unit, which will provide you with an ad unit ID that you will use to display ads in your application.

Step 4: Configure AdMob in your React Native application

To configure AdMob in your React Native application, you need to add the following code to your “App.js” file:

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

const adUnitId = 'your-ad-unit-id';

export default function App() {
  return (
    <View>
      <BannerAd
        unitId={adUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
}

This code imports the “BannerAd” component from the “react-native-google-mobile-ads” package, sets the ad unit ID to your ad unit ID, sets the ad size to FULL_BANNER, and requests only non-personalized ads.

Step 5: Test your AdMob integration

To test your AdMob integration, you can run your React Native application in the simulator or on a device. If everything is set up correctly, you should see an AdMob ad displayed in your application.