Integration

This page shows you how to download, import, and configure the AppLovin React Native module.

Note

Version 5 of the React Native module includes a major upgrade to support Promises and callbacks. This upgrade breaks backward-compatibility. For a summary of the changes, see React Native v5 Migration Guide below.

Version 6 of the React Native module includes major updates to support TypeScript and modules. TypeScript became the React Native default application programming language as of React Native version 0.71. This module upgrade breaks backward-compatibility. For a summary of the changes, see React Native v6 Migration Guide below.

Download the Latest Module

Download the AppLovin MAX React Native module through npm by issuing the following command:

npm install react-native-applovin-max

To receive release updates, subscribe to the AppLovin MAX React Native module GitHub repository.

Enable Ad Review

To enable the MAX Ad Review service, follow the instructions below:

See also

“How to Build Superior User Experience with MAX’s Ad Review” from AppLovin’s Blog.

Android Instructions

Add the following at the end of your build.gradle files:

Additions to Root-Level build.gradle File

Groovy

buildscript {
  repositories {
    maven { url 'https://artifacts.applovin.com/android' }
  }
  dependencies {
    classpath "com.applovin.quality:AppLovinQualityServiceGradlePlugin:+"
  }
}

Kotlin

buildscript {
  repositories {
    maven { url = uri("https://artifacts.applovin.com/android") }
  }
  dependencies {
    classpath ("com.applovin.quality:AppLovinQualityServiceGradlePlugin:+")
  }
}

Additions to App-Level build.gradle File

Groovy

apply plugin: 'applovin-quality-service'
applovin {
  apiKey "«your-ad-review-key»"
}

Kotlin

plugins {
  id("applovin-quality-service")
}
applovin {
  apiKey = "«your-ad-review-key»"
}

You can find your Ad Review Key in the Account > General > Keys section of the AppLovin dashboard.

iOS Instructions

Download AppLovinQualityServiceSetup-ios.rb and move it into your project folder. Open a terminal window, cd to your project directory, and run:

ruby AppLovinQualityServiceSetup-ios.rb

Initialize the SDK

Add the code snippet below into your app’s main home screen:

import AppLovinMAX, { Configuration } from "react-native-applovin-max";

⋮

AppLovinMAX.initialize("«your-SDK-key»").then((conf: Configuration) => {
  // SDK is initialized, start loading ads
}).catch(error => {
  // Failed to initialize SDK
});

You can find your SDK key in the Account > General > Keys section of the AppLovin dashboard.

Ad assets that are fully cached result in a better user experience. For this reason, always initialize the AppLovin SDK on startup. This gives mediated networks the maximum amount of time to cache ads. This is especially important with video ads.

iOS 14 Support

In iOS 14, Apple introduced global privacy policy changes. Apple requires applications to comply with these new policies. If you fail to comply, you may lose revenue. This section explains how to comply.

SKAdNetwork

Update your app’s Info.plist with network-specific identifiers. See the SKAdNetwork documentation for instructions.

Consent and Data APIs

You must obtain consent from your users in certain jurisdictions on behalf of AppLovin’s monetization partners. You must also correctly pass consent values to AppLovin. To learn how to do these things, review the Privacy–Consent, Age-Related Flags, and Data APIs documentation.

iOS 15 Global SKAdNetwork Reporting

Starting with iOS 15, Apple allows developers to send a copy of their SKAdNetwork install postbacks to an endpoint of their choice. MAX includes a Global SKAdNetwork Report (MAX > Mediation > Analyze > Global SKA Report). You can use this to access the SKAdNetwork data across all of your network partners in one place.

Tip

You can check the value of your app’s SKAdNetwork endpoint by using the Mediation Debugger.

Note

Contact your account team if you want to forward the SKAdNetwork postbacks to one or more third-party endpoints of your choice. Independently of this Apple feature, AppLovin automatically sends a copy of all SKAdNetwork postbacks to the relevant campaign attribution MMP.

React Native v5 Migration Guide

Version 5 of the React Native module includes major updates to support Promises and callbacks. This breaks backward-compatibility. This section summarizes these updates.

Native UI Components (AppLovinMAX.AdView and AppLovinMAX.NativeAdView) can declare callbacks directly in the component itself.

There are now type-specific event listeners rather than generic event listeners that take the type as an argument. For example there is now AppLovinMAX.addInterstitialLoadedEventListener(listener) instead of AppLovinMAX.addEventListener(type, listener).

Several formerly synchronous methods with return values now use the Promises architecture. You can use chaining via then/catch or async/await when you access the value passed by the Promise. The following table shows the updated methods.

method	resolve return type	reject return type
AppLovinMAX.getAdaptiveBannerHeightForWidth(width)	height (float)	⸺
AppLovinMAX.hasUserConsent()	boolean	⸺
AppLovinMAX.initialize(sdkKey)	Configuration object	error
AppLovinMAX.isAgeRestrictedUser()	boolean	⸺
AppLovinMAX.isAppOpenAdReady(adunitId)	boolean	error
AppLovinMAX.isDoNotSell()	boolean	⸺
AppLovinMAX.isInitialized()	boolean	⸺
AppLovinMAX.isInterstitialReady(adUnitId)	boolean	error
AppLovinMAX.isMuted()	boolean	⸺
AppLovinMAX.isRewardedAdReady(adunitId)	boolean	error
AppLovinMAX.isTablet()	boolean	⸺
AppLovinMAX.showConsentDialog()	null	error

You can also reference this commit in the demo app which demonstrates what a migration to use these new methods might look like.

React Native v6 Migration Guide

Version 6 of the React Native module includes major updates to support TypeScript and modules. This breaks backward-compatibility. This section summarizes these updates.

TypeScript

TypeScript became the React Native default application programming language as of React Native version 0.71. Version 6 of the React Native module migrates the code base to TypeScript.

Modules

Previous versions exported a single module, AppLovinMAX, which encompassed all of the functions of MAX. Version 6 introduces a set of modules into which these various functions are categorized. The architecture of version 6 is similar to that of version 5, but the signatures of the functions are updated to adapt to this introduction of modules. The major new modules are as follows:

module	functionality
AppLovinMAX (default)	integration (initialization and general-purpose functions)
Privacy	privacy, terms flow
TargetingData	data and keyword passing
AppOpenAd	app open ads
BannerAd	banner ads
InterstitialAd	interstitial ads
MRecAd	medium rectangle (MREC) ads
NativeAdView	native ads
RewardedAd	rewarded ads
AdView	banners and MRECs (UI components)

Example Migration

version 5

import AppLovinMAX from 'react-native-applovin-max';

AppLovinMAX.addInterstitialLoadedEventListener((adInfo) => {
    const isInterstitialReady = await AppLovinMAX.isInterstitialReady(«ad-unit-ID»);
    if (isInterstitialReady) {
        AppLovinMAX.showInterstitial(«ad-unit-ID»);
    }
});

AppLovinMAX.loadInterstitial(«ad-unit-ID»);

version 6

import { InterstitialAd, type AdInfo } from 'react-native-applovin-max';

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

InterstitialAd.loadAd(«ad-unit-ID»);