Skip to main content
Version: 6.x.x

Get Started

This documentation will guide you through the steps to integrate and initialize the BlueStack React Native Plugin into your application.

BlueStack SDK React Native Plugin provides functionalities for monetizing your mobile application: from premium sales with rich media, video and innovative formats, it facilitates all standard display formats. BlueStack SDK React Native Plugin can be used for both iOS and Android apps.

info

Looking for a working reference? Our public demo app on GitHub — azerion/azerion-inapp-demo-reactnative — showcases banner, interstitial, rewarded, MREC, native, overlay, and app-open ads against the public test App ID 3167505.

Prerequisites

RequirementMinimum
React Native0.80 or higher
AndroidAPI level 21+, JDK 17+, Build Tools 35.0.0
iOS13.0+, Xcode 15.1+

ExoPlayer / Media3 compatibility (Android)

On Android, the BlueStack SDK uses AndroidX Media3 ExoPlayer for video ad playback. React Native apps that also play video — for example via react-native-video or any library built on ExoPlayer/Media3 — can run into dependency conflicts.

  • BlueStack SDK v6.0.0+ bundles androidx.media3:media3-exoplayer:1.9.2
  • If your app (or one of its libraries) uses ExoPlayer/Media3, align it to a compatible version to avoid runtime conflicts
  • Resolve conflicts by aligning your Media3 version with the SDK's, or by adding a Gradle resolution strategy in android/app/build.gradle
tip

If you hit AbstractMethodError or similar ExoPlayer-related runtime errors, verify that every ExoPlayer/Media3 dependency in your Android build is aligned to a compatible version. You can inspect the dependency tree with ./gradlew :app:dependencies from the android/ folder.

Configure your app

Installation

Install the BlueStack React Native Plugin from npm:

npm install @azerion/bluestack-sdk-react-native

Import components

import {
BluestackSDK,
BannerAdView,
BannerAdType,
InterstitialAdManager,
RewardedAdManager,
} from "@azerion/bluestack-sdk-react-native";

To include targeting options, import the following components:

import {
AdPreference,
ProviderType,
GenderType,
LocationType,
} from "@azerion/bluestack-sdk-react-native";

Add mediation partners

Mediation adapters are added as native dependencies on each platform. We recommend including all adapters by default so the SDK can serve from every available demand source — omit an adapter only if you have a specific reason not to ship it.

info

Recommended default: include every mediation adapter. The snippets below add the full bundle for each platform.

:::tip Keeping the packages in sync You don't need to track a separate version number for each package. The npm plugin, the Android mediation adapters, and the iOS adapter pods all belong to the same v6 release line and are designed to work together:

  • npm: npm install @azerion/bluestack-sdk-react-native always pulls the latest compatible plugin.
  • Android: the snippet below pins core and each adapter to exact, mutually-compatible versions.
  • iOS: the pods below are pinned to exact, matching versions for a reproducible set. :::

Add the repositories and adapter dependencies to your app-level build.gradle:

build.gradle
repositories {
google()
mavenCentral()
maven { url 'https://packagecloud.io/smartadserver/android/maven2' }
}

dependencies {
implementation 'com.azerion:bluestack-mediation-bidding:6.0.5.0'
implementation 'com.azerion:bluestack-mediation-google:6.0.0.1'
implementation 'com.azerion:bluestack-mediation-equativ:6.0.0.2'
}

For Google Mobile Ads, also add your AdMob App ID to AndroidManifest.xml:

AndroidManifest.xml
<manifest>
<application>
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
</application>
</manifest>

For per-partner setup, Swift Package Manager, ProGuard rules, and the compatibility matrix, see Android Supported Networks and iOS Supported Networks.

Initialize the BlueStack SDK

Before loading any ads, initialize the BlueStack SDK by calling BluestackSDK.initialize() with the appId parameter. You can optionally pass a second enableDebug parameter (defaults to false) to enable debug logs.

info

You have to register your app in the BlueStack console to get an App Id for your app.

Here's an example of how to initialize the SDK:

BluestackSDK.initialize(appId, true)
.then(() => {
console.log("BluestackSdk initialized");
})
.catch((e) => {
console.log("BluestackSdk failed to initialize: " + e);
});

Here's an example of how to check the SDK initialization status (bluestack-sdk-react-native >= 1.2.0):

const isInitialized = BluestackSDK.isInitialized();
console.log("SDK is initialized:", isInitialized);

Note: If the BlueStack SDK fails to initialize, the initialize promise will be rejected with the corresponding error.