Display interstitial ad on React Native
Display an interstitial ad
// (Optional) Construct event listener
const listener: AdropListener = {
onAdReceived: (ad: AdropInterstitialAd) =>
console.log(`Adrop interstitial Ad load with unitId ${ad.unitId}!`),
onAdFailedToReceive: (ad: AdropInterstitialAd, errorCode: string) =>
console.log(`error in ${ad.unitId} while load: ${errorCode}`),
onAdFailedToShowFullScreen: (ad: AdropInterstitialAd, errorCode: string) =>
console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
...
}
const YourComponent: React.FC = () => {
const [interstitialAd, setInterstitialAd] = useState<AdropInterstitialAd>(null)
useEffect(() => {
let adropInterstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')
adropInterstitialAd.listener = listener
adropInterstitialAd.load()
setInterstitialAd(adropInterstitialAd)
}, []);
const show = () => {
if (interstitialAd?.isLoaded) {
interstitialAd?.show()
} else {
console.log('interstitial ad is loading...')
}
}
return (
<View>
<Button title="display ad" onPress={show}/>
</View>
)
}
const YourComponent: React.FC = () => {
const { load, show, isLoaded, reset } =
useAdropInterstitialAd('YOUR_UNIT_ID')
const handleShow = () => {
if (isLoaded) show()
}
return (
<View>
<Button title="load ad" onPress={load}/>
<Button title="display ad" onPress={handleShow}/>
</View>
)
}
Destroy AdropInterstitialAd
interstitialAd.destroy()
reset()
Last updated