import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import {
AdropListener,
AdropPopupAd,
AdropPopupAdColors,
} from 'adrop-ads-react-native'
const PopupAdExample: React.FC = () => {
const [popupAd, setPopupAd] = useState<AdropPopupAd>()
const [isLoaded, setIsLoaded] = useState(false)
const [isShown, setIsShown] = useState(false)
const [errorCode, setErrorCode] = useState('')
// 광고 이벤트 리스너 설정
const listener: AdropListener = useMemo(() => {
return {
onAdReceived: (ad: AdropPopupAd) => {
setIsLoaded(true)
console.log('팝업 광고 수신됨', ad.unitId)
setErrorCode('')
},
onAdFailedToReceive: (_: AdropPopupAd, error: any) => {
console.log('팝업 광고 수신 실패', error)
setErrorCode(error)
},
onAdClicked: (ad: AdropPopupAd) => {
console.log('팝업 광고 클릭됨', ad.unitId)
},
onAdDidPresentFullScreen: (ad: AdropPopupAd) => {
console.log('팝업 광고 표시됨', ad.unitId)
},
onAdDidDismissFullScreen: (ad: AdropPopupAd) => {
console.log('팝업 광고 닫힘', ad.unitId)
},
onAdFailedToShowFullScreen: (_: AdropPopupAd, error: any) => {
setErrorCode(error)
},
} as AdropListener
}, [])
// 팝업 광고 초기화
const initialize = useCallback((unitId: string) => {
const adropPopupAd = new AdropPopupAd(unitId)
adropPopupAd.listener = listener
setPopupAd((prev) => {
prev?.destroy()
return adropPopupAd
})
}, [listener])
useEffect(() => {
initialize('YOUR_POPUP_UNIT_ID')
// 컴포넌트 언마운트 시 정리
return () => {
popupAd?.destroy()
}
}, [initialize])
const load = () => popupAd?.load()
const show = () => {
popupAd?.show()
setIsShown(true)
}
const reset = () => {
initialize('YOUR_POPUP_UNIT_ID')
setIsLoaded(false)
setIsShown(false)
setErrorCode('')
}
return (
<View style={styles.container}>
<Button title="팝업 광고 로드" onPress={load} />
<Button
disabled={!isLoaded}
title="팝업 광고 표시"
onPress={show}
/>
<Button
disabled={!(errorCode || isShown)}
title="팝업 광고 리셋"
onPress={reset}
/>
{errorCode && (
<Text style={styles.error}>에러: {errorCode}</Text>
)}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
gap: 16,
},
error: {
color: 'red',
marginTop: 10,
textAlign: 'center',
},
})
export default PopupAdExample
