consentmanager SDK for React Native (New Architecture)

A comprehensive Consent Management Platform (CMP) SDK bridge for React Native with New Architecture (TurboModules) support.

Features

• Full TurboModule implementation with proper protocol conformance
• Complete TypeScript support with comprehensive type definitions
• Google Consent Mode v2 compatible
• Customizable consent layer UI (position, background styles, blur effects)
• Event-driven architecture for consent state changes
• iOS ATT (App Tracking Transparency) integration

Requirements

| Platform | Minimum Version | |----------|----------------| | React Native | 0.74+ | | iOS | 13.4+ | | Android | SDK 24+ (Android 7.0) |

Note: This package requires New Architecture enabled (RCT_NEW_ARCH_ENABLED=1). For legacy architecture support, use version 3.x.

Installation

# Using npm
npm install cm-sdk-react-native-v3-new-arch

# Using yarn
yarn add cm-sdk-react-native-v3-new-arch

iOS Setup

cd ios && pod install

Android Setup

No additional setup required. The library uses auto-linking.

Quick Start

import CmSdkReactNativeV3, {
  addConsentListener,
  addErrorListener,
  setUrlConfig,
  setWebViewConfig,
  WebViewPosition,
  BackgroundStyle,
  ATTStatus,
} from 'cm-sdk-react-native-v3-new-arch';

// 1. Configure the CMP
await setUrlConfig({
  id: 'your-cmp-id',
  domain: 'delivery.consentmanager.net',
  language: 'EN',
  appName: 'YourAppName',
});

// 2. Customize the consent layer UI
await setWebViewConfig({
  position: WebViewPosition.HalfScreenBottom,
  backgroundStyle: BackgroundStyle.blur(),
  cornerRadius: 20,
  respectsSafeArea: true,
});

// 3. Set up event listeners
const consentSubscription = addConsentListener((consent, data) => {
  console.log('Consent received:', consent);
});

// 4. Check and open consent layer if needed
await CmSdkReactNativeV3.checkAndOpen(false);

// Clean up on unmount
consentSubscription.remove();

API Reference

Configuration

setUrlConfig(config: UrlConfig): Promise<void>

Configures the CMP endpoint.

type UrlConfig = {
  id: string;        // Your CMP ID
  domain: string;    // CMP delivery domain
  language: string;  // ISO 639-1 language code
  appName: string;   // Your application name
  noHash?: boolean;  // Disable URL hashing
};

setWebViewConfig(config: WebViewConfig): Promise<void>

Customizes the consent layer appearance.

type WebViewConfig = {
  position?: WebViewPosition;
  customRect?: WebViewRect;
  cornerRadius?: number;
  respectsSafeArea?: boolean;
  allowsOrientationChanges?: boolean;
  backgroundStyle?: WebViewBackgroundStyle;
};

Positions

| Position | Description | |----------|-------------| | WebViewPosition.FullScreen | Covers the entire screen | | WebViewPosition.HalfScreenTop | Top half of the screen | | WebViewPosition.HalfScreenBottom | Bottom half of the screen | | WebViewPosition.Custom | Custom position (iOS only) |

Background Styles

// Semi-transparent overlay
BackgroundStyle.dimmed(color?: string, opacity?: number)

// Solid color background
BackgroundStyle.color(color: string)

// iOS blur effect (falls back to dimmed on Android)
BackgroundStyle.blur(style?: BlurEffectStyle)

// No background
BackgroundStyle.none()

Consent Methods

| Method | Description | |--------|-------------| | checkAndOpen(jumpToSettings) | Opens consent layer if consent is needed | | forceOpen(jumpToSettings) | Always opens consent layer | | acceptAll() | Accepts all consent options | | rejectAll() | Rejects all consent options | | acceptVendors(ids) | Accepts specific vendors | | rejectVendors(ids) | Rejects specific vendors | | acceptPurposes(ids, updatePurpose) | Accepts specific purposes | | rejectPurposes(ids, updateVendor) | Rejects specific purposes |

Status Methods

| Method | Returns | |--------|---------| | getUserStatus() | Promise<UserStatus> | | isConsentRequired() | Promise<boolean> | | getStatusForPurpose(id) | Promise<string> | | getStatusForVendor(id) | Promise<string> | | getGoogleConsentModeStatus() | Promise<GoogleConsentModeStatus> |

Event Listeners

// Consent received
addConsentListener((consent: string, data: Record<string, unknown>) => void)

// Consent layer shown
addShowConsentLayerListener(() => void)

// Consent layer closed
addCloseConsentLayerListener(() => void)

// Error occurred
addErrorListener((error: string) => void)

// Link clicked in consent layer
addClickLinkListener((url: string) => void)

// ATT status changed (iOS only)
addATTStatusChangeListener((event: ATTStatusChangeEvent) => void)

iOS ATT Integration

import { setATTStatus, ATTStatus } from 'cm-sdk-react-native-v3-new-arch';

// After requesting ATT permission
const status = await requestTrackingPermission();
await setATTStatus(
  status === 'authorized' ? ATTStatus.Authorized : ATTStatus.Denied
);

Troubleshooting

Module not found

Ensure you've run pod install after installation:

cd ios && pod install

New Architecture not enabled

Add to your gradle.properties:

newArchEnabled=true

For iOS, ensure RCT_NEW_ARCH_ENABLED=1 is set in your Podfile.

Consent layer not showing

1. Verify your CMP configuration is correct
2. Check that checkAndOpen is being called
3. Listen for errors using addErrorListener

Example App

See the example directory for a complete demo application showcasing all features.

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT - see LICENSE for details.

Links

• Documentation
• npm Package
• GitHub Repository