Rewarded video in React & React Native.

The AppLixir SDK is the same single <script> for every framework — there is no npm package and no native module. This guide shows the idiomatic way to call it from a React web app (a reusable hook + component), the framework recipes for Vite, Next.js, and CRA, and the one rule that makes a React Native integration actually fill.

Typical CPM

$4+/mille

8× standard display

Integration

1 hook

zero dependencies

Fill rate · avg.

94%

across 31 partners

The SDK is a browser SDK: it needs a real page origin, cookies, and a working TCF consent handshake. In React web you already have all three. In React Native you get them only when the WebView loads a real https:// URL — that is the single most common reason ads fail to fill on mobile, and it has its own step below.

What's new in v6.1

Server-side header bidding runs on every impression — a real-time auction across our demand stack before any ad-server fallback. Existing integrations get the CPM lift by pinning the SDK URL to v6.1.0.

What you'll build

1. Load the SDK once

   A single CDN script exposes window.initializeAndOpenPlayer. Add it in index.html or let the hook inject it.

2. Wrap it in a hook

   useRewardedAd returns a ready flag and a showAd() promise that resolves only when the user watched the ad through.

3. Trigger from a user gesture

   Open the player on a click or tap. Browsers block ads that aren't user-initiated.

4. Grant rewards from your server

   Use the local complete event for optimistic UI; let the server-side web callback be the source of truth for persistent rewards.

Pick your path

• React on the web → start with the Quick start, then lift the useRewardedAd hook.
• Vite, Next.js, or CRA → the Framework recipes cover SDK loading and env vars for each.
• React Native → go straight to React Native (WebView) — the origin rule there is mandatory.

tip

Already know React? The Quick start gets you to a working ad in about three minutes.

Examples & AI prompts on GitHub

Prefer to copy working code — or have an AI agent do the integration for you?

• Working examples: applixir-integration/examples/react and /examples/react-native.
• Copy-paste AI prompts: paste prompts/react.md or prompts/react-native.md into Claude Code, Codex, or Cursor, fill in your API key, and it implements the integration for you.