message  Send Feedback

InterstitialAd

A class for interacting and showing Interstitial Ads.

An Interstitial advert can be pre-loaded and shown at a suitable point in your apps flow, such as at the end of a level in a game. An Interstitial is a full screen advert, laid on-top of your entire application which the user can interact with. Interactions are passed back via events which should be handled accordingly inside of your app.

Example

First create a new Interstitial instance, passing in your Ad Unit ID from the Firebase console, and any additional request options. The example below will present a test advert, and only request a non-personalized ad.

import { InterstitialAd, TestIds } from '@react-native-firebase/admob';
const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
requestNonPersonalizedAdsOnly: true,
});

Each advert needs to be loaded from AdMob before being shown. It is recommended this is performed before the user reaches the checkpoint to show the advert, so it's ready to go. Before loading the advert, we need to setup event listeners to listen for updates from AdMob, such as advert loaded or failed to load.

Event types match the AdEventType interface. Once the advert has loaded, we can trigger it to show:

import { AdEventType } from '@react-native-firebase/admob';
interstitial.onAdEvent((type) => {
if (type === AdEventType.LOADED) {
interstitial.show();
}
});
interstitial.load();

The advert will be presented to the user, and several more events can be triggered such as the user clicking the advert or closing it.

Properties

Methods


Properties

adUnitId

adUnitId: string;
keyboard_return Inherited from 
MobileAd.adUnitId

The Ad Unit ID for this AdMob ad.


loaded

loaded: boolean;
keyboard_return Inherited from 
MobileAd.loaded

Whether the advert is loaded and can be shown.


Methods

load

load(): void;
keyboard_return Inherited from 
MobileAd.load

Start loading the advert with the provided RequestOptions.

It is recommended you setup ad event handlers before calling this method.


onAdEvent

onAdEvent(
  listener: AdEventListener
): Function;
keyboard_return Inherited from 
MobileAd.onAdEvent

Listen to ad events. See AdEventTypes for more information.

Returns an unsubscriber function to stop listening to further events.

Example

// Create InterstitialAd/RewardedAd
const advert = InterstitialAd.createForAdRequest('...');
const unsubscribe = advert.onAdEvent((type) => {
});
// Sometime later...
unsubscribe();

Parameters

  • listener: AdEventListener
    A listener callback containing a event type, error and data.

show

show(
  showOptions?: AdShowOptions
): Promise<void>;
keyboard_return Inherited from 
MobileAd.show

Show the loaded advert to the user.

Example

// Create InterstitialAd/RewardedAd
const advert = InterstitialAd.createForAdRequest('...');
advert.onAdEvent((type) => {
if (type === AdEventType.LOADED) {
advert.show({
immersiveModeEnabled: true,
});
}
});

Parameters

  • showOptions: (optional) AdShowOptions
    An optional `AdShowOptions` interface.

createForAdRequest

createForAdRequest(
  adUnitId: string,
  requestOptions?: RequestOptions
): InterstitialAd;

Creates a new InterstitialAd instance.

Example

import { InterstitialAd, AdEventType, TestIds } from '@react-native-firebase/admob';
const interstitialAd = await InterstitialAd.request(TestIds.INTERSTITIAL, {
requestAgent: 'CoolAds',
});
interstitialAd.onAdEvent((type, error) => {
console.log('New event: ', type, error);
if (type === AdEventType.LOADED) {
interstitialAd.show();
}
});
interstitialAd.load();

Parameters

  • adUnitId: string
    The Ad Unit ID for the Interstitial. You can find this on your Google AdMob dashboard.
  • requestOptions: (optional) RequestOptions
    Optional RequestOptions used to load the ad.

React Native Market

Looking for pre-built React Native apps to kick start your next project? Check out the React Native Market by Invertase.

Your purchases help support our open-source projects such as React Native Firebase. All items are currently 50% off to celebrate the release of React Native Firebase version 6.
shopping_cartVisit React Native Market