Add Admob Ads with React Native (Banner) – Monetize Your APP

by
Tiempo de lectura: 2 minutos

Translated content in English:
Reading time: 2 minutes

In this tutorial, I’m going to show you how to add an Admob Banner using React Native and Expo.

The first thing you need to do is set up an ad with Admob.

Once set up, we obtain the codes (APP and Block) and install the expo-ads-admob library.

expo install expo-ads-admob

After installing, we create a new component called Banner (if you don’t know how to create one, you can find an explanation here: Creating a Component in React Native).

import React from "react";
import { AdMobBanner, setTestDeviceIDAsync } from "expo-ads-admob";

const Component = (props) => {

    // Test device
    setTestDeviceIDAsync("EMULATOR");

    return (
        <AdMobBanner
            bannerSize="banner"
            adUnitID="ca-app-pub-3940256099942544/6300978111"
            servePersonalizedAds={false}
            onDidFailToReceiveAdWithError={(error) => console.log(error)}
        />
    )
};

export default Component;

First, we import the necessary components from expo-ads-admob.

import { AdMobBanner, setTestDeviceIDAsync } from "expo-ads-admob";

Then, in the render function, we add the block with the banner.

<AdMobBanner
    bannerSize="banner"
    adUnitID="ca-app-pub-3940256099942544/6300978111"
    servePersonalizedAds={false}
    onDidFailToReceiveAdWithError={(error) => console.log(error)}
/>

The adUnitID property contains the code we obtained from Admob.

I have used the test ad code (ca-app-pub-3940256099942544/6300978111), but for it to work properly, you need to replace it with the code for your final ad.

Now let’s configure app.json, where we need to add the APP code.

For IOS:

 "ios": {
      "supportsTablet": true,
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511"
      }
    },

For ANDROID:

"android": {
      "package": "com.example",
      "config": {
        "googleMobileAdsAppId":"ca-app-pub-3940256099942544~3347511713"
      }
    },

But just like in the previous step, the test configuration (ca-app-pub-3940256099942544~3347511713) won’t work, so you need to replace it with your actual APP code. Otherwise, you’ll see the message “No ad config” in the console.

Once the configurations are added, you can now add the banner to the screen where you want to display it as follows:

....

import Banner from '../components/Banner';

....

// Create a screen component
const Screen = ({ navigation }) => {

    return (
        <View>
           <Banner />
        </View>
    )
};

....

First, we import the component, and then we use it like any other component.

Post Views: 6

Leave a Comment