리워드

• AdWhale SDK를 프로젝트에 추가 해야합니다.

• Reward Ad용으로 발급받은 Ad Unit ID를 사용합니다.

• 광고를 요청하기 전에 SDK 초기화를 진행합니다.

React-Native

1. RewardAdModule.m

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#import <AdWhaleSDK/AdWhaleSDK.h>
#import <React/RCTUtils.h>

@interface RewardAdModule : RCTEventEmitter <RCTBridgeModule, AdWhaleRewardDelegate>
@property (nonatomic, strong) AdWhaleRewardAd *rewardAd;
@end

@implementation RewardAdModule

RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents {
    return @[
        @"onRewardAdLoaded",
        @"onRewardAdFailedToLoad",
        @"onRewardAdFailedToShow",
        @"onRewardAdWillPresent",
        @"onRewardAdDismissed",
        @"onRewardAdEarned"
    ];
}

RCT_EXPORT_METHOD(loadAd:(NSString *)adUnitId
                  resolve:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
    dispatch_async(dispatch_get_main_queue(), ^{
        self.rewardAd = [[AdWhaleRewardAd alloc] init];
        self.rewardAd.rewardDelegate = self;
        [self.rewardAd load:adUnitId];
        if (resolve) resolve(nil);
    });
}

RCT_EXPORT_METHOD(showAd:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
    dispatch_async(dispatch_get_main_queue(), ^{
        UIViewController *rootVC = RCTPresentedViewController();
        if (rootVC) {
            [self.rewardAd show:rootVC];
            if (resolve) resolve(nil);
        } else {
            if (reject) reject(@"ERROR", @"Root view controller not found", nil);
        }
    });
}

// MARK: - AdWhaleRewardDelegate
- (void)adDidReceiveRewardAd:(AdWhaleRewardAd *)ad {
    self.rewardAd = ad;
    [self sendEventWithName:@"onRewardAdLoaded" body:nil];
}
- (void)adDidFailToReceiveRewardAdWithError:(NSError *)error {
    [self sendEventWithName:@"onRewardAdFailedToLoad" body:@{@"error": error.localizedDescription ?: @""}];
}
- (void)ad:(AdWhaleRewardAd *)ad didFailToPresentRewardAdWithError:(NSError *)error {
    [self sendEventWithName:@"onRewardAdFailedToShow" body:@{@"error": error.localizedDescription ?: @""}];
}
- (void)adWillPresentRewardAd:(AdWhaleRewardAd *)ad {
    [self sendEventWithName:@"onRewardAdWillPresent" body:nil];
}
- (void)adDidDismissRewardAd:(AdWhaleRewardAd *)ad {
    [self sendEventWithName:@"onRewardAdDismissed" body:nil];
}
- (void)adDidEarnReward:(AdWhaleReward *)reward {
    [self sendEventWithName:@"onRewardAdEarned" body:@{
        @"amount": reward.amount ?: @0,
        @"type": reward.type ?: @""
    }];
}

@end 

2. React Native 연동 코드

RewardAd.tsx

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, NativeEventEmitter, NativeModules } from 'react-native';

const { RewardAdModule } = NativeModules;

const REWARD_AD_UNIT_ID = '리워드 광고 AD_UNIT_ID 입력';

export default function RewardAd() {
  const [rewardLoaded, setRewardLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(RewardAdModule);
    
    const subscriptions = [
      eventEmitter.addListener('onRewardAdLoaded', () => {
        console.log(`[adwhale] [sample UI] 보상형 광고 로드 성공`);
        setRewardLoaded(true);
        setIsLoading(false);
      }),
      eventEmitter.addListener('onRewardAdFailedToLoad', (event) => {
        console.error(`[adwhale] [sample UI] 보상형 광고 로드 실패: ${event.error}`);
        setRewardLoaded(false);
        setIsLoading(false);
      }),
      eventEmitter.addListener('onRewardAdFailedToShow', (event) => {
        console.error(`[adwhale] [sample UI] 보상형 광고 표시 실패: ${event.error}`);
        setRewardLoaded(false);
      }),
      eventEmitter.addListener('onRewardAdWillPresent', () => {
        console.log(`[adwhale] [sample UI] 보상형 광고가 표시될 예정`);
      }),
      eventEmitter.addListener('onRewardAdDismissed', () => {
        console.log(`[adwhale] [sample UI] 보상형 광고가 닫힘`);
        setRewardLoaded(false);
      }),
      eventEmitter.addListener('onRewardAdEarned', (event) => {
        console.log(`[adwhale] [sample UI] 보상 획득: amount=${event.amount}, type=${event.type}`);
      })
    ];

    return () => {
      subscriptions.forEach(subscription => subscription.remove());
    };
  }, []);

  const loadReward = async () => {
    try {
      setIsLoading(true);
      await RewardAdModule.loadAd(REWARD_AD_UNIT_ID);
    } catch (error) {
      console.error(`[adwhale] [sample UI] 보상형 광고 로드 실패: ${error}`);
      setIsLoading(false);
    }
  };

  const showReward = async () => {
    try {
      await RewardAdModule.showAd();
    } catch (error) {
      console.error(`[adwhale] [sample UI] 보상형 광고 표시 실패: ${error}`);
    }
  };

  return (
    <View style={styles.section}>
      <Text style={styles.title}>보상형 광고</Text>
      <Button
        title="보상형 광고 로드"
        onPress={loadReward}
        disabled={isLoading || rewardLoaded}
      />
      <Button
        title="보상형 광고 표시"
        onPress={showReward}
        disabled={!rewardLoaded}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  section: {
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
}); 

App.tsx

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import RewardAd from './src/components/RewardAd';

export default function App() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.mainViewStyle}>
        <View style={styles.contentViewStyle}>
            <RewardAd />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white'
  },
  mainViewStyle: {
    flex: 1,
    marginTop: 50
  },
  contentViewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'                
  },
}); 

Expo