Package Health Score

66 / 100

security
No known security issues
popularity
Limited
maintenance
Sustainable
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
0.5.0	\|	10/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.4.1	\|	08/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.3.2	\|	05/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.2.1	\|	01/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.1.4	\|	12/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

BSD-3-Clause

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (77)

GitHub Stars: 0
Forks: 0
Contributors: 1

Direct Usage Popularity

The npm package adrop-ads-react-native receives a total of 77 downloads a week. As such, we scored adrop-ads-react-native popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package adrop-ads-react-native, we found that it has been starred ? times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: Yes
Contributors: 1
Funding: No

This project has seen only 10 or less contributors.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 0
Open PR: 0
Last Release: 1 month ago
Last Commit: 30 days ago

Further analysis of the maintenance status of adrop-ads-react-native based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that adrop-ads-react-native demonstrates a positive version release cadence with at least one new version released in the past 3 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >= 18.0.0

Age: 1 year
Dependencies: 1 Direct
Versions: 14
Install Size: 338 kB
Dist-tags: 1
# of Files: 291
Maintainers: 1
TS Typings: No

adrop-ads-react-native has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

adrop-ads-react-native

Adrop Ads SDK for React Native

npm

Prerequisites

Install your preferred editor or IDE.
Make sure that your app meets the following requirements:
- React Native
  - 0.71 or higher
- Android
  - Targets API level 23 (M) or higher
  - Uses Android 6.0 or higher
    - minSdkVersion 23
  - Uses Jetpack (AndroidX), which includes meeting these version requirements:
    - com.android.tools.build:gradle v7.3.0 or later
    - compileSdkVersion 33
  - Kotlin 1.7.10 or higher
- iOS
  - ios 13.0
  - swift 5.0
React Native - Setting up the development environment
Sign into Adrop using your email or Google account.

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.

Go to the Adrop console.
In the center of the project app page, click the React icon button to launch the setup workflow.
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.
Enter other app information: App nickname.
- App nickname: An internal, convenience identifier that is only visible to you in the Adrop console
Click Register app and then Android and Apple apps will be created respectively.

Step 3: Add a Adrop configuration file

Android

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

iOS

Download adrop_service.json to obtain your Adrop Apple platforms config file.
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

From your React Native project directory, run the following command to install the plugin.
```
npm install adrop-ads-react-native
```
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.
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.

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:

From the left navigation menu, select Ad Units.
Select Create Ad unit to bring up the ad unit builder.
Enter an Ad unit name, then select your app (iOS or Android) and Ad format (Banner, Interstitial, or Rewarded).
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

Banner

Initialize AdropBanner with Ad unit ID, then load ad.

const YourComponent: React.FC = () =&gt; {
    const ref = useRef(null)

    const reload = () =&gt; {
        ref.current?.load()
    }

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Interstitial Ad (Class)</summary>

Step 1: (Optional) Construct event listener
```js
const listener = {
        onAdReceived: (ad: AdropInterstitialAd) =&gt;
            console.log(`Adrop interstitial Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropInterstitialAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropInterstitialAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        ...
    }

Step 2: Display an interstitial ad

const YourComponent: React.FC = () =&gt; {
    const [interstitialAd, setInterstitialAd] = useState(null)

    useEffect(() =&gt; {
        let adropInterstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')
        adropInterstitialAd.listener = listener
        adropInterstitialAd.load()
        setInterstitialAd(adropInterstitialAd)
    }, []);

    const show = () =&gt; {
        if (interstitialAd?.isLoaded) {
            interstitialAd?.show()
        } else {
            console.log('interstitial ad is loading...')
        }
    }

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Interstitial Ad (Hook)</summary>

```js
const YourComponent: React.FC = () =&gt; {
    const { load, show, isLoaded } =
        useAdropInterstitialAd('YOUR_UNIT_ID')

    const handleShow = () =&gt; {
        if (isLoaded) show()
    }

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Rewarded Ad (Class)</summary>

Step 1: (Optional) Construct event listener
```js
const listener = {
        onAdReceived: (ad: AdropRewardedAd) =&gt;
            console.log(`Adrop rewarded Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropRewardedAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropRewardedAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        onAdEarnRewardHandler: (ad: AdropRewardedAd, type: number, amount: number) =&gt;
            console.log(`Adrop rewarded Ad earn rewards: ${ad.unitId}, ${type}, ${amount}`),
        ...
    }

Step 2: Display a rewarded ad

const YourComponent: React.FC = () =&gt; {
    const [rewardedAd, setRewardedAd] = useState(null)

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

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

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Rewarded Ad (Hook)</summary>

```js
const YourComponent: React.FC = () =&gt; {
    const { load, show, isLoaded } =
        useAdropRewardedAd('YOUR_UNIT_ID')

    const handleShow = () =&gt; {
        if (isLoaded) show()
    }

    return (
        </details>


<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Rewarded Ad (Class)</summary>

Step 1: (Optional) Construct event listener
```js
const listener = {
        onAdReceived: (ad: AdropRewardedAd) =&gt;
            console.log(`Adrop rewarded Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropRewardedAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropRewardedAd, errorCode: string) =&gt;
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        onAdEarnRewardHandler: (ad: AdropRewardedAd, type: number, amount: number) =&gt;
            console.log(`Adrop rewarded Ad earn rewards: ${ad.unitId}, ${type}, ${amount}`),
        ...
    }

Step 2: Display a rewarded ad

const YourComponent: React.FC = () =&gt; {
    const [rewardedAd, setRewardedAd] = useState(null)

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

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

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Popup Ad</summary>

```js
const YourComponent: React.FC = () =&gt; {
    const [popupAd, setPopupAd] = useState()
    const [isLoaded, setIsLoaded] = useState(false)

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

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

    return (
        </details>

<br>

<details>
<summary style="font-size: 16px; font-weight: bold;">Native Ad</summary>

```js
const YourComponent: React.FC = () =&gt; {
    const [nativeAd, setNativeAd] = useState()
    const [isLoaded, setIsLoaded] = useState(false)

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

    const nativeAdView = (
        
            

            
            

            
        
    )

    return (
        </details>

adrop-ads-react-native dependencies

@typescript-eslint/typescript-estree

FAQs

What is adrop-ads-react-native?

Adrop Ads. Visit Snyk Advisor to see a full health score report for adrop-ads-react-native, including popularity, security, maintenance & community analysis.

Is adrop-ads-react-native popular?

The npm package adrop-ads-react-native receives a total of 77 weekly downloads. As such, adrop-ads-react-native popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is adrop-ads-react-native well maintained?

We found indications that adrop-ads-react-native maintenance is sustainable demonstrating some project activity. We saw a total of 1 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is adrop-ads-react-native safe to use?

The npm package adrop-ads-react-native was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 November-2024, at 15:35 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP