feat: rewarded ad sample app

.circleci/config.yml

@@ -206,6 +206,92 @@ jobs:
             export GRADLE_OPTS="-Xmx4096m -Dorg.gradle.daemon=false -Dorg.gradle.jvmargs=\"-Xmx4096m\""
             ./gradlew assembleDebug
 
+  adstester_ios:
+    <<: *base-mac-job-xcode-16
+    steps:
+      - checkout
+      - rn/ios_simulator_start:
+          device: iPhone 16
+      - revenuecat/install-mise-tools:
+          tools: node@22.14.0,ruby
+      # react-native-purchases resolves to ../../src directly,
+      # and src/*.ts has non-peer dependencies that only live in the
+      # root node_modules, not adsTester's own. Needed for both the JS
+      # bundle step below and adsTester's own yarn install/typecheck.
+      - install-dependencies-ios-build
+      - restore_cache:
+          keys:
+            - adstester-yarn-v1-{{ checksum "examples/adsTester/yarn.lock" }}
+      - run:
+          name: Yarn Install (adsTester)
+          working_directory: examples/adsTester
+          command: yarn install
+      - save_cache:
+          key: adstester-yarn-v1-{{ checksum "examples/adsTester/yarn.lock" }}
+          paths:
+            - examples/adsTester/.yarn/cache
+      - run:
+          name: Bundle JS (validates react-native-purchases resolves under Metro)
+          working_directory: examples/adsTester
+          command: |
+            npx react-native bundle --entry-file index.js --platform ios --dev true --bundle-output /tmp/adstester-ios.bundle
+      - revenuecat/install-gem-mac-dependencies:
+          cache-version: adstester-v1
+      - run:
+          name: Pod Install
+          working_directory: examples/adsTester/ios
+          command: bundle exec pod install --repo-update
+      - run:
+          name: Build iOS
+          command: |
+            xcodebuild -workspace examples/adsTester/ios/adsTester.xcworkspace -scheme adsTester -configuration Debug -destination 'platform=iOS Simulator,name=iPhone 16' -derivedDataPath ~/DerivedData -UseModernBuildSystem=YES
+
+  adstester_android:
+    executor:
+      name: rn/linux_android
+      resource_class: xlarge
+      build_image_version: latest
+    steps:
+      - checkout
+      - revenuecat/install-mise-tools:
+          tools: node@22.14.0,java
+      # See the comment on the same step in adstester_ios: adsTester's own
+      # yarn install alone isn't enough, since react-native-purchases
+      # resolves straight to ../../src, whose real dependencies live in root
+      # node_modules.
+      - install-dependencies:
+          machine: "unix"
+      - restore_cache:
+          keys:
+            - adstester-yarn-v1-{{ checksum "examples/adsTester/yarn.lock" }}
+      - run:
+          name: Yarn Install (adsTester)
+          working_directory: examples/adsTester
+          command: yarn install
+      - save_cache:
+          key: adstester-yarn-v1-{{ checksum "examples/adsTester/yarn.lock" }}
+          paths:
+            - examples/adsTester/.yarn/cache
+      - run:
+          name: Typecheck
+          working_directory: examples/adsTester
+          command: yarn build
+      - run:
+          name: Lint
+          working_directory: examples/adsTester
+          command: yarn lint
+      - run:
+          name: Bundle JS (validates react-native-purchases resolves under Metro)
+          working_directory: examples/adsTester
+          command: |
+            npx react-native bundle --entry-file index.js --platform android --dev true --bundle-output /tmp/adstester-android.bundle --assets-dest /tmp/adstester-android-assets
+      - run:
+          name: Build Android app
+          working_directory: examples/adsTester/android
+          command: |
+            export GRADLE_OPTS="-Xmx4096m -Dorg.gradle.daemon=false -Dorg.gradle.jvmargs=\"-Xmx4096m\""
+            ./gradlew assembleDebug
+
   expo_web:
     executor:
       name: rn/linux_js
@@ -400,6 +486,8 @@ workflows:
       - expo_android
       - expo_ios
       - expo_web
+      - adstester_ios
+      - adstester_android
       - run-maestro-e2e-tests-ios:
           context:
             - maestro-e2e-tests

examples/adsTester/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

examples/adsTester/.gitignore

@@ -0,0 +1,34 @@
+# OSX
+.DS_Store
+
+# node
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Metro
+.metro-health-check*
+
+# Xcode / CocoaPods
+ios/build/
+ios/Pods/
+ios/Podfile.lock
+ios/.xcode.env.local
+*.xcuserstate
+xcuserdata/
+
+# Android/IntelliJ
+android/build/
+android/app/build/
+android/app/.cxx/
+android/.gradle
+android/local.properties
+*.iml
+*.hprof
+*.keystore
+!debug.keystore
+
+# TypeScript / bundles
+*.jsbundle
+
+.yarn/

examples/adsTester/App.tsx

