Skip to main content

Overview

The Adrop React Native SDK allows you to easily integrate various ad formats into your React Native app.

Supported Ad Formats

FormatDescription
Banner AdsRectangular ads displayed in a portion of the screen
Native AdsAds that blend naturally with app content
Interstitial AdsFull-screen ads
Rewarded AdsFull-screen ads that provide rewards
Popup AdsAds displayed in popup format
Splash AdsAds displayed on app launch screen

Requirements

React Native

  • React Native 0.71 or higher

Android

  • API level 23 (Android 6.0) or higher
  • compileSdkVersion 34
  • Kotlin 2.1.0 or higher
  • Gradle 8.7 or higher

iOS

  • iOS 13.0 or higher
  • Swift 5.0 or higher

Installation

1. Install Package

npm install adrop-ads-react-native

2. Android Setup

Add the backfill ad repository to android/settings.gradle.kts.
android/settings.gradle.kts
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://artifact.bytedance.com/repository/pangle") }
    }
}
Add the Kotlin plugin and backfill dependency to android/app/build.gradle.
android/app/build.gradle
apply plugin: "kotlin-android"

dependencies {
    implementation 'io.adrop:adrop-ads-backfill:1.8.0'
}
Add the backfill App ID to android/app/src/main/AndroidManifest.xml.
android/app/src/main/AndroidManifest.xml
<manifest>
    <application>
        <!-- Backfill App ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>
Please contact Adrop to get your App ID.

3. iOS Setup

Modify ios/Podfile.
ios/Podfile
use_frameworks!

target 'YourApp' do
  # Other dependencies...

  # Backfill ad SDK
  pod 'adrop-ads-backfill'
end
Install pods.
cd ios && pod install --repo-update && cd ..

4. Info.plist Configuration

Add the following settings to ios/YourApp/Info.plist for backfill ads.
  • GADApplicationIdentifier: App ID for backfill ads
  • SKAdNetworkItems: Required for ad conversion tracking on iOS 14+
Info.plist
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>

<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4pfyvq9l8r.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>5a6flpkh64.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ludvb6z3bs.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cp8zw746q7.skadnetwork</string>
    </dict>
</array>
Please contact Adrop for the full SKAdNetworkItems list and App ID.

Initialization

Initialize the SDK when your app starts. This is typically done in App.tsx or index.js.
App.tsx
import { Adrop } from 'adrop-ads-react-native';

// Initialize on app start
Adrop.initialize(false); // false: test mode, true: production mode

Initialization Options

Adrop.initialize(
  production,        // boolean: whether production mode
  targetCountries,   // string[]?: target country code array (optional)
  useInAppBrowser    // boolean?: whether to use iOS in-app browser (optional)
);
Parameters
ParameterTypeRequiredDescription
productionbooleanYtrue: production mode, false: test mode
targetCountriesstring[]NCountry codes to display ads (e.g., ['KR', 'US'])
useInAppBrowserbooleanNWhether to use in-app browser on iOS (default: false)
Example
// Basic initialization (test mode)
Adrop.initialize(false);

// Production mode + specific country targeting
Adrop.initialize(true, ['KR', 'JP', 'US']);

// Production mode + iOS in-app browser
Adrop.initialize(true, undefined, true);

Theme Settings

Set the UI theme for ads.
import { Adrop, AdropTheme } from 'adrop-ads-react-native';

// Set theme
Adrop.setTheme(AdropTheme.auto);  // Follow system settings
Adrop.setTheme(AdropTheme.light); // Light mode
Adrop.setTheme(AdropTheme.dark);  // Dark mode
ThemeDescription
AdropTheme.autoAutomatically switch based on system settings
AdropTheme.lightLight mode
AdropTheme.darkDark mode

User Identifier Settings

Set the user identifier (UID) for targeted advertising.
import { Adrop } from 'adrop-ads-react-native';

Adrop.setUID('user_123');
UID is transmitted after being hashed with SHA-256. Do not directly pass personal information such as email or phone number.

Test Unit IDs

Use the following test unit IDs during development and testing.
FormatTest Unit ID
Banner (320x50)PUBLIC_TEST_UNIT_ID_320_50
Banner (320x100)PUBLIC_TEST_UNIT_ID_320_100
NativePUBLIC_TEST_UNIT_ID_NATIVE
InterstitialPUBLIC_TEST_UNIT_ID_INTERSTITIAL
RewardedPUBLIC_TEST_UNIT_ID_REWARDED
Popup (Bottom)PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
Popup (Center)PUBLIC_TEST_UNIT_ID_POPUP_CENTER
SplashPUBLIC_TEST_UNIT_ID_SPLASH
// Banner ad test
const testBannerUnitId = 'PUBLIC_TEST_UNIT_ID_320_50';
Be sure to replace with actual unit IDs before production deployment.

Error Codes

Error codes that may occur in the SDK.
Error CodeDescription
AdropErrorCode.networkNetwork error
AdropErrorCode.internalInternal error
AdropErrorCode.initializeSDK initialization error
AdropErrorCode.invalidUnitInvalid unit ID
AdropErrorCode.notTargetCountryNot a target country
AdropErrorCode.inactiveInactive ad
AdropErrorCode.adNoFillNo ads to display
AdropErrorCode.adDuplicatedDuplicate load request
AdropErrorCode.adLoadingLoading in progress
AdropErrorCode.adEmptyEmpty ad
AdropErrorCode.adShownAd already shown
AdropErrorCode.adHideForTodayAd hidden for today
AdropErrorCode.adLandscapeUnsupportedLandscape mode not supported
AdropErrorCode.backfillNoFillBackfill ad not available
import { AdropErrorCode } from 'adrop-ads-react-native';

// Error handling example
if (errorCode === AdropErrorCode.adNoFill) {
  console.log('No ads available to display.');
}

Troubleshooting

iOS Build Error

If you encounter Swift version compatibility issues, add the following to the post_install block in ios/Podfile.
ios/Podfile
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

Android Build Error

If the Kotlin version doesn’t match, check the Kotlin version in android/build.gradle.
android/build.gradle
buildscript {
    ext {
        kotlinVersion = '2.1.0'
    }
}

Next Steps

Banner Ads

Implement banner ads

Native Ads

Implement native ads

Interstitial Ads

Implement interstitial ads

Rewarded Ads

Implement rewarded ads

WebView Guide

Display web ads in WebView

UMP Integration

GDPR/CCPA consent management

Popup Ads

Implement popup ads

Splash Ads

Configure splash ads

Targeting

Set up user and context targeting

Reference

Complete API reference

Examples

Full implementation examples