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