Display popup ad on React Native
Display a popup ad
Pass AdropPopupAdColors parameter to customize colors
// (Optional) Construct event listener
const listener: AdropListener = {
onAdReceived: (ad: AdropPopupAd) =>
console.log(`Adrop popup Ad load with unitId ${ad.unitId}!`),
onAdFailedToReceive: (ad: AdropPopupAd, errorCode: string) =>
console.log(`error in ${ad.unitId} while load: ${errorCode}`),
onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode: string) =>
console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
...
}
const YourComponent: React.FC = () => {
const [popupAd, setPopupAd] = useState<AdropPopupAd>(null)
useEffect(() => {
let closeTextColor = your_color // option hex or rgba
let hideForTodayTextColor = '#123' // option hex or rgba
let backgroundColor: string = 'rgba(1,2,3,1)' // option hex or rgba
let colors: AdropPopupAdColors = {
closeTextColor, hideForTodayTextColor, backgroundColor
}
let adropPopupAd = new AdropPopupAd('YOUR_UNIT_ID', colors)
adropPopupAd.listener = listener
adropPopupAd.load()
setPopupAd(adropPopupAd)
}, []);
const show = () => {
if (popupAd?.isLoaded) {
popupAd?.show()
} else {
console.log('popupAd ad is loading...')
}
}
return (
<View>
<Button title="display ad" onPress={show}/>
</View>
)
}
Destroy AdropPopupAd
popupAd.destroy()
Last updated