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. 

Create Banner Ad Object and Set Size

The creation of the banner ad object should be done after receiving onInitSuccess callback.

const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const loadAd = useCallback(() => {
    bannerAdViewRef.current?.loadAd();
}, []);
return (
    <LevelPlayBannerAdView 
        ref={bannerAdViewRef} 
        adUnitId={[YOUR_AD_UNIT]}  
        adSize={[YOUR_LEVEL_PLAY_AD_SIZE]} 
        placementName={[YOUR_PLACEMENT]} 
        listener={[YOUR_LISTENER]} 
        style={{width:[AD_SIZE_WIDTH], height:[AD_SIZE_HEIGHT]}} 
    />
);

Banner Sizes

To create the ad size follow one of these options:

Adaptive ad size that adjusts to the screen width (recommended):
This option replaces the “SMART” integration, as it will return BANNER or LEADERBOARD according to the device type. Networks that support adaptive features (Google, Yandex) will return a height based on their optimization logic.

let adSize = await LevelPlayAdSize.createAdaptiveAdSize();

Adaptive ad size using fixed width ad size:
This option allows you to set a specific width. Networks that support adaptive- banner feature (Google, Yandex) will return a height based on their optimization logic based on the provided width. All other networks will return the fallback size (either BANNER or LEADERBOARD) according to the width provided.

let adSize = await LevelPlayAdSize.createAdaptiveAdSize(400);

Specific banner size:
This option allows you to set specifically a banner size: banner, large, medium.

let adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;

Placements

We support placements in banners for reporting only. Placements should be set before the loadAd, to affect all reloaded ads.

Set Banner Listener 

Implement the LevelPlayBannerAdViewListener in your code to get informed of ad delivery.

• It is recommended to set the listener before loading the banner ad.
• Please note that each banner ad should have its own listener implementation.
• Callbacks run on the main thread.

const listener: LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
      // Invoked each time a banner was loaded. Either on refresh, or manual load.
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
     // Invoked when the banner loading process has failed.
     // This callback will be sent both for manual load and refreshed banner failures.
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
     // Notifies the screen is displayed.
    },
    onAdDisplayFailed: (adInfo: LevelPlayAdInfo, error: LevelPlayAdError) => {
     // Notifies the screen failed to display.
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
     // Invoked when end user clicks on the banner ad.
    },
    onAdExpanded: (adInfo: LevelPlayAdInfo) => {
     // Ad is opened on full screen
    },
    onAdCollapsed: (adInfo: LevelPlayAdInfo) => {
     // Ad is restored to its original size
    },
    onAdLeftApplication: (adInfo: LevelPlayAdInfo) => {
     // Invoked when the user left the app.
    },
};

Load Banner Ad

To load a banner ad use loadAd.

// Load the banner ad
bannerAdViewRef.current?.loadAd();

Pause and Resume Banner Refresh 

You can pause banner refresh in your code if the refresh value was defined in the platform. Use the following methods to stop the automatic refresh of the banner ad, or re-enable it after pausing. 

• pauseAutoRefresh – pauses auto-refresh of the banner ad.
• resumeAutoRefresh – resumes auto-refresh of the banner ad after it has been paused.

// Pause refresh 
bannerAdViewRef.current?.pauseAutoRefresh(); 
// Resume refresh 
bannerAdView.current?.resumeAutoRefresh();

Destroy Banner Ad

To destroy a banner, call the destroy method.

A destroyed banner can no longer be shown again. To display more ads, create a new LevelPlayBannerAdView object. 

bannerAdViewRef.current?.destroy();

Full Implementation Example of Banner Ads

Here is an example for creating and loading a banner ad using standard banner size.

// Start of some component ...
const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER
const listener: LevelPlayBannerAdViewListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdDisplayFailed: (adInfo: LevelPlayAdInfo, error: LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdExpanded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdCollapsed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLeftApplication: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here
    },
};
return (
    <LevelPlayBannerAdView 
        ref={bannerAdViewRef}
        adUnitId={'YOUR_AD_UNIT_ID'}
        adSize={adSize}
        placementName={'YOUR_PLACEMENT'}
        listener={listener}
        onLayout={(_) => bannerAdViewRef.current?.loadAd()}
        style={{width: adSize.width, height: adSize.height}} // Get actual banner layout size
      />
);
  
// End of component ... 

LevelPlay Mediation Demo App

The Integration Demo application demonstrates how to integrate banner Ad Unit APIs in your app.

Download React Native Demo Application

Done!
You are now all set up to serve interstitial ads in your application. Verify your integration with our Integration Test Suite.