npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

adrop-ads-react-native

v0.5.0

Published

Adrop Ads

Downloads

242

Readme

adrop-ads-react-native

Adrop Ads SDK for React Native

npm

Prerequisites

 

Step 1: Create a Adrop project

Before you can add Adrop to your React Native app, you need to create a Adrop project to connect to your app.

Step 2: Register your app with Adrop

To use Adrop in your React Native app, you need to register your app with your Adrop project. Registering your app is often called "adding" your app to your project.

Note

Make sure to enter the package name that your app is actually using. The package name value is case-sensitive, and it cannot be changed for this Adrop Android app after it's registered with your Adrop project.

  1. Go to the Adrop console.
  2. In the center of the project app page, click the React icon button to launch the setup workflow.
  3. Enter your app's package name in the React package name field.
    • A package name uniquely identifies your app on the device and in the Google Play Store or App Store.
    • A package name is often referred to as an application ID.
    • Be aware that the package name value is case-sensitive, and it cannot be changed for this Adrop React app after it's registered with your Adrop project.
  4. Enter other app information: App nickname.
    • App nickname: An internal, convenience identifier that is only visible to you in the Adrop console
  5. Click Register app and then Android and Apple apps will be created respectively.

Step 3: Add a Adrop configuration file

Android

  1. Download adrop_service.json to obtain your Adrop Android platforms config file.
  2. Move your config file into your assets directory. android/app/src/main/assets/adrop_service.json

iOS

  1. Download adrop_service.json to obtain your Adrop Apple platforms config file.
  2. Move your config file into the root of your Xcode project. If prompted, select to add the config file to all targets.

Step 4: Add Adrop library to your your app

  1. From your React Native project directory, run the following command to install the plugin.

    npm install adrop-ads-react-native
  2. Altering CocoaPods to use frameworks Open the file ./ios/Podfile and add this line inside your targets

    use_frameworks!

    Note

    adrop-ads-react-native uses use_frameworks, which has compatibility issues with Flipper.

    Flipper: use_frameworks is not compatible with Flipper. You need to disable Flipper by commenting out the :flipper_configuration line in your Podfile.

  3. Autolinking & rebuilding

    Once the above steps have been completed, the React Native Adrop library must be linked to your project and your application needs to be rebuilt.

    Users on React Native 0.60+ automatically have access to "autolinking", requiring no further manual installation steps. To automatically link the package, rebuild your project:

    # Android apps
    npx react-native run-android
    
    # iOS apps
    cd ios/
    pod install --repo-update
    cd ..
    npx react-native run-ios

Step 5: Initialize Adrop in your app

The final step is to add initialization code to your application.

  1. Import the Adrop library and initialize.
    import { Adrop } from 'adrop-ads-react-native';
    
    // ..
    Adrop.initialize(production);

(Optional) Troubleshooting

# Add this line to your Podfile
use_frameworks!

# ...
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|

    #...
    # Add this line to your Podfile
    config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

Creating Ad units

To create a new Ad unit:

  1. From the left navigation menu, select Ad Units.
  2. Select Create Ad unit to bring up the ad unit builder.
  3. Enter an Ad unit name, then select your app (iOS or Android) and Ad format (Banner, Interstitial, or Rewarded).
  4. Select Create to save your Ad unit.

Ad unit ID

The Ad unit’s unique identifier to reference in your code. This setting is read-only.

Note These are unit ids for test

  • PUBLIC_TEST_UNIT_ID_320_50
  • PUBLIC_TEST_UNIT_ID_375_80
  • PUBLIC_TEST_UNIT_ID_320_100
  • PUBLIC_TEST_UNIT_ID_INTERSTITIAL
  • PUBLIC_TEST_UNIT_ID_REWARDED
  • PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
  • PUBLIC_TEST_UNIT_ID_POPUP_CENTER
  • PUBLIC_TEST_UNIT_ID_NATIVE

Display Ads

Initialize AdropBanner with Ad unit ID, then load ad.

const YourComponent: React.FC = () => {
    const ref = useRef(null)

    const reload = () => {
        ref.current?.load()
    }

    return (
        <View>
            <Button title="reload" onPress={reload}/>
            <AdropBanner
                ref={ref}
                unitId={unitId}
                style={{
                    width: Dimensions.get('window').width,
                    height: 80
                }}
            />
        </View>
    )
}

Step 1: (Optional) Construct event listener

const listener = {
        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}`),
        ...
    }

Step 2: Display an interstitial ad

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>
    )

}

AdropInterstitialAd must be destroyed of when access to it is no longer needed.

interstitialAd.destroy()
const YourComponent: React.FC = () => {
    const { load, show, isLoaded } =
        useAdropInterstitialAd('YOUR_UNIT_ID')

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

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

Step 1: (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}`),
        ...
    }

Step 2: Display a rewarded ad

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>
    )

}

AdropRewardedAd must be destroyed of when access to it is no longer needed.

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

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

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

Step 1: (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}`),
        ...
    }

Step 2: Display a rewarded ad

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>
    )

}

AdropRewardedAd must be destroyed of when access to it is no longer needed.

rewardedAd.destroy()
const YourComponent: React.FC = () => {
    const [popupAd, setPopupAd] = useState<AdropPopupAd>()
    const [isLoaded, setIsLoaded] = useState(false)

    useEffect(() => {
        let customColors: AdropPopupAdColors = {}
        let adropPopupAd = new AdropPopupAd(unitId, customColors)
        adropPopupAd.listener = {
            onAdReceived: (ad: AdropPopupAd) => {
                setIsLoaded(true)
            }
        }
        adropPopupAd.load()
        setPopupAd((prev) => {
            prev?.destroy()
            return adropPopupAd
        })
    }, [])

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

    return (
        <View>
            <Button title="display ad" onPress={show}/>
        </View>
    )
}
const YourComponent: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)

    useEffect(() => {
        let adropNativeAd = new AdropNativeAd(unitId)
        adropNativeAd.listener = {
            onAdReceived: (ad) => {
                setIsLoaded(true)
            },
        }
        adropNativeAd.load()
        setNativeAd((prev) => {
            prev?.destroy()
            return adropNativeAd
        })
    }, [])

    const nativeAdView = (
        <AdropNativeAdView
            nativeAd={nativeAd}
            style={...}
        >
            <View>
                <AdropProfileLogoView style={...}/>
                <AdropProfileNameView style={...}/>
            </View>

            <AdropHeadLineView  style={...}/>
            <AdropBodyView  style={...}/>

            <AdropMediaView style={...}/>
        </AdropNativeAdView>
    )

    return (
        <View>
            <Button title="load ad" onPress={load}/>
            {isLoaded && nativeAdView}
        </View>
    )
}