Rewarded Ads

Rewarded ads let users opt-in to watch a video ad in exchange for an in-app reward (extra lives, premium content, virtual currency, etc.).

Each ad format uses a Zone ID to identify the ad placement. Zone IDs are configured in the Empower dashboard.

Note: All ad status listeners are optional. The SDK handles ad loading and display automatically. Use listeners only if you need to track ad states for analytics, UI updates, or custom logic.

---

Quick Start

import {
  loadRewardedAd,
  showRewarded,
  addEventListener,
  EmpowerAdsEvents,
  AdStatus,
} from '@empower-nokta/react-native-mobile-ads';

const ZONE_ID = { android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' };

// Step 1: Preload the rewarded ad
loadRewardedAd(ZONE_ID);

// Step 2: Listen for reward
const unsubscribe = addEventListener(
  EmpowerAdsEvents.REWARDED_STATUS,
  (event) => {
    if (event.status === AdStatus.REWARDED) {
      // User earned the reward — grant it here
      grantReward();
    }
  }
);

// Step 3: Show when user taps "Watch Ad" button
function onWatchAdPressed() {
  showRewarded(ZONE_ID);
}

---

Loading Rewarded Ads

import { loadRewardedAd } from '@empower-nokta/react-native-mobile-ads';

// With a single zone ID
loadRewardedAd('YOUR_ZONE_ID');

// With per-platform zone IDs
loadRewardedAd({ android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' });

The function returns a Promise<boolean> that resolves to true when the ad starts loading.

---

Showing Rewarded Ads

import { showRewarded } from '@empower-nokta/react-native-mobile-ads';

function showRewardedAd() {
  showRewarded('YOUR_ZONE_ID')
    .then((shown) => {
      if (!shown) {
        console.log('Rewarded ad not ready yet');
      }
    })
    .catch((err) => {
      console.log('Failed to show rewarded ad:', err);
    });
}

---

Listening to Rewarded Status (Optional)

import {
  addEventListener,
  EmpowerAdsEvents,
  AdStatus,
  loadRewardedAd,
} from '@empower-nokta/react-native-mobile-ads';

const ZONE_ID = 'YOUR_ZONE_ID';

const unsubscribe = addEventListener(
  EmpowerAdsEvents.REWARDED_STATUS,
  (event) => {
    switch (event.status) {
      case AdStatus.READY:
        // Ad is ready to be shown — enable "Watch Ad" button
        break;
      case AdStatus.REWARDED:
        // User earned the reward — grant it here
        grantReward();
        break;
      case AdStatus.COMPLETE_PLAYING:
        // Video finished playing
        break;
      case AdStatus.SKIPPED:
        // User closed without completing — no reward
        break;
      case AdStatus.FAILED:
        // Ad failed to load — disable "Watch Ad" button
        break;
      case AdStatus.USED:
        // Ad was closed — reload for next time
        loadRewardedAd(ZONE_ID);
        break;
    }
  }
);

// Clean up
unsubscribe();

Important: Only grant rewards when the status is REWARDED. The SKIPPED status means the user closed the ad without completing it — do not grant a reward in this case.

---

Complete Example

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';
import {
  loadRewardedAd,
  showRewarded,
  addEventListener,
  EmpowerAdsEvents,
  AdStatus,
} from '@empower-nokta/react-native-mobile-ads';

const ZONE_ID = { android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' };

export default function StoreScreen() {
  const [coins, setCoins] = useState(0);
  const [adReady, setAdReady] = useState(false);

  useEffect(() => {
    // Preload rewarded ad
    loadRewardedAd(ZONE_ID);

    const unsubscribe = addEventListener(
      EmpowerAdsEvents.REWARDED_STATUS,
      (event) => {
        switch (event.status) {
          case AdStatus.READY:
            setAdReady(true);
            break;
          case AdStatus.REWARDED:
            setCoins((prev) => prev + 100);
            Alert.alert('Reward Earned!', 'You received 100 coins!');
            break;
          case AdStatus.FAILED:
            setAdReady(false);
            break;
          case AdStatus.USED:
          case AdStatus.SKIPPED:
            setAdReady(false);
            loadRewardedAd(ZONE_ID); // Reload for next time
            break;
        }
      }
    );

    return () => unsubscribe();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.coins}>Coins: {coins}</Text>
      <Button
        title={adReady ? 'Watch Ad for 100 Coins' : 'Loading...'}
        disabled={!adReady}
        onPress={() => showRewarded(ZONE_ID)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  coins: { fontSize: 32, fontWeight: 'bold', marginBottom: 20 },
});

---

Status Flow

loadRewardedAd() → INITIALIZING → READY → showRewarded() → SHOWN → User watches → REWARDED → USED
                        ↓                                                  ↓
                     FAILED                                         User skips → SKIPPED → USED

---

Best Practices

• Wait for SDK readiness — Load rewarded ads after the SDK is ready. Subscribe to the SDK_READY event and load once it fires.
• Clear value exchange — Clearly communicate what reward users will receive before showing the ad
• User-initiated — Only show when users actively choose to watch (e.g., tapping a "Watch Ad" button)
• Grant rewards on REWARDED only — Only grant rewards on REWARDED status, not SKIPPED or USED
• Reload after use — Load a new ad after each display
• Disable button while loading — Use the READY / FAILED status to toggle the "Watch Ad" button

---

Ad Status Reference

Status	Description
INITIALIZING	Ad is loading
READY	Ad is loaded and ready to display
FAILED	Ad failed to load
SHOWN	Ad is being displayed
COMPLETE_PLAYING	Video finished playing
REWARDED	User earned the reward
SKIPPED	User closed without completing
USED	Ad was shown and closed