How to install AppLovin MAX in a React Native EXPO app

Premise

I had an idea for a little app and I had no doubt about going cross-platform, since I already had previous positive experiences with React in general and Expo in particular. I didn’t need native code or other special requirements that would have forced me to use the “real” React Native (“bare workflow” as they call it), so I chose to go with Expo’s “managed workflow” again: all the libraries and SDKs that I needed were offered by existing Expo packages and I enjoy the “EAS Build” service very much.

So I coded this app and I published it. It’s been on the stores for quite some time, it’s free and ad-based. Initially, I installed and configured the “expo-ads-admob” (now deprecated) and later “react-native-google-mobile-ads” packages to implement Google AdMob because I wanted some interstitial ads.

Here comes the problem… I won’t bore you with the details, but after a few months I grew to HATE AdMob. Two weeks after implementing it, the ads just stopped showing for no apparent reason and there was absolutely nothing I could do. It turns out that there’s not even a real support: if you try to get help, you end up in a forum where strange random people that behave like bots answer to you with the same generic copy-pasted stuff that you already know. Anyway, to make a long story short, it magically started working again more than 2 months later, and this time it went on for 4 months. Then it stopped again. That was the last drop. Whether it was my fault or not, I certainly didn’t want to go back waiting for months, completely in the dark, without any support at all and at the mercy of Google.

So I asked myself: “what can I lose?” and I started considering other platforms. After the usual exhausting round of searches on the Internet, I ended up choosing AppLovin MAX.

AppLovin MAX

There’s just a problem: yes, MAX has an official React Native library and a great documentation but no, it doesn’t support Expo out-of-the-box like the AdMob packages did.

So I took the challenge to learn how to do it.

Keep in mind that I had almost no previous knowledge of native stuff. Even now, I barely know what CocoaPods or Gradle are. I always managed to use packages that were either JavaScript-only or supported by Expo.

My goals were:

• Implement the AppLovin MAX SDK in my Expo managed app without “ejecting” the project
• Do it in the most “automated” way possible, without the need of manual interventions every time I had to make a new build
• Make it work for both Android and iOS, and, since I don’t have access to a Mac, build using EAS Build
• Plus: integrate mediation adapters for Meta Audience Network, Google AdMob and Google Ad Manager

Here’s how I succeeded to do it.

In this article I won’t give instructions about how to configure your account(s) and that sort of things. It’s very easy and documented, you don’t need my stilted English for that :)

Important: I’m using Expo SDK 45 (the exact version of the package is 45.0.4) and “react-native-applovin-max” 3.1.0. These are the latest versions at the time of writing.

First of all, let’s install the official package with either NPM or Yarn:

npm install react-native-applovin-max
yarn add react-native-applovin-max

The documentation is very clear: in Android, we have to add some code in both the root-level and the app-level “build.gradle” files. In iOS it’s even easier: we just have to download a Ruby file, copy it to the project directory, and run it.

Easy, right? The tricky part was how to make these operations in an Expo managed project.

We have to make heavy use of Expo’s “app.config.js” (documentation). Actually I’m all for TypeScript, so mine is “app.config.ts”. If you’re using pure JS, just remove the TypeScript parts.

This is my config file, stripped out of everything that isn’t relevant. I added a lot of comments in order to make it more understandable. You can find many references to the documentation.

This config file includes code for both platforms. As you can see, in order to make modifications to the native project files we’re using a bunch of functions from the “@expo/config-plugins” package. Check its documentation, it’s very informative.

You can use the “expo prebuild” command (from “expo-cli”) to create the native project folders and check the effects of those modifications without actually building.

Now let’s talk in more detail about one platform at a time.

Android

As I said before, the documentation of MAX tells us to modify both “build.gradle” files. There are two functions, “withProjectBuildGradle” (line 51) and “withAppBuildGradle” (line 67), that take our config object and a function that allows us to modify what we want. Check the code, it’s self-explanatory.

There is a third similar function, “withAndroidManifest” (line 92), that we need to configure the other networks for mediation. In this case, we have to modify the “AndroidManifest.xml” file. For Google AdMob and Google Ad Manager, we just use the “addMetaDataItemToMainApplication” function from “AndroidConfig.Manifest” (line 97 and 104). For Meta Audience Network (and other networks that I don’t use) it’s a little bit more complicated. Basically, we have to create a new XML file that has to be copied in the project and referenced in the manifest. I couldn’t find a proper function that could add the needed attribute, so I made that modification manually editing the object (line 111 onward). Again, check the comments in the code, and this section of the docs.

iOS

For iOS, we have to put some stuff in “infoPlist” (lines 24–46), and use the “withDangerousMod” function (lines 141–166) to modify the “Podfile” with references to the AppLovin SDK and the adapters.

As mentioned before, MAX comes with a Ruby script that takes care of everything else. We just have to download it, put it inside our project and find a way to make EAS Build execute it at the right time. Fortunately, it’s very easy with the “npm hooks” that Expo provides. We create a new JS file somewhere (my path is “./src/__build/eas-build-post-install-script.js”) and then we add this script to the “package.json”:

"eas-build-post-install": "node ./src/__build/eas-build-post-install-script.js"

It will be executed automatically at build time.

The content of the file is:

Please make sure to edit the “sourcePath” variable accordingly.

This script just copies the Ruby file to the project root and then runs it.

Conclusion

The configuration of AppLovin MAX itself is complete. Now you can import the JS package in your project and use it as per documentation.

In order to use all this new stuff in development, we cannot use “Expo Go”: we have to build a custom development client. It’s actually very easy to do, just follow the instructions.

At least one last thing is missing, though: if we are actually using Meta Audience Network, we need some methods of the SDK (“setDataProcessingOptions” and “setAdvertiserTrackingEnabled”) that are still NOT available via JavaScript. We must create a custom native module in order to expose those methods.

I can write another article about that, if people are interested! It turned out to be actually quite simple, after I understood the easiest way to auto-link the module to the project.

That’s all for now!