Display rewarded ad on React Native

Display a rewarded ad

Class

// (Optional) Construct event listener
const listener = {
        onAdReceived: (ad: AdropRewardedAd) =>
            console.log(`Adrop rewarded Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropRewardedAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropRewardedAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        onAdEarnRewardHandler: (ad: AdropRewardedAd, type: number, amount: number) =>
            console.log(`Adrop rewarded Ad earn rewards: ${ad.unitId}, ${type}, ${amount}`),
        ...
    }
    
const YourComponent: React.FC = () => {
    const [rewardedAd, setRewardedAd] = useState<AdropRewardedAd>(null)

    useEffect(() => {
        let adropRewardedAd = new AdropRewardedAd('YOUR_UNIT_ID')
        adropRewardedAd.listener = listener
        adropRewardedAd.load()
        setRewardedAd(adropRewardedAd)
    }, []);

    const show = () => {
        if (rewardedAd?.isLoaded) {
            rewardedAd?.show()
        } else {
            console.log('rewarded ad is loading...')
        }
    }

    return (
        <View>
            <Button title="display ad" onPress={show}/>
        </View>
    )
}

Hook

const YourComponent: React.FC = () => {
    const { load, show, isLoaded, reset } =
        useAdropRewardedAd('YOUR_UNIT_ID')

    const handleShow = () => {
        if (isLoaded) show()
    }

    return (
        <View>
            <Button title="load ad" onPress={load}/>
            <Button title="display ad" onPress={handleShow}/>
        </View>
    )
}

Destroy rewarded ad

Class

useEffect(() => {
    return () => {
        rewardedAd.destroy()
    }
}, [])

Hook

useEffect(() => {
    return () => {
        reset()
    }
}, [])