Integration

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

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.

Download the Latest Module

You can download the AppLovin MAX React Native module through npm by issuing the following command:

npm install react-native-applovin-max

If you want to receive release updates, subscribe to the AppLovin MAX React Native module GitHub repository.

Enable Ad Review

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

To enable the MAX Ad Review service, follow the instructions below for Android or iOS:

Android Instructions

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

Additions to Root-Level build.gradle File

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

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

Additions to App-Level build.gradle File

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

• 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 from "react-native-applovin-max";

⋮

AppLovinMAX.initialize("your-sdk-key").then(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. Therefore, always initialize the AppLovin SDK on startup so as to give mediated networks the maximum amount of time to cache ads. This is especially important with video ads.

Do not use different network app IDs for the same network across different ad units. If you use different app IDs for the same network and app package name without using selective init you will break the network initialization process.

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 provides a Global SKAdNetwork Report (MAX > Mediation > Analyze > Global SKA Report) for developers to access the SKAdNetwork data across all their network partners in one place. To leverage the MAX Global SKAdNetwork Report, enable iOS 15 SKAdNetwork reporting by using the app’s Info.plist:

1. In your app’s Info.plist, create a new key named NSAdvertisingAttributionReportEndpoint of type String .
2. Give that key the value: https://postbacks-app.com .

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

To forward the SKAdNetwork postbacks to one or more third-party endpoints of your choice (including your MMP), please contact your account team.

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

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