Banner & MREC Ads

Programmatic Method

Creating a Banner

The following code shows you how to load a banner or MREC ad by using your Ad Unit ID, desired position, and (for banners) desired background color (MAX sizes the ad for you automatically):

  • import { BannerAd, AdViewPosition } from 'react-native-applovin-max';
    
    const BANNER_AD_UNIT_ID = Platform.select({
      android: 'android_banner_ad_unit_ID',
      ios: 'ios_banner_ad_unit_ID',
    });
    
    function initializeBannerAds()
    {
      // Banners are automatically sized to 320x50 on phones and 728x90 on tablets
      // You may use the utility method `AppLovinMAX.isTablet()` to help with view sizing adjustments
      BannerAd.createAd(BANNER_AD_UNIT_ID, AdViewPosition.BOTTOM_CENTER);
    
      // Set background or background color for banners to be fully functional
      // In this case we are setting it to black - PLEASE USE HEX STRINGS ONLY
      BannerAd.setBackgroundColor(BANNER_AD_UNIT_ID, '#000000');
    }
  • import { MRecAd, AdViewPosition } from 'react-native-applovin-max';
    
    const MREC_AD_UNIT_ID = Platform.select({
      android: 'android_mrec_ad_unit_ID',
      ios: 'ios_mrec_ad_unit_ID',
    });
    
    function initializeMRecAds()
    {
      // MRECs are sized to 300x250 on phones and tablets
      MRecAd.createAd(MREC_AD_UNIT_ID, AdViewPosition.CENTERED);
    }

Displaying a Banner or MREC

To show a banner or MREC, make the following call:

  • BannerAd.showAd(ad_unit_ID);
  • MRecAd.showAd(ad_unit_ID);

To hide a banner or MREC, make the following call:

  • BannerAd.hideAd(ad_unit_ID);
  • MRecAd.hideAd(ad_unit_ID);

Native UI Component Method

You can also render banners and MRECs directly in your DOM as a native UI component, as in the following example:

  • import { AdView, AdFormat } from 'react-native-applovin-max';
    
    <AdView adUnitId={banner_ad_unit_ID}
            adFormat={AdFormat.BANNER}
            style={styles.banner}
            onAdLoaded={(adInfo: AdInfo) => {
              console.log('Banner ad loaded from ' + adInfo.networkName);
            }}
            onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
              console.log('Banner ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
            }}
            onAdClicked={(adInfo: AdInfo) => {
              console.log('Banner ad clicked');
            }}
            onAdExpanded={(adInfo: AdInfo) => {
              console.log('Banner ad expanded')
            }}
            onAdCollapsed={(adInfo: AdInfo) => {
              console.log('Banner ad collapsed')
            }}
            onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
              console.log('Banner ad revenue paid: ' + adInfo.revenue);
            }}/
    ⋮
    // This example anchors the bottom of the banner to the bottom of the screen
    const styles = StyleSheet.create({
      banner: {
        // Set background color for banners to be fully functional
        backgroundColor: '#000000',
        position: 'absolute',
        width: '100%',
        height: 'auto', // Defined by AdView per type of AdView and device
        bottom:  Platform.select({
          ios: 36, // For bottom safe area
          android: 0,
        })
      }
    });
  • import { AdView, AdFormat } from 'react-native-applovin-max';
    
    <AdView adUnitId={mrec_ad_unit_ID}
            adFormat={AdFormat.MREC}
            style={styles.mrec}
            onAdLoaded={(adInfo: AdInfo) => {
              console.log('MREC ad loaded from ' + adInfo.networkName);
            }}
            onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
              console.log('MREC ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
            }}
            onAdClicked={(adInfo: AdInfo) => {
              console.log('MREC ad clicked');
            }}
            onAdExpanded={(adInfo: AdInfo) => {
              console.log('MREC ad expanded')
            }}
            onAdCollapsed={(adInfo: AdInfo) => {
              console.log('MREC ad collapsed')
            }}
            onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
              console.log('MREC ad revenue paid: ' + adInfo.revenue);
            }}/>

Adaptive Banners

Only Google bidding and Google AdMob, and Google Ad Manager support adaptive banners. MAX sizes banners from other networks normally.

Google recommends that developers include a 50px padding between the banner placement and the app content to reduce the likelihood of accidental clicks. Refer to Google’s “About Confirmed Click” policy for more information and best practices.

Adaptive banners are responsive banners with heights that derive from the device type and the width of the banner. Banners from ad networks that support adaptive banners are adaptive by default starting in plugin version 2.3.0. To disable adaptive banners, set an extra flag as in the following examples:

  • BannerAd.setExtraParameter(banner_ad_unit_ID, "adaptive_banner", "false");
  • <AdView adUnitId={banner_ad_unit_ID} 
            adFormat={AdFormat.BANNER} 
            adaptiveBannerEnabled={false} />

Call getAdaptiveBannerHeightForWidth(width) to get the banner height, and then adjust your content accordingly.

Stopping and Starting Auto-Refresh

There may be cases when you would like to stop auto-refresh, for instance, when you hide an ad or want to manually refresh. Stop auto-refresh for a banner or MREC ad with the following code:

  • BannerAd.showAd(ad_unit_ID);
    BannerAd.stopAutoRefresh(ad_unit_ID);
    
  • MRecAd.showAd(ad_unit_ID);
    MRecAd.stopAutoRefresh(ad_unit_ID);
  • <AdView adUnitId={ad_unit_ID} 
            adFormat={AdFormat.format} 
            autoRefresh={false} />

Start auto-refresh for a banner or MREC ad with the following code:

  • BannerAd.startAutoRefresh(ad_unit_ID);
    
  • MRecAd.startAutoRefresh(ad_unit_ID);
  • <AdView adUnitId={ad_unit_ID} 
            adFormat={AdFormat.format} 
            autoRefresh={true} />