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 ={
  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}
        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);
  • <AdView adUnitId={mrec_ad_unit_ID} 
            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} 
            autoRefresh={true} />