Overview
Overview of CloudX React Native SDK setup and core features
The CloudX React Native SDK enables monetization of your React Native apps with banner, MREC, interstitial, rewarded, and App Open ads on iOS and Android. It supports both the New Architecture (Fabric) and the legacy architecture (Paper).
Manual Installation
Requires React Native 0.70+, React 18.0+, iOS 13.0+, and Android API 23+.
npm install cloudx-react-nativeiOS Setup
Add ad network adapter pods to your ios/Podfile:
target 'YourApp' do
# ... existing config ...
# CloudX ad network adapters (add as needed)
pod 'CloudXMetaAdapter', '~> 6.21.1.0' # FBAudienceNetwork 6.21.1
pod 'CloudXVungleAdapter', '~> 7.7.4.0' # VungleAds 7.7.4
pod 'CloudXInMobiAdapter', '~> 11.3.0.0' # InMobiSDK 11.3.0
pod 'CloudXMintegralAdapter', '~> 8.1.5.0' # MintegralAdSDK 8.1.5
pod 'CloudXUnityAdsAdapter', '~> 4.19.0.0' # UnityAds 4.19.0
pod 'CloudXMagniteAdapterV2', '~> 1.0.0.1' # MagniteSDK 1.0.0
pod 'CloudXMobileFuseAdapter', '~> 1.11.0.0' # MobileFuseSDK 1.11.0
pod 'CloudXMolocoAdapter', '~> 4.8.0.0' # MolocoSDKiOS 4.8.0
pod 'CloudXVerveAdapter', '~> 3.9.0.0' # HyBid 3.9.0
pod 'CloudXDigitalTurbineAdapter', '~> 8.4.8.0' # Fyber Marketplace SDK 8.4.8
pod 'CloudXGoogleWaterfallAdapter', '~> 13.6.0.2' # Google Mobile Ads SDK 13.6.0
pod 'CloudXPangleAdapter', '~> 8.2.0.7.0' # Ads-Global (Pangle / ByteDance) 8.2.0.7
pod 'CloudXTaurusXAdapter', '~> 1.18.1.0' # TaurusX SDK 1.18.1
endThen install pods:
cd ios && pod installApp Transport Security
The CloudX SDK does not require disabling App Transport Security. If a
mediated network serves assets over plain HTTP from a specific host, scope an
exception to that domain in your Info.plist instead of allowing arbitrary
loads app-wide (a blanket NSAllowsArbitraryLoads weakens your app’s
transport security and can draw App Store review scrutiny):
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>example-ad-network.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>Android Setup
Add CloudX SDK and adapter dependencies to your android/app/build.gradle:
dependencies {
// CloudX Android SDK
implementation "io.cloudx:sdk:4.5.0"
// Adapters for ad networks (add as needed)
implementation "io.cloudx:adapter-digitalturbine:8.4.7.0" // Digital Turbine Marketplace SDK 8.4.7
implementation "io.cloudx:adapter-googlewaterfall:25.2.0.2" // Google Mobile Ads SDK 25.2.0
implementation "io.cloudx:adapter-inmobi:11.4.0.1" // InMobi SDK 11.4.0
implementation "io.cloudx:adapter-magnite:1.0.0.1" // Magnite Ads SDK 1.0.0
implementation "io.cloudx:adapter-meta:6.22.0.0" // Meta Audience Network 6.22.0
implementation "io.cloudx:adapter-mintegral:17.1.71.1" // Mintegral SDK 17.1.71
implementation "io.cloudx:adapter-mobilefuse:1.11.0.1" // MobileFuse SDK 1.11.0
implementation "io.cloudx:adapter-moloco:4.11.0.0" // Moloco SDK 4.11.0
implementation "io.cloudx:adapter-pangle:8.2.0.4.0" // Pangle SDK 8.2.0.4
implementation "io.cloudx:adapter-taurusx:1.18.3.0" // TaurusX SDK 1.18.3
implementation "io.cloudx:adapter-unityads:4.19.0.1" // Unity Ads SDK 4.19.0
implementation "io.cloudx:adapter-verve:3.9.0.1" // Verve HyBid SDK 3.9.0
implementation "io.cloudx:adapter-vungle:7.7.7.0" // Vungle SDK 7.7.7
}If you integrate the Mintegral adapter, also declare its Maven repository in android/build.gradle:
allprojects {
repositories {
maven { url "https://dl-maven-android.mintegral.com/repository/mbridge_android_sdk_oversea" }
}
}Optional MMP Ad-Revenue Connectors
If your app already uses Adjust or AppsFlyer, add the native connector dependency to forward CloudX-won impression revenue to your MMP without React Native JavaScript glue code:
target 'YourApp' do
pod 'CloudXAdjustConnector', '~> 5.0.0.0'
pod 'CloudXAppsFlyerConnector', '~> 6.15.0.0'
enddependencies {
implementation "io.cloudx:connector-adjust:5.0.0.0"
implementation "io.cloudx:connector-appsflyer:6.15.0.0"
}The connector does not initialize the MMP SDK. Your app must already integrate and initialize Adjust or AppsFlyer with your own credentials. Use either a connector or your own onAdRevenuePaid forwarding code, not both.
Initialization
Initialize the SDK before loading any ads:
import { CloudX, CloudXLogLevel } from 'cloudx-react-native';
// Optional: enable verbose logging (development only)
CloudX.setMinLogLevel(CloudXLogLevel.VERBOSE);
// Initialize with your app key
const result = await CloudX.initialize('YOUR_APP_KEY');
if (result.success) {
console.log('CloudX initialized');
} else {
console.error('CloudX init failed:', result.message);
}CloudX.initialize() returns a CloudXInitializationResult with:
success: boolean— whether initialization succeededmessage?: string— additional details, populated on failure
Other initialization utilities:
const initialized = await CloudX.isInitialized();
const version = await CloudX.getVersion();
const tablet = await CloudX.isTablet();Ad Formats
CloudX React Native supports banner, MREC, interstitial, rewarded, and App Open ad integrations. Use the format-specific guides for implementation details:
Banner & MREC ads
Create programmatic overlay display placements with optional refresh control.
Interstitial ads
Load and show full-screen interstitial placements.
Rewarded ads
Reward users after completed rewarded ad views.
App Open ads
Show full-screen placements during app launch and foreground moments.
Ad Information (CloudXAdInfo)
Most ad event callbacks receive a CloudXAdInfo object:
| Property | Type | Description |
|---|---|---|
adUnitId | string | The ad unit ID |
adFormat | string | Ad format: BANNER, MREC, INTERSTITIAL, REWARDED, or APP_OPEN |
networkName | string | Name of the winning ad network |
networkPlacement | string | null | Network-specific placement ID |
placement | string | null | Custom placement set by your integration |
revenue | number | Revenue value in USD |
adValues | Record<string, string> | SDK-provided ad metadata, used by features such as Trusted Arbiter |
Error Handling
All SDK errors are returned as error objects in callbacks and rejected promises:
| Property | Type | Description |
|---|---|---|
code | CloudXErrorCode | Error category |
message | string | null | Human-readable description |
Error Code Categories
| Range | Category | Common Codes |
|---|---|---|
| 0 | General | internalError |
| 100-199 | Network | networkError, networkTimeout, networkNoConnection |
| 200-299 | Initialization | notInitialized, sdkDisabled, invalidAppKey |
| 300-399 | Ad Loading | noFill, invalidAdUnit, adsDisabled |
| 400-499 | Display | adNotReady, adAlreadyShowing |
| 600-699 | Adapter | adapterNoFill, adapterTimeout |
See CloudXErrorCode export for the full list of error codes.
Advanced Features
Debug Logging
import { CloudX, CloudXLogLevel } from 'cloudx-react-native';
// Enable verbose logging (call before initialize)
CloudX.setMinLogLevel(CloudXLogLevel.VERBOSE);
// Available levels: VERBOSE, DEBUG, INFO, WARN, ERROR, NONELog Levels: VERBOSE < DEBUG < INFO < WARN < ERROR < NONE
Native SDK logs appear in the iOS and Android platform logs. JavaScript-side calls and event handling can also be logged through your app’s normal React Native logging.
Impression-Level Revenue Tracking
Set an addAdRevenuePaidListener callback on any ad format to receive impression-level revenue events. The CloudXAdInfo object includes the revenue value in USD and the winning network name.
CloudXInterstitialAd.addAdRevenuePaidListener((adInfo) => {
trackRevenue(adInfo.revenue, adInfo.networkName, adInfo.adUnitId);
});Works with all React Native ad formats: banner, MREC, interstitial, rewarded, and App Open.
To forward paid events from another mediation or reporting platform into CloudX, call CloudX.reportRevenueData(). Revenue is a currency-unit number, not micros.
import { CloudX, CloudXRevenuePlatform, CloudXRevenuePrecision } from 'cloudx-react-native';
const accepted = await CloudX.reportRevenueData({
platform: CloudXRevenuePlatform.ADMOB,
revenue: adValue.valueMicros / 1_000_000.0,
adFormat: 'INTERSTITIAL',
currencyCode: adValue.currencyCode,
precision: CloudXRevenuePrecision.ESTIMATED,
networkName: 'admob',
adUnitId: 'interstitial_ad_unit',
});Use CloudXRevenuePlatform.GAM for Google Ad Manager paid events. Use CloudXRevenuePlatform.custom('TopOn'), CloudXRevenuePlatform.custom('InMobi'), or another non-empty platform name for mediation platforms without a JavaScript constant.
Publisher-Reported Revenue Data
If your app receives impression-level revenue callbacks from AdMob, Google Ad Manager, or another provider outside the CloudX ad flow, forward those events to CloudX after initialization:
| Field | Required | Description |
|---|---|---|
platform | Yes | CloudXRevenuePlatform.ADMOB, CloudXRevenuePlatform.GAM, or CloudXRevenuePlatform.custom("MyProvider") |
revenue | Yes | Revenue for one impression in the supplied currency, not CPM/eCPM |
adFormat | Yes | Ad format string such as banner, mrec, interstitial, or rewarded |
currencyCode | No | ISO 4217 currency code, if known |
precision | No | CloudXRevenuePrecision.EXACT, ESTIMATED, PUBLISHER_DEFINED, or UNDEFINED |
networkName | No | Winning ad network name, if known |
adUnitId | No | Mediation-platform ad unit ID |
thirdPartyAdPlacementId | No | Network-side ad unit or placement ID |
creativeId | No | Creative ID from the ad network |
networkPlacement | No | Network placement identifier |
countryCode | No | User country code, if known |
userSegment | No | User segment, if known |
CloudX.reportRevenueData() resolves true when the event is accepted into the CloudX revenue pipeline. It resolves false when the payload is invalid, the platform name is blank, the SDK is not initialized, or revenue tracking is unavailable.
AdMob paid events
Google does not provide an official React Native AdMob plugin. This example uses react-native-google-mobile-ads, a third-party React Native wrapper around the official Google Mobile Ads Android and iOS SDKs.
const toCloudXRevenuePrecision = (precision) => {
switch (precision) {
case RevenuePrecisions.PRECISE:
return CloudXRevenuePrecision.EXACT;
case RevenuePrecisions.ESTIMATED:
return CloudXRevenuePrecision.ESTIMATED;
case RevenuePrecisions.PUBLISHER_PROVIDED:
return CloudXRevenuePrecision.PUBLISHER_DEFINED;
case RevenuePrecisions.UNKNOWN:
default:
return CloudXRevenuePrecision.UNDEFINED;
}
};
const reportAdMobPaidEvent = (event, adFormat, adUnitId) =>
CloudX.reportRevenueData({
platform: CloudXRevenuePlatform.ADMOB,
revenue: event.value,
adFormat,
currencyCode: event.currency,
precision: toCloudXRevenuePrecision(event.precision),
adUnitId,
});
const AdMobBanner = () => (
<BannerAd
unitId={ADMOB_BANNER_UNIT_ID}
size={BannerAdSize.BANNER}
onPaid={(event) => {
reportAdMobPaidEvent(event, 'banner', ADMOB_BANNER_UNIT_ID);
}}
/>
);For Google Ad Manager paid events, keep the same revenue and precision mapping and set platform: CloudXRevenuePlatform.GAM.
Custom platform events
React Native has JavaScript constants for AdMob and Google Ad Manager. Use custom for providers that do not have a CloudX JavaScript SDK constant, such as InMobi, TopOn, TradPlus, and Nimbus. The value is only the provider name, such as CloudXRevenuePlatform.custom("TradPlus") or CloudXRevenuePlatform.custom("Nimbus"). Keep the name stable so CloudX can group that provider’s revenue consistently.
Do not include the amount or currency in the provider name. For a TradPlus impression worth USD 0.01, send platform: CloudXRevenuePlatform.custom("TradPlus"), revenue: 0.01, and currencyCode: "USD". If your source reports CPM/eCPM, divide by 1_000.0 first.
const reportCustomRevenueEvent = (
providerName,
revenue,
adFormat,
currencyCode,
adUnitId,
placementId,
) =>
CloudX.reportRevenueData({
platform: CloudXRevenuePlatform.custom(providerName),
revenue,
adFormat,
currencyCode,
precision: CloudXRevenuePrecision.PUBLISHER_DEFINED,
adUnitId,
thirdPartyAdPlacementId: placementId,
});Test Mode
Test mode is server-controlled via device whitelisting. This provides better security and control over which devices receive test ads.
To enable test mode:
- Initialize the SDK with verbose logging enabled.
- Find your device advertising ID in the iOS or Android platform logs.
- Add the advertising ID to your device whitelist on the CloudX server dashboard.
Note: Test mode is determined by the server, so you don’t need to change any code between development and production builds.
Privacy Compliance
The CloudX SDK supports GDPR and CCPA privacy compliance by reading standard IAB privacy strings from platform storage (NSUserDefaults on iOS, SharedPreferences on Android). These values are typically set automatically by your Consent Management Platform (CMP), such as Google UMP, OneTrust, or Sourcepoint.
How It Works
The native SDKs automatically detect user location and read consent signals:
- EU Users (GDPR): Checks TCF v2 consent for purposes 1 and 2 per the IAB Global Vendor List and vendor consent (CloudX Vendor ID: 1510)
- US Users (CCPA): Checks for sale/sharing opt-out signals
- Other Regions: No restrictions applied
When consent is denied or the user opts out, the SDK removes PII from ad requests:
- Advertising ID (IDFA/GAID) is cleared
- Geo coordinates (lat/lon) are removed
- User key-values are not sent
- Hashed user ID is removed from bidder-bound requests and suppressed from impression reporting
Supported Privacy Keys
| Key | Standard | Description |
|---|---|---|
IABGPP_HDR_GppString | GPP | Global Privacy Platform string (modern) |
IABGPP_GppSID | GPP | Section IDs (e.g., “2” for EU, “7” for US-National, “8” for US-CA) |
IABTCF_TCString | TCF v2 | GDPR consent string (legacy) |
IABTCF_gdprApplies | TCF v2 | Whether GDPR applies (1 = yes, 0 = no) |
IABUSPrivacy_String | US Privacy | CCPA privacy string (legacy, e.g., “1YNN”) |
Note: The SDK prioritizes GPP (modern standard) over legacy TCF/US Privacy strings when both are available.
Manual Privacy API
If you manage user consent yourself (without a CMP), you can set GDPR and CCPA privacy status directly. These can be called before or after SDK initialization.
import { CloudX } from 'cloudx-react-native';
// GDPR consent: true, false, or null to defer to CMP
CloudX.setHasUserConsent(true);
// CCPA do-not-sell: true, false, or null to defer to CMP
CloudX.setDoNotSell(true);User Targeting
import { CloudX } from 'cloudx-react-native';
// Set hashed user ID for targeting
CloudX.setHashedUserID('hashed-user-id');
// Set custom user key-value pairs
CloudX.setUserKeyValue('age', '25');
CloudX.setUserKeyValue('gender', 'male');
CloudX.setUserKeyValue('location', 'US');
// Set custom app key-value pairs
CloudX.setAppKeyValue('app_version', '1.0.0');
CloudX.setAppKeyValue('user_level', 'premium');
// Clear all custom key-values
CloudX.clearAllKeyValues();The hashed user ID is a publisher-provided pseudonymous identifier. When applicable privacy signals allow it, CloudX captures the value at auction time and returns it as hashed_user_id in the request and impression activity exports. Use auction_id to join the exports. Use the ID to join CloudX activity to cohorts in your own user data. The export value is empty when no ID was set, persistence was suppressed by privacy signals, or the value exceeded 128 characters. Do not pass raw personal data.
Per-load extra parameters
React Native SDK 3.4.4 and later can attach network or server-side configuration to an individual ad load. Values may be strings, numbers, booleans, null, arrays, or nested objects.
For programmatic ads, call the format’s setExtraParameters method before the method that starts the load:
import {
CloudXBannerAd,
CloudXMRECAd,
CloudXInterstitialAd,
CloudXRewardedAd,
CloudXAdPosition,
} from 'cloudx-react-native';
const extraParameters = {
requestId: 'request-456',
bidFloor: 0.5,
testRequest: false,
keywords: ['sports', 'scores'],
context: {
screen: 'home',
refreshIndex: null,
},
};
// Call before createAd() for programmatic banner and MREC ads.
CloudXBannerAd.setExtraParameters(BANNER_AD_UNIT_ID, extraParameters);
CloudXBannerAd.createAd(BANNER_AD_UNIT_ID, CloudXAdPosition.BOTTOM_CENTER);
CloudXMRECAd.setExtraParameters(MREC_AD_UNIT_ID, extraParameters);
CloudXMRECAd.createAd(MREC_AD_UNIT_ID, CloudXAdPosition.CENTERED);
// Call before loadAd() for interstitial and rewarded ads.
CloudXInterstitialAd.setExtraParameters(INTERSTITIAL_AD_UNIT_ID, extraParameters);
CloudXInterstitialAd.loadAd(INTERSTITIAL_AD_UNIT_ID);
CloudXRewardedAd.setExtraParameters(REWARDED_AD_UNIT_ID, extraParameters);
CloudXRewardedAd.loadAd(REWARDED_AD_UNIT_ID);For interstitial and rewarded ads, values are captured when loadAd() runs; later changes apply to the next load. For programmatic banner and MREC ads, set the values before createAd() to include them in the first auction. Changes made after creation apply to future refreshes.
For component placements, pass the values through the extraParameters prop on CloudXBannerView or CloudXMRECView instead of calling the programmatic setter:
import { CloudXBannerView, CloudXMRECView } from 'cloudx-react-native';
<CloudXBannerView
adUnitId={BANNER_AD_UNIT_ID}
extraParameters={{ section: 'top_stories', refreshIndex: 1 }}
/>
<CloudXMRECView
adUnitId={MREC_AD_UNIT_ID}
extraParameters={{ section: 'article_body', refreshIndex: 1 }}
/>See Banner & MREC ads for the complete component API.
Identity passthrough
Pass UID 2.0, EUID, LiveRamp, and ID5 with setUserKeyValue. Set each value when you have it, and again when it refreshes.
| Key | Pass this |
|---|---|
uidapi.com | UID2 advertising token, not the refresh token. Do not decrypt it. UID2 docs |
euid.eu | EUID advertising token, not the refresh token. Do not decrypt it. EUID docs |
liveramp.com | LiveRamp ATS envelope, not a RampID. LiveRamp docs |
id5-sync.com | ID5 universal UID. Do not pass 0. ID5 docs |
CloudX does not generate these IDs. Create them with UID2, EUID, LiveRamp ATS, or ID5, then pass the string. This is separate from hashed user ID.
CloudX.setUserKeyValue('uidapi.com', uid2Token);
CloudX.setUserKeyValue('euid.eu', euidToken);
CloudX.setUserKeyValue('liveramp.com', liveRampEnvelope);
CloudX.setUserKeyValue('id5-sync.com', id5Id);App Tracking Transparency (iOS)
Request tracking authorization on iOS 14+:
import { requestTrackingAuthorization, getTrackingAuthorizationStatus, CloudXATTStatus } from 'cloudx-react-native';
const status = await requestTrackingAuthorization();
if (status === CloudXATTStatus.AUTHORIZED) {
console.log('Tracking authorized');
}ATT status values: AUTHORIZED, DENIED, RESTRICTED, NOT_DETERMINED, NOT_REQUIRED.
On Android or iOS < 14, requestTrackingAuthorization() returns NOT_REQUIRED.
Visual Debugging
Enable visual debugging overlays to see ad unit boundaries and network info:
CloudX.setVisualDebuggingEnabled(true);Support
For support, contact support@cloudx.io