네이티브 광고

import { useRef, useState } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
// import문은 위의 탭 참조
import { NativeAdView, TitleView, AdvertiserView, BodyView, CallToActionView, IconView, OptionsView, MediaView, StarRatingView } from 'react-native-daro-m';
import type { AdInfo, AdLoadFailedInfo, NativeAdViewHandler } from 'react-native-daro-m';
import { AppButton } from './components/AppButton';

type Props = {
  adUnitId: string;
  isInitialized: boolean;
  log: (str: string) => void;
  isNativeAdShowing: boolean;
  setIsNativeAdShowing: (showing: boolean) => void;
};

const NATIVE_AD_MEDIAVIEW_WIDTH = 340;
const NATIVE_AD_MEDIAVIEW_HEIGHT = 200;

export const NativeAdViewExample = ({ adUnitId, isInitialized, log, isNativeAdShowing, setIsNativeAdShowing }: Props) => {
  const [isNativeAdLoading, setIsNativeAdLoading] = useState(false);

  // Ref for NativeAdView
  const nativeAdViewRef = useRef<NativeAdViewHandler>(null);

  return (
    <>
      <AppButton
        style={styles.button}
        title={isNativeAdShowing ? 'Hide Native Ad' : 'Show Native Ad'}
        enabled={isInitialized}
        onPress={() => {
          setIsNativeAdShowing(!isNativeAdShowing);
        }}
      />

      {isNativeAdShowing && (
        <View style={styles.container}>
          <NativeAdView
            adUnitId={adUnitId}
            ref={nativeAdViewRef}
            style={styles.nativeAd}
            onAdLoaded={(adInfo: AdInfo) => {
              log('Native ad loaded from ' + adInfo);
              setIsNativeAdLoading(false);
            }}
            onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
              log('Native ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
              setIsNativeAdLoading(false);
            }}
            onAdClicked={(adInfo: AdInfo) => {
              log('Native ad clicked on ' + adInfo.adUnitId);
            }}
            onAdImpressionRecorded={(adInfo: AdInfo) => {
              log('Native ad impression recorded');
            }}
          >
            <View style={styles.assetContainer}>
              <View style={styles.assetUpperContainer}>
                <IconView style={styles.icon} />
                <View style={styles.assetTitleContainer}>
                  <TitleView style={styles.title} />
                </View>
              </View>
              <BodyView style={styles.body} />
              <MediaView style={{ ...styles.mediaView }} />
              <CallToActionView style={styles.callToAction} />
            </View>
          </NativeAdView>
          <AppButton
            style={styles.button}
            title={'RELOAD'}
            enabled={!isNativeAdLoading}
            onPress={() => {
              setIsNativeAdLoading(true);
              nativeAdViewRef.current?.loadAd();
            }}
          />
          <AppButton
            style={styles.button}
            title={'CLOSE'}
            enabled={!isNativeAdLoading}
            onPress={() => {
              setIsNativeAdShowing(!isNativeAdShowing);
            }}
          />
        </View>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  button: {
    margin: 5,
    backgroundColor: '#0583aa',
  },
  container: {
    position: 'absolute', // must have a view behind for touch event propagation
    top: '30%',
    width: '100%',
    padding: 10,
    backgroundColor: '#0583aa',
    zIndex: 1,
    elevation: Platform.OS === 'android' ? 1 : 0,
  },
  nativeAd: {
    padding: 10,
    width: '100%',
    backgroundColor: '#EFEFEF',
  },
  icon: {
    width: 48,
    height: 48,
  },
  title: {
    width: 260,
    fontSize: 16,
    textAlign: 'left',
    fontWeight: 'bold',
    color: 'black',
  },
  body: {
    padding: 8,
    fontSize: 14,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  mediaView: {
    alignSelf: 'center',
    width: NATIVE_AD_MEDIAVIEW_WIDTH,
    height: NATIVE_AD_MEDIAVIEW_HEIGHT,
    maxWidth: NATIVE_AD_MEDIAVIEW_WIDTH,
    maxHeight: NATIVE_AD_MEDIAVIEW_HEIGHT,
    zIndex: 1,
    elevation: Platform.OS === 'android' ? 1 : 0,
  },
  callToAction: {
    marginTop: 10,
    padding: 8,
    width: '100%',
    fontSize: 18,
    textAlign: 'center',
    fontWeight: 'bold',
    textTransform: 'uppercase',
    color: 'black',
    backgroundColor: '#2d545e',
  },
  assetContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  assetUpperContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  assetTitleContainer: {
    marginLeft: 4,
    flexDirection: 'column',
    flexGrow: 1,
  },
});

export default NativeAdViewExample;