import React, { useCallback, useEffect, useMemo, useState } from 'react'
import {
AdropBodyView,
AdropHeadLineView,
AdropMediaView,
AdropNativeAd,
AdropNativeAdView,
AdropProfileLogoView,
AdropProfileNameView,
} from 'adrop-ads-react-native'
import type { AdropNativeAdListener } from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'
import {
Button,
Dimensions,
ScrollView,
StyleSheet,
Text,
View,
Linking,
Platform,
} from 'react-native'
const NativeAdExample: React.FC = () => {
const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
const [isLoaded, setIsLoaded] = useState(false)
const [errorCode, setErrorCode] = useState('')
// URL開きハンドラー
const openUrl = useCallback((url: string) => {
Linking.openURL(url).catch((err) =>
console.error('Failed to open URL:', err)
)
}, [])
// 広告イベントリスナー
const listener = useMemo(
(): AdropNativeAdListener => ({
onAdReceived: (ad) => {
console.log('広告受信:', ad.unitId, ad.properties)
setIsLoaded(true)
setErrorCode('')
},
onAdFailedToReceive: (_, error) => {
console.log('広告受信失敗:', error)
setErrorCode(error)
},
onAdClicked: (ad) => {
console.log('広告クリック:', ad.unitId)
},
onAdImpression: (ad) => {
console.log('広告露出:', ad.unitId)
},
}),
[]
)
// 広告初期化
const initialize = useCallback(
(unitId: string) => {
const adropNativeAd = new AdropNativeAd(unitId)
adropNativeAd.listener = listener
setNativeAd((prev) => {
prev?.destroy()
return adropNativeAd
})
setIsLoaded(false)
setErrorCode('')
},
[listener]
)
// コンポーネントマウント時に広告初期化
useEffect(() => {
initialize('YOUR_UNIT_ID')
// コンポーネントアンマウント時に広告解放
return () => {
nativeAd?.destroy()
}
}, [])
// 広告ロード
const load = () => nativeAd?.load()
// 広告ビューレンダリング
const adView = useMemo(() => {
if (!isLoaded) return null
return (
<AdropNativeAdView
nativeAd={nativeAd}
style={{
...styles.adContainer,
width: Dimensions.get('window').width,
}}
>
{/* プロフィール領域 */}
<View style={styles.rowContainer}>
<AdropProfileLogoView style={styles.profileLogo} />
<AdropProfileNameView style={styles.profileName} />
</View>
{/* 広告タイトル */}
<AdropHeadLineView style={styles.headline} />
{/* 広告本文 */}
<AdropBodyView style={styles.body} />
{/* バックフィル広告または非ビデオ広告はAdropMediaView、ビデオ広告はWebView */}
{!nativeAd?.isVideoAd || nativeAd?.isBackfilled ? (
// バックフィル広告または非ビデオ広告：AdropMediaView使用
<AdropMediaView style={styles.media} />
) : (
// ビデオ広告：WebViewでレンダリング
<WebView
source={{
html: nativeAd?.properties?.creative ?? '',
}}
style={styles.media}
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
allowsInlineMediaPlayback={true}
scrollEnabled={false}
onNavigationStateChange={(event) => {
// Android WebViewイベント
if (
event.url &&
event.url !== 'about:blank' &&
!event.url.startsWith('data:')
) {
openUrl(event.url)
}
}}
onOpenWindow={(event) => {
// iOS WebViewイベント（window.open）
if (event.nativeEvent?.targetUrl) {
openUrl(event.nativeEvent.targetUrl)
}
}}
/>
)}
</AdropNativeAdView>
)
}, [isLoaded, nativeAd, openUrl])
return (
<ScrollView>
<View style={styles.container}>
{/* 広告ロードボタン */}
<View style={styles.button}>
<Button title="広告ロード" onPress={load} />
</View>
{/* 広告ビュー */}
{adView}
{/* エラー表示 */}
{errorCode && (
<Text style={styles.error}>
Error: {errorCode}
</Text>
)}
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
paddingVertical: 5,
paddingHorizontal: 16,
},
button: {
marginVertical: 8,
},
adContainer: {
paddingHorizontal: 16,
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginBottom: 8,
},
profileLogo: {
width: 32,
height: 32,
marginRight: 8,
borderRadius: 16,
},
profileName: {
fontSize: 14,
fontWeight: 'bold',
color: 'black',
},
headline: {
fontSize: 16,
fontWeight: 'bold',
color: 'black',
marginTop: 8,
},
body: {
fontSize: 14,
color: 'black',
marginVertical: 8,
},
media: {
width: '100%',
height: 360,
marginTop: 8,
},
error: {
color: 'red',
marginVertical: 8,
},
})
export default NativeAdExample
