React Native offerwall SDK. Expo ready, TypeScript included.
Open the Moonetix offerwall as a native screen from React Native or Expo. The package brings the Android and iOS SDKs, works with the New Architecture, and ships its own TypeScript types.
- 0.77+React Native
- 53+Expo SDK
- TSTypes included
import { Moonetix } from '@moonetix/react-native-offerwall';
Moonetix.init('YOUR_APP_ID');
// When the user taps Earn
Moonetix.open(token);Go live in four steps.
Copy the code, replace the placeholders with the values from your dashboard under Apps, your app, Integration, and test before you launch.
-
Install the package
Add the Moonetix registry for the @moonetix scope, then install the package and rebuild your app. For Expo, add the config plugin and use a development build, because Expo Go cannot load native code.
Terminal# .npmrc, next to package.json @moonetix:registry=https://moonetix.com/npm/ npm install @moonetix/react-native-offerwall cd ios && pod installapp.json{ "expo": { "plugins": ["@moonetix/react-native-offerwall"] } }.yarnrc.ymlnpmScopes: moonetix: npmRegistryServer: "https://moonetix.com/npm" -
Add a token endpoint to your server
Your app never holds the API key. When a user taps Earn, your app asks your server for a session, and your server asks Moonetix for a single-use token for that signed-in user. A token works once, for 10 minutes.
session.php<?php // POST /api/moonetix/session: a fresh token for the signed-in user $user = current_user(); if (!$user) { http_response_code(401); exit; } $key = getenv('MOONETIX_API_KEY'); $ch = curl_init('https://api.moonetix.com/v1/session'); curl_setopt_array($ch, [ CURLOPT_POST => true, CURLOPT_POSTFIELDS => http_build_query(['user_id' => (string)$user->id]), CURLOPT_RETURNTRANSFER => true, CURLOPT_TIMEOUT => 10, CURLOPT_HTTPHEADER => ['Authorization: Bearer ' . $key], ]); $data = json_decode((string)curl_exec($ch), true); $code = (int)curl_getinfo($ch, CURLINFO_RESPONSE_CODE); header('Content-Type: application/json'); if ($code === 201 && !empty($data['token'])) { echo json_encode(['token' => $data['token']]); exit; } http_response_code($code === 403 ? 403 : 503); echo json_encode(['error' => 'offerwall_unavailable']);session.js// POST /api/moonetix/session: a fresh token for the signed-in user app.post('/api/moonetix/session', requireLogin, async (req, res) => { const r = await fetch('https://api.moonetix.com/v1/session', { method: 'POST', headers: { Authorization: `Bearer ${process.env.MOONETIX_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ user_id: String(req.user.id) }), signal: AbortSignal.timeout(10000), }); const data = await r.json().catch(() => ({})); if (r.status === 201 && data.token) { return res.json({ token: data.token }); } const status = r.status === 403 ? 403 : 503; res.status(status).json({ error: 'offerwall_unavailable' }); });session.py# POST /api/moonetix/session: a fresh token for the signed-in user @app.post("/api/moonetix/session") @login_required def moonetix_session(): key = os.environ["MOONETIX_API_KEY"] r = requests.post( "https://api.moonetix.com/v1/session", data={"user_id": str(current_user.id)}, headers={"Authorization": f"Bearer {key}"}, timeout=10, ) data = r.json() if r.status_code == 201 and data.get("token"): return {"token": data["token"]} status = 403 if r.status_code == 403 else 503 return {"error": "offerwall_unavailable"}, status -
Open the offerwall
Call init once with the App ID from your dashboard, then open with a fresh token. addListener returns a subscription, so remove it when your screen goes away.
import { Moonetix } from '@moonetix/react-native-offerwall'; Moonetix.init('YOUR_APP_ID'); useEffect(() => { const closed = Moonetix.addListener('closed', refreshBalance); const failed = Moonetix.addListener('error', (error) => { console.warn(`${error.code}: ${error.message}`); }); return () => { closed.remove(); failed.remove(); }; }, []); async function openOfferwall() { const url = 'https://your-server.example/api/moonetix/session'; const res = await fetch(url, { method: 'POST' }); const { token } = await res.json(); Moonetix.open(token); } -
Credit rewards with the postback
Every reward reaches your server as a signed postback. Check the hash, add the reward once per transaction ID, and take it back if a later postback reverses it. Failed postbacks are retried up to 5 times.
Dashboard, Postback tabhttps://yoursite.com/postback?user={user_id}&tx={transaction_id}&status={status}&reward={reward}&hash={hash}postback.php<?php $tx = $_GET['tx'] ?? ''; $userId = $_GET['user'] ?? ''; $reward = $_GET['reward'] ?? ''; $status = $_GET['status'] ?? ''; $secret = getenv('MOONETIX_POSTBACK_SECRET'); $expected = hash_hmac('sha256', "$tx:$userId:$reward:$status", $secret); if (!hash_equals($expected, $_GET['hash'] ?? '')) { http_response_code(403); exit; } if ($status === '1') { credit_once($userId, $tx, $reward); // once per transaction ID } elseif ($status === '2') { reverse_if_credited($userId, $tx, $reward); } http_response_code(200);postback.jsconst crypto = require('crypto'); app.get('/postback', (req, res) => { const { tx, user, reward, status, hash } = req.query; const secret = process.env.MOONETIX_POSTBACK_SECRET; const expected = crypto.createHmac('sha256', secret) .update(`${tx}:${user}:${reward}:${status}`) .digest('hex'); const valid = typeof hash === 'string' && hash.length === expected.length && crypto.timingSafeEqual(Buffer.from(hash), Buffer.from(expected)); if (!valid) return res.sendStatus(403); if (status === '1') creditOnce(user, tx, reward); // once per transaction ID if (status === '2') reverseIfCredited(user, tx, reward); res.sendStatus(200); });postback.pyimport hmac, hashlib, os from flask import request, abort @app.get("/postback") def postback(): a = request.args parts = [a.get(k, "") for k in ("tx", "user", "reward", "status")] msg = ":".join(parts) secret = os.environ["MOONETIX_POSTBACK_SECRET"].encode() expected = hmac.new(secret, msg.encode(), hashlib.sha256).hexdigest() if not hmac.compare_digest(expected, a.get("hash", "")): abort(403) if a.get("status") == "1": credit_once(a["user"], a["tx"], a["reward"]) # once per transaction ID elif a.get("status") == "2": reverse_if_credited(a["user"], a["tx"], a["reward"]) return "", 200
- Castle MergeReach level 10+1,500
- FitTrackStart a free trial+2,000
- Word RushPlay 3 days in a row+450
- Budget PalSet up your first budget+800
What your users see
A native screen over your app, with your title and colors, your currency, and every reward confirmed by a postback.
What the package handles for you
- Native SDKs included
Android Gradle and iOS CocoaPods are wired up for you. Run pod install and rebuild.
- Expo config plugin
Add one line to app.json, then prebuild or start an EAS Build.
- TypeScript types
Typed init, open, events, and error codes, the same names the native SDKs use.
- Offers open in the right place
Store offers open in Google Play or the App Store, so installs are tracked correctly.
- No key in your bundle
Your JavaScript bundle holds only the App ID. Sessions come from your server and work once.
- No advertising ID
The SDK does not use the advertising identifier and does not track users across apps.
Test it, then launch.
Everything you need to check before real users see your offerwall, with the tools built into your dashboard.
Open as a test user
In Integration status on the Integration tab, open your offerwall as the user owner-test. Test visits are not counted as users.
Run it on a real device
Build for Android or iOS and open the offerwall from your Earn button with a fresh token each time.
Send a test postback
Choose the user, status, and payout, and see exactly what your server answered, with the response code and time. Test transaction IDs start with test_.
Test from a normal connection
VPNs, proxies, Tor, and cloud networks are blocked, so test on home Wi-Fi or mobile data, in a country where offers run.
Launch checklist
0 of 11 ready
Ready to launch. Your progress is saved in this browser.
Common errors, fixed fast.
What you might see while you integrate the React Native SDK, what causes it, and the fix.
INVALID_APP_IDThe value passed to init is not the App ID. Passing the API key here is the most common mistake.
FixCopy the 24-character App ID again from the Integration tab.
INVALID_TOKENThe app passed something other than the token, or a token created with the API key of another app.
FixPass only the token field, which starts with sst_, and use the App ID and API key of the same app.
TOKEN_EXPIRED_OR_USEDThe token is older than 10 minutes or was already used, for example kept from an earlier tap.
FixCreate a new token for every open, right when the user taps Earn.
NOT_INITIALIZEDopen was called before init.
FixCall Moonetix.init once when your app starts.
UNSUPPORTED on a phoneThe native part is not in the build, for example in Expo Go or before a rebuild.
FixBuild the app again or use an Expo development build. A Metro reload does not add native code.
Gradle cannot find com.moonetixYour settings.gradle does not let projects add repositories.
FixAdd the Moonetix Maven repository to settings.gradle.
403 from /v1/sessionapp_not_live means the app is paused or your account is not active. user_blocked means we blocked this user.
FixDo not show the offerwall. For app_not_live, check your notifications.
VPN or Proxy detectedThe device is on a VPN, a proxy, or a cloud network, where offers cannot be tracked.
FixTest on a normal home or mobile connection, in a country where offers run.
Postback log shows 403 or 404Your script rejected the postback, or the URL is wrong.
FixOpen the URL from the log in a browser and check your hash code.
Postback log shows a timeoutYour script takes longer than 6 seconds to answer.
FixAnswer with 200 first, and run slow work in the background.
Postback log shows 301 or 302Your URL redirects, for example from http to https.
FixUse the final URL. Postbacks do not follow redirects.
No match. See the full list in the docs or contact us.
At a glance
- React Native
- 0.77 or newer, New Architecture supported
- Expo
- SDK 53 or newer, with a development build
- Package
- @moonetix/react-native-offerwall 2.0.0 from moonetix.com/npm
- Android
- Kotlin 2.0 or newer, the default in these versions
- Language
- TypeScript and JavaScript
- Price
- Free for approved publishers
Other integrations
- WebsiteA link, an iframe, or a floating Earn button. No SDK needed.
- Offers APIGet the offers as JSON and show them in your own design.
- Android SDKA native offerwall screen for Kotlin and Java apps.
- iOS SDKA native offerwall for Swift, SwiftUI, and Objective-C.
- Unity SDKRewarded offers for Android and iOS games, from C#.
- Flutter SDKOne Dart plugin for Android and iOS.
- All integrationsCompare them side by side.
React Native questions
What developers ask before they add the React Native SDK.
Stuck on something? Contact us
Which React Native and Expo versions are supported?
React Native 0.77 or newer, or Expo SDK 53 or newer. The package works with the New Architecture and, on React Native 0.77 to 0.81, with the old architecture too.
Does it work in Expo Go?
No. Expo Go cannot load native code, so Moonetix.isSupported is false there. Add the config plugin and test with a development build or an EAS Build.
Is the package on the public npm registry?
It is in the Moonetix npm registry. Add @moonetix:registry=https://moonetix.com/npm/ to your .npmrc, or the npmScopes entry for Yarn 2 and newer, then install it as usual.
Are TypeScript types included?
Yes. Types for init, open, events, and error codes ship with the package.
How do I reward users?
Your server receives a signed postback for every reward and credits the user once per transaction ID. App events can be faked on a device, so use them only to refresh your UI.
Where does my API key go?
Only on your server. Your app holds the App ID, and your server creates a single-use session token for the signed-in user.
Turn your traffic into earnings.
Create a free publisher account and earn from every offer your users complete on your website, app, game, or community.