React Native SDK Usage

Banner&MREC Ads

Once the initialization of the SDK is complete, you can get and load banner and mrec ads from the Empower AppLovin SDK.

Loading a Banner or MREC

Banners

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

MRECs

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

To show a banner, call showBanner()

BannerAd.showAd(«ad-unit-ID»);

To hide a banner, call hideBanner():

BannerAd.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:

Banner

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

MRECs

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

App Open Ads

import AppLovinMAX, { AppOpenAd } from 'react-native-applovin-max';
const App = () => {
  const appState = useRef(AppState.currentState);
  useEffect(() = {
    AppLovinMAX.initialize(«SDK-key», (conf: Configuration) => {
      AppOpenAd.addAdLoadedEventListener((adInfo: AdInfo) => {
        console.log('AppOpen ad loaded from ' + adInfo.networkName);
      });
      AppOpenAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
        console.log('AppOpen ad failed to load with code ' + errorInfo.code);
      });
      AppOpenAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => {
        AppOpenAd.loadAd(«ad-unit-ID»);
      });
      AppOpenAd.addAdHiddenEventListener((adInfo: AdInfo) => {
        AppOpenAd.loadAd(«ad-unit-ID»);
      });
      AppOpenAd.loadAd(«ad-unit-ID»);
    });
    AppState.addEventListener("change", nextAppState => {
      if (appState.current.match(/inactive|background/) && nextAppState === "active") {
        showAdIfReady();
      }
      appState.current = nextAppState;
    });
  }, []);
  const showAdIfReady = async () => {
    const isAppOpenAdReady = await AppOpenAd.isAdReady(«app_open_ad_unit_ID»);
    if (isAppOpenAdReady) {
      AppOpenAd.showAd(«ad-unit-ID»);
    } else {
      AppOpenAd.loadAd(«ad-unit-ID»);
    }
  }
  ⋮
}

Interstitial Ads

Load an Interstitial Ad

import { InterstitialAd } from 'react-native-applovin-max';
const INTERSTITIAL_AD_UNIT_ID = Platform.select({
  android: '«android-ad-unit-ID»',
  ios: '«ios-ad-unit-ID»',
});
const MAX_EXPONENTIAL_RETRY_COUNT = 6;
const retryAttempt = useRef(0);
const initializeInterstitialAds = () => {
  InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {
    // Interstitial ad is ready to show. InterstitialAd.isReady(INTERSTITIAL_AD_UNIT_ID) now returns 'true'
    // Reset retry attempt
    retryAttempt.current = 0;
  });
  InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
    // Interstitial ad failed to load
    // AppLovin recommends that you retry with exponentially higher delays up to a maximum delay (in this case 64 seconds)
    retryAttempt.current += 1;
    if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) return;
    const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
    console.log('Interstitial ad failed to load - retrying in ' + retryDelay + 's');
    setTimeout(function() {
      loadInterstitial();
    }, retryDelay * 1000);
  });
  InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) = {
    // Interstitial ad failed to display. AppLovin recommends that you load the next ad
    loadInterstitial();
  });
  InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => {
    loadInterstitial();
  });
  // Load the first interstitial
  loadInterstitial();
}
const loadInterstitial = () => {
  InterstitialAd.loadAd(INTERSTITIAL_AD_UNIT_ID);
}

Showing an Interstitial Ad

const isInterstitialReady = await InterstitialAd.isAdReady(«ad-unit-ID»);
if (isInterstitialReady) {
  InterstitialAd.showAd(«ad-unit-ID»);
}

Rewarded Ads

Load a Rewarded Ad

import { RewardedAd } from 'react-native-applovin-max';
const REWARDED_AD_UNIT_ID = Platform.select({
  android: '«android-ad-unit-ID»',
  ios: '«ios-ad-unit-ID»',
});
const MAX_EXPONENTIAL_RETRY_COUNT = 6;
const retryAttempt = useRef(0);
const initializeRewardedAds = () => {
  RewardedAd.addAdLoadedEventListener((adInfo: AdInfo) => {
    // Rewarded ad is ready to show. AppLovinMAX.isInterstitialReady(REWARDED_AD_UNIT_ID) now returns 'true'
    // Reset retry attempt
    retryAttempt.current = 0;
  });
  RewardedAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
    // Rewarded ad failed to load
    // AppLovin recommends that you retry with exponentially higher delays up to a maximum delay (in this case 64 seconds)
    retryAttempt.current += 1;
    if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) return;
    const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
    console.log('Rewarded ad failed to load - retrying in ' + retryDelay + 's');
    setTimeout(() => {
      loadRewardedAd();
    }, retryDelay * 1000);
  });
  RewardedAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  RewardedAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => {
    // Rewarded ad failed to display. AppLovin recommends that you load the next ad
    loadRewardedAd();
  });
  RewardedAd.addAdHiddenEventListener((adInfo: AdInfo) => {
    loadRewardedAd();
  });
  RewardedAd.addAdReceivedRewardEventListener((adInfo: AdRewardInfo) => {
    // Rewarded ad displayed and user should receive the reward
  });
  // Load the first rewarded ad
  loadRewardedAd();
}
const loadRewardedAd = () => {
  RewardedAd.loadAd(REWARDED_AD_UNIT_ID);
}

Showing a Rewarded Ad

const isRewardedAdReady = await RewardedAd.isAdReady(«ad-unit-ID»);
if (isRewardedAdReady) {
  RewardedAd.showAd(«ad-unit-ID»);
}