Banner integration for React Native

Banners are rectangular, system-initiated ads that can be either static or animated, and are served in a designated area around your live app content. 

Step 1. Implement the Listeners

The ironSource React Native Plugin fires several callbacks to inform you of Banner activity. Make sure to set the listeners before SDK initialization, as this will ensure the SDK sends all relevant information.

Import the following event class from the IronSource mediation:

import {
  IronSource,
  LevelPlayBannerEvents,
  IronSourceBannerOptions,
  IronSourceError,
  IronSourceAdInfo,
} from 'ironsource-mediation'

The SDK will notify your Listener of all possible events listed below:

/**
 * Invoked once the banner has successfully loaded.
 */
LevelPlayBannerEvents.onAdLoaded.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when the banner loading process has failed.
 * You can learn about the reason by examining the error.
 */
BannerEvents.onAdLoadFailed.setListener(
 (error: IronSourceError, adInfo: IronSourceAdInfo) => {}
);
/**
 * Invoked when a user clicks on the banner ad.
 */
BannerEvents.onAdClicked.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Notifies the presentation of a full screen content following a user-click.
 */
BannerEvents.onAdScreenPresented.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when the presented screen has been dismissed.
 */
BannerEvents.onAdScreenDismissed.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when the user is leaving the app.
 */
BannerEvents.onAdLeftApplication.setListener((adInfo: IronSourceAdInfo) => {});

Step 2. Load Banner Ad

To load a Banner ad, call the following function:

• Load the Banner view by calling this method with IronSourceBannerOptions (in this example it’s the BANNER banner size):

const bannerOptions: IronSourceBannerOptions = {
  position: 'BOTTOM', // IronSourceBannerPositionOption
  sizeDescription: 'BANNER', // IronSourceBannerSize
};
IronSource.loadBanner(bannerOptions);

See table below for details about our supported standard banner sizes:

• See table below for details about our supported standard banner positions:
  

  IronSourceBannerPosition	Description
  TOP	Banner will be positioned at the top center of the screen
  BOTTOM	Banner will be positioned at the bottom center of the screen

• Another option is initiating the banner with Custom size, using this signature (width x height) (points in iOS, dp in Android) instead of sizeDescription:

type IronSourceBannerCustomSize = { width: number; height: number };
const bannerOptions: IronSourceBannerOptions = {
  position: 'BOTTOM', // IronSourceBannerPositionOption
  width: 350,
  height: 50,
};
IronSource.loadBanner(bannerOptions);

You will receive the onAdLoaded event and the banner will show on your app.

Hide & Display Banner – Optional

In order to provide maximum flexibility in the ad experience, you now have the ability to hide and present banners on your app.

Using hideBanner and displayBanner APIs, you can control whether banners can be loaded and destroyed while in the background.

Once you’ve loaded and served a banner, you can choose to hide this banner and re-show it at a later point in your app.

To hide the banner, call this function:

IronSource.hideBanner();

To then show this same banner again, call this function:

IronSource.displayBanner();

Step 3. Additional Load Settings

Ad Placements

We support placements, as well as capping and pacing for Banners on the ironSource dashboard. , as well as capping and pacing for Banners on the ironSource dashboard. You can learn how to set up placements, capping, and pacing for Banners to optimize your app’s user experience here.

If you’ve set up placements for your Banner, call the following method to serve a Banner ad in a specific location:

const bannerOptions: IronSourceBannerOptions = {
  position: 'BOTTOM', // IronSourceBannerPositionOption
  sizeDescription: 'BANNER', // IronSourceBannerSize
  placementName: "YOUR_PLACEMENT",
};
IronSource.loadBanner(bannerOptions);

Note: The plugin allows showing only one banner at a time.

Vertical Offset – Optional

You can set a vertical offset (iOS: point, Android: dp) to adjust your banner position more granularly.

• Negative value: Upward offset relative to the default position
• Positive value: Downward offset relative to the default position

Make sure that a banner will be visible with the configured offset, following these limitations:

• Offset in the same direction as the position will be ignored. e.g. IronSourceBannerPositionOption Bottom & offset 50
• The offsets in the opposite direction or both directions from the Center position can go beyond the screen boundaries. (e.g. IronSourceBannerPositionOption Bottom & offset -10000)

const bannerOptions: IronSourceBannerOptions = {
  position: 'BOTTOM', // IronSourceBannerPositionOption
  sizeDescription: 'BANNER', // IronSourceBannerSize
  verticalOffset: -50, // adding 50 dp/50 point margin bottom
};
IronSource.loadBanner(bannerOptions);

Step 4. Destroy the Banner Ad

To destroy a banner, call the following method:

IronSource.destroyBanner();

A destroyed banner can no longer be loaded. If you want to serve it again, you must initiate it again.

Step 5.  Integrate a Banner Provider

Next, integrate the ad network adapters to serve Banners through LevelPlay Mediation.

You can find the supported networks below, and the banner size behavior for each network, as defined for the relevant platform: 

iOS Banner Support 

Android Banner Support 

Step 6.  Adaptive banners

The adaptive banner feature will allow you to receive the optimal banner height, based on a predefined ad-width. 

While using this feature, networks that support adaptive banners (Currently AdMob and Ad Manager only) will return ads with best-fit-height based on the container width you defined. All other networks will continue to deliver banners according to the specified default ad size.  

In this implementation (Supported from ironSource SDK 7.9.0+, React native version 1.1.1+) the container defines the boundaries of the banner for all networks, whether they support adaptive banners or not. This ensures a consistent experience across each refresh during the same load session.

1. Define adaptive banner parameters – 
   • Width: the banner width you would like to display. Use either fix size, or the device’s width from React native API 
   • Height: use getMaximalAdaptiveHeight API to get the recommended banner height for the width you defined in the previous step. 
2. Customize the banner configurations to suit the app’s design using the bannerOptions object and set the adaptive flag to true. 
3. Create a container, using the parameter sizes defined in step #1 
4. Load the banner

  const width =  Dimensions.get('window').width; //Getting the Width with RN API
  // Getting the Maximal Hight for the supported adaptive adapters
  const adaptiveHeight = await IronSource.getMaximalAdaptiveHeight(width);
  
const bannerOptions: IronSourceBannerOptions = {
    position: 'BOTTOM',
    sizeDescription: 'BANNER',
    isAdaptive: true,
    placementName: BANNER_PLACEMENT, // optional
    isContainerParams: new IronSourceContainerParams(width, adaptiveHeight)
  };
IronSource.loadBanner(bannerOptions)

Done!

You are now all set up to serve Banners in your application. Verify your integration with our Integration Helper.