Overview
The Adrop React Native SDK allows you to easily integrate various ad formats into your React Native app.
Format Description Banner Ads Rectangular ads displayed in a portion of the screen Native Ads Ads that blend naturally with app content Interstitial Ads Full-screen ads Rewarded Ads Full-screen ads that provide rewards Popup Ads Ads 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 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. apply plugin: "kotlin-android"
dependencies {
implementation 'io.adrop:adrop-ads-backfill:1.7.6'
}
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. 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+
View Info.plist Configuration
< 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.
2. Create Config Plugin Create a plugins/withAdropService.js file in the project root. This Expo config plugin automatically generates adrop_service.json in native projects when running npx expo prebuild.
Android: android/app/src/main/assets/adrop_service.json
iOS: ios/{projectName}/adrop_service.json
plugins/withAdropService.js
const { withDangerousMod } = require ( '@expo/config-plugins' )
const fs = require ( 'fs' )
const path = require ( 'path' )
function withAdropServiceAndroid ( config , props ) {
return withDangerousMod ( config , [
'android' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const androidAssetsPath = path . join ( projectRoot , 'android' , 'app' , 'src' , 'main' , 'assets' )
if ( ! fs . existsSync ( androidAssetsPath )) fs . mkdirSync ( androidAssetsPath , { recursive: true })
const serviceConfig = { app_key: props . android ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( androidAssetsPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
function withAdropServiceIOS ( config , props ) {
return withDangerousMod ( config , [
'ios' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const projectName = config . modRequest . projectName
const iosPath = path . join ( projectRoot , 'ios' , projectName )
if ( ! fs . existsSync ( iosPath )) fs . mkdirSync ( iosPath , { recursive: true })
const serviceConfig = { app_key: props . ios ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( iosPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
module . exports = function withAdropService ( config , props = {}) {
config = withAdropServiceAndroid ( config , props )
config = withAdropServiceIOS ( config , props )
return config
}
Register the following two plugins in the plugins section of app.json. {
"expo" : {
"plugins" : [
[
"expo-build-properties" ,
{
"android" : { "compileSdkVersion" : 35 , "targetSdkVersion" : 35 , "minSdkVersion" : 24 },
"ios" : { "deploymentTarget" : "15.1" }
}
],
[
"./plugins/withAdropService" ,
{
"android" : { "appKey" : "<YOUR_ANDROID_APP_KEY>" },
"ios" : { "appKey" : "<YOUR_IOS_APP_KEY>" }
}
]
]
}
}
expo-build-properties : Requires Android minSdkVersion 24 or higher, iOS deploymentTarget 15.1 or higher
withAdropService : Pass the appKey issued from the Adrop console for each platform
Initialization
Initialize the SDK when your app starts. This is typically done in App.tsx or index.js.
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
Parameter Type Required Description productionbooleanY true: production mode, false: test modetargetCountriesstring[]N Country codes to display ads (e.g., ['KR', 'US']) useInAppBrowserbooleanN Whether 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
Theme Description 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.
Format Test Unit ID Banner (320x50) PUBLIC_TEST_UNIT_ID_320_50Banner (320x100) PUBLIC_TEST_UNIT_ID_320_100Native PUBLIC_TEST_UNIT_ID_NATIVEInterstitial PUBLIC_TEST_UNIT_ID_INTERSTITIALRewarded PUBLIC_TEST_UNIT_ID_REWARDEDPopup PUBLIC_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 Code Description 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.
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.
buildscript {
ext {
kotlinVersion = '2.1.0'
}
}
Next Steps