Adding AdMob’s ‘Interstitial Videos’ Ad with React Native and Expo.

by
Tiempo de lectura: < 1 minuto

Reading time: < 1 minute

In today’s tutorial, I’m going to show you how to load a full-screen Interstitial video.

The first thing we need to do is set up AdMob in React Native. Add AdMob ads with React Native (Banner)

Once it’s set up, we can use this component to display the ads:

import React, { useEffect } from 'react';
import { AdMobInterstitial } from 'expo-ads-admob';

const interstitial = async () => {
    await AdMobInterstitial.setAdUnitID('admob_interstitial_ad_unit_id');
    try {
        await AdMobInterstitial.requestAdAsync();
    } catch (error) {
        console.log(error)
    }

    try {
        await AdMobInterstitial.showAdAsync();
    } catch (error) {
        console.log(error)
    }

    setTimeout(() => {
        AdMobInterstitial.dismissAdAsync();
    }, 1000);
}

export default function App() {
    useEffect(() => {
        interstitial();
    }, [])
    return (
        null
    );
}

We just need to replace ‘admob_interstitial_ad_unit_id’ with the AdMob Interstitial ad unit code we generated.

await AdMobInterstitial.setAdUnitID('admob_interstitial_ad_unit_id');

Now, to display the component, we only need to import and show it. For example, in APP.js:

In the render:

 // Ad
import Interstitial from '../components/ads/Interstitial';

return (
        <View style={styles.container}>
            <Interstitial />
....

Simply by adding the component and importing it, it will be displayed.

Post Views: 11

Leave a Comment