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

​
Requirements

​
React Native

  • React Native 0.71 or higher

​
Android

  • API level 23 (Android 6.0) or higher
  • compileSdkVersion 34
  • Kotlin 1.8.20 or higher
  • Gradle 8.0 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.7.5'
}
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
PopupPUBLIC_TEST_UNIT_ID_POPUP
import { Adrop } from 'adrop-ads-react-native';

// Banner ad test
const testBannerUnitId = Adrop.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
ERROR_CODE_NETWORKNetwork error
ERROR_CODE_INTERNALInternal error
ERROR_CODE_INITIALIZESDK initialization error
ERROR_CODE_INVALID_UNITInvalid unit ID
ERROR_CODE_NOT_TARGET_COUNTRYNot a target country
ERROR_CODE_AD_INACTIVEInactive ad
ERROR_CODE_AD_NO_FILLNo ads to display
ERROR_CODE_AD_LOAD_DUPLICATEDDuplicate load request
ERROR_CODE_AD_LOADINGLoading in progress
ERROR_CODE_AD_EMPTYEmpty ad
ERROR_CODE_AD_SHOWNAd already shown
ERROR_CODE_AD_HIDE_FOR_TODAYAd hidden for today
ERROR_CODE_LANDSCAPE_UNSUPPORTEDLandscape mode not supported
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