Banner & MREC Ads
The following sections show you how to load and then show and hide a banner or MREC ad.
Loading a Banner or MREC
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-ad-unit-ID»', ios: '«ios-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 color for banners to be fully functional // In this case we set it to black - 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-ad-unit-ID»', ios: '«ios-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 native UI components, as in the following example:
import { AdView, AdFormat } from 'react-native-applovin-max';
<AdView adUnitId={«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 screenconst 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={«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); }}/>
Ad Preloading
As of React Native plugin version 7.0.0, you can preload ads for native UI components before you mount AdView
.
When you mount AdView
with the Ad Unit ID you preloaded, AdView
is constructed with a preloaded native UI component.
This allows the ads to display quickly.
React Native plugin version 8.1.0 updates this preloading feature to support multiple AdView
instances.
The preloadNativeUIComponentAdView()
method returns an AdViewId
, which you can use to specify the preloaded ad when you mount an AdView
.
preloadNativeUIComponentAdView(«ad-unit-ID», AdFormat.BANNER) .then((adViewId: AdViewId) => { console.log('Started preloading a banner ad for ' + «ad-unit-ID» + ' with AdView ID: ' + adViewId); });
preloadNativeUIComponentAdView(«ad-unit-ID», AdFormat.MREC) .then((adViewId: AdViewId) => { console.log('Started preloading a MREC ad for ' + «ad-unit-ID» + ' with AdView ID: ' + adViewId); });
You can specify the AdViewId
when you mount an AdView
:
<AdView adUnitId={«ad-unit-ID»} adViewId={«ad-view-ID»} adFormat={AdFormat.BANNER} style={styles.banner} onAdLoaded={(adInfo: AdInfo) => { console.log('Banner ad ( ' + adInfo.adViewId + ' ) loaded from ' + adInfo.networkName); }} ⋮/>
<AdView adUnitId={«ad-unit-ID»} adViewId={«ad-view-ID»} adFormat={AdFormat.MREC} style={styles.mrec} onAdLoaded={(adInfo: AdInfo) => { console.log('MREC ad ( ' + adInfo.adViewId + ' ) loaded from ' + adInfo.networkName); }} ⋮/>
When you unmount an AdView
, the preloaded native UI component is not destroyed.
Instead, it is cached and reused for the next mount.
To release its resources, you must manually destroy it when you no longer need it:
destroyNativeUIComponentAdView(adViewId) .then(() => { console.log('Destroyed the preloaded banner ad with AdView ID ' + adViewId); });
destroyNativeUIComponentAdView(adViewId) .then(() => { console.log('Destroyed the preloaded MREC ad with AdView ID ' + adViewId); });
If you omit an AdViewId
when you mount an AdView
, the component dynamically loads an ad.
In such a case, when you unmount the AdView
, it is automatically destroyed and cannot be reused.
See the example app at the AppLovin-MAX-React-Native GitHub project for a complete working example.
Adaptive Banners
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(«ad-unit-ID», "adaptive_banner", "false");
<AdView adUnitId={«ad-unit-ID»} adFormat={AdFormat.BANNER} adaptiveBannerEnabled={false} />
If you need to adjust your UI based on the adaptive banner size, you can retrieve the width and height of the loaded ad, in dp. The following code demonstrates how to do this:
BannerAd.addAdLoadedEventListener((adInfo: AdInfo) => { const widthDp = adInfo.size.width; const heightDp = adInfo.size.height;});
<AdView adUnitId={«ad-unit-ID»} adFormat={AdFormat.BANNER} onAdLoaded={(adInfo: AdInfo) => { const widthDp = adInfo.size.width; const heightDp = adInfo.size.height; }} />
Stopping and Starting Auto-Refresh
You may want to stop auto-refresh for an ad. You may want to do this, for instance, when you hide an ad or you 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} />