MREC Ads

Programmatic Method

The following code shows you how to load an MREC by using your ad unit ID and desired position (MAX sizes the MREC automatically):

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);
}

Native UI Component Method

You can also render an MREC directly in your DOM as a native UI component:

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);
        }}/>

Stopping and Starting Auto-Refresh

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

• MRecAd.showAd(mrec_ad_unit_ID);
  MRecAd.stopAutoRefresh(mrec_ad_unit_ID);

• <AdView adUnitId={mrec_ad_unit_ID} 
          adFormat={AdFormat.MREC} 
          autoRefresh={false} />

Start auto-refresh for an MREC ad with the following code:

• MRecAd.startAutoRefresh(mrec_ad_unit_ID);

• <AdView adUnitId={mrec_ad_unit_ID} 
          adFormat={AdFormat.MREC} 
          autoRefresh={true} />