Offerwall SDK Integration: React Native Complete Tutorial

·

Offerwall Placement Strategy

This guide covers react native offerwall SDK for mobile developers and publishers — with practical, technical detail you can apply today.

Offerwall SDK Integration: React Native Complete Tutorial

Why React Native Developers Need Offerwall Monetization

React Native powers over 3 million mobile apps. Yet most rewarded monetization platforms don’t offer a native React Native SDK — ironSource, Tapjoy, Digital Turbine, and AppLovin all lack React Native support. This tutorial walks through the complete integration using Perkox — the only platform supporting React Native natively.


Architecture

The integration works through native modules bridging JavaScript to native SDKs: React Native JS → NativeModules → Android (Kotlin) + iOS (Swift) → Perkox SDK → Offerwall → Postback → Your Server.


Step 1: JavaScript Service

import { NativeModules, NativeEventEmitter } from 'react-native';
const { PerkoxModule } = NativeModules;
export const showOfferwall = (appId, sdkKey, playerId) => {
  PerkoxModule.showOfferwall(appId, sdkKey, playerId);
};
export const onReward = (callback) => {
  const emitter = new NativeEventEmitter(PerkoxModule);
  return emitter.addListener('onReward', callback);
};

Step 2: Android Native Module

class PerkoxModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
  override fun getName() = "PerkoxModule"
  @ReactMethod
  fun showOfferwall(appId: String, sdkKey: String, playerId: String) {
    val offerwall = PerkoxOfferwall.create(appId, sdkKey, playerId)
    offerwall.onReward = { reward ->
      val event = Arguments.createMap()
      reward.forEach { (k, v) -> event.putString(k, v?.toString()) }
      reactApplicationContext.getJSModule(RCTDeviceEventEmitter::class.java).emit("onReward", event)
    }
    offerwall.onClose = { reactApplicationContext.getJSModule(RCTDeviceEventEmitter::class.java).emit("onClose", null) }
    currentActivity?.runOnUiThread { offerwall.launch(currentActivity!!) }
  }
}

Step 3: iOS Native Module

@objc(PerkoxModule)
class PerkoxModule: RCTEventEmitter {
  @objc func showOfferwall(_ appId: String, sdkKey: String, playerId: String) {
    DispatchQueue.main.async {
      let offerwall = PerkoxOfferwall.create(appId: appId, sdkKey: sdkKey, playerId: playerId)
      offerwall.onReward = { reward in self.sendEvent(withName: "onReward", body: reward) }
      offerwall.onClose = { self.sendEvent(withName: "onClose", body: nil) }
      if let vc = RCTPresentedViewController() { offerwall.launch(viewController: vc) }
    }
  }
  override func supportedEvents() -> [String]! { ["onReward", "onClose"] }
}

Step 4: Postback Configuration

In the Perkox Publisher Dashboard, set your postback URL. Never grant rewards based on SDK callbacks alone — always use server-side postbacks with duplicate click_id prevention.


FAQ

Do I need this alongside AdMob? They serve different purposes — AdMob for passive CPM, Perkox for active CPA/CPI.
Can I use Expo? Requires ejecting from Expo managed workflow or using expo-dev-client.


Get started with Perkox →

Start monetizing your app with Perkox.

One SDK. Android, iOS, React Native, Flutter, Unity. A premium reward layer for your non-paying users — live in about 10 minutes.

Related articles