@@ -0,0 +1,184 @@
+import 'react-native-get-random-values';
+import React, {useCallback, useEffect, useState} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Purchases, {
+  RewardVerificationResult,
+  VerifiedReward,
+} from 'react-native-purchases';
+import mobileAds, {
+  AdEventType,
+  RewardedAdEventType,
+  RewardedInterstitialAd,
+  TestIds,
+} from 'react-native-google-mobile-ads';
+import {v4 as uuidv4} from 'uuid';
+
+// Your RevenueCat public SDK key (a Test Store key works while developing).
+const API_KEY = 'YOUR_REVENUECAT_API_KEY';
+
+// Google's official test rewarded-interstitial ad unit (per-platform) — safe
+// to commit and always fills. Swap for your own AdMob unit (with its
+// server-side verification URL pointed at RevenueCat) to grant a real reward.
+const AD_UNIT_ID = TestIds.REWARDED_INTERSTITIAL;
+
+function describeReward(reward: VerifiedReward): string {
+  switch (reward.type) {
+    case 'virtual_currency':
+      return `+${reward.amount} ${reward.code}`;
+    case 'entitlement':
+      return `entitlement "${reward.identifier}"`;
+    case 'no_reward':
+      return 'no reward';
+    case 'unsupported_reward':
+      return 'unsupported reward';
+  }
+}
+
+export default function App() {
+  const [status, setStatus] = useState('Configuring…');
+  const [impressionId, setImpressionId] = useState<string | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG);
+      Purchases.configure({apiKey: API_KEY});
+      await mobileAds().initialize();
+      setStatus('Ready. Tap to load a rewarded ad.');
+      setReady(true);
+    })();
+  }, []);
+
+  const loadAndShow = useCallback(async () => {
+    setReady(false);
+    setResult(null);
+    setStatus('Generating verification token…');
+
+    // react-native-google-mobile-ads doesn't expose AdMob's response id before
+    // the ad loads (SSV options must be set at request time), so assign your own
+    // unique impression ID. Reuse it for your RevenueCat ad-tracking calls to
+    // correlate the reward with the impression.
+    const id = uuidv4();
+    setImpressionId(id);
+
+    let token;
+    try {
+      token = await Purchases.generateRewardVerificationToken(id);
+    } catch (e) {
+      setStatus(`❌ Failed to generate verification token: ${e}`);
+      setReady(true);
+      return;
+    }
+
+    // Forward the token to AdMob's server-side verification options.
+    const ad = RewardedInterstitialAd.createForAdRequest(AD_UNIT_ID, {
+      serverSideVerificationOptions: {
+        userId: token.appUserID,
+        customData: token.customData,
+      },
+    });
+
+    const unsubLoaded = ad.addAdEventListener(
+      RewardedAdEventType.LOADED,
+      () => {
+        setStatus('Ad loaded. Showing…');
+        ad.show();
+      },
+    );
+
+    let finished = false;
+
+    const cleanup = () => {
+      unsubLoaded();
+      unsubEarned();
+      unsubError();
+      unsubClosed();
+    };
+
+    // When the user earns the reward, poll RevenueCat for the verified result.
+    const unsubEarned = ad.addAdEventListener(
+      RewardedAdEventType.EARNED_REWARD,
+      async () => {
+        setStatus('Reward earned. Verifying…');
+        try {
+          const res: RewardVerificationResult =
+            await Purchases.pollRewardVerification(token.clientTransactionId);
+          if (res.failed || !res.reward) {
+            setResult('❌ verification failed');
+          } else {
+            const extra =
+              res.moreRewards.length > 0
+                ? ` (+${res.moreRewards.length} more)`
+                : '';
+            setResult(`✅ ${describeReward(res.reward)}${extra}`);
+          }
+          setStatus('Done');
+        } finally {
+          finished = true;
+          setReady(true);
+        }
+      },
+    );
+
+    const unsubError = ad.addAdEventListener(AdEventType.ERROR, error => {
+      setStatus(`❌ Ad error: ${error.message}`);
+      finished = true;
+      setReady(true);
+      cleanup();
+    });
+
+    const unsubClosed = ad.addAdEventListener(AdEventType.CLOSED, () => {
+      if (!finished) {
+        finished = true;
+        setReady(true);
+      }
+      cleanup();
+    });
+
+    setStatus('Loading ad…');
+    ad.load();
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Rewarded Ad Verification</Text>
+        <Text style={styles.status}>{status}</Text>
+        {impressionId != null && (
+          <Text style={styles.impression}>impressionId: {impressionId}</Text>
+        )}
+        {result != null && <Text style={styles.result}>{result}</Text>}
+        <TouchableOpacity
+          style={[styles.button, !ready && styles.buttonDisabled]}
+          disabled={!ready}
+          onPress={loadAndShow}>
+          <Text style={styles.buttonText}>Load & show rewarded ad</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {flex: 1, backgroundColor: '#fff'},
+  content: {flex: 1, justifyContent: 'center', padding: 24, gap: 16},
+  title: {fontSize: 22, fontWeight: '600', textAlign: 'center'},
+  status: {fontSize: 16, textAlign: 'center', color: '#333'},
+  impression: {fontSize: 13, textAlign: 'center', color: '#888'},
+  result: {fontSize: 18, textAlign: 'center', fontWeight: '600'},
+  button: {
+    backgroundColor: '#f2545b',
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  buttonDisabled: {opacity: 0.4},
+  buttonText: {color: '#fff', fontSize: 16, fontWeight: '600'},
+});