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