How to Integrate UniConsent CMP SDK for React Native

This guide explains how to integrate the UniConsent CMP SDK into your React Native application for handling GDPR IAB TCF 2.3 consent management.

You can find a demo app integrated with this SDK in the UniConsentDemo directory provided alongside the SDK package.

Prerequisites

• A UniConsent CMP plan that includes Mobile App support.
• The UniConsent SDK package for React Native (e.g., uniconsent-react-native-sdk-26.2.0.zip), downloaded from your UniConsent dashboard or obtained from support.
• A working React Native development environment.

Getting Started (Installation)

Install the SDK Package

Download and unzip the SDK package (e.g., uniconsent-react-native-sdk-26.2.0.zip). Inside you will find:

• uniconsent-react-native-sdk-26.2.0.tgz — npm-installable SDK package
• uniconsent-sdk/ — Pre-built SDK library files
• UniConsentDemo/ — Demo application
• README.md — Documentation

Install the .tgz file using npm or Yarn:

# Replace <path-to-package-file.tgz> with the actual path to the file
npm install <path-to-package-file.tgz>
# or
yarn add <path-to-package-file.tgz>

Example: If you place the .tgz file in the root of your project:

npm install ./uniconsent-react-native-sdk-26.2.0.tgz
# or
yarn add file:./uniconsent-react-native-sdk-26.2.0.tgz

Install Peer Dependencies

This SDK requires the following peer dependencies:

npm install react-native-webview react-native-default-preference
# or
yarn add react-native-webview react-native-default-preference

Install iOS Pods

If developing for iOS, navigate to your project's ios directory and install the pods:

cd ios
pod install
cd ..

Customize the Consent UI

Before integrating the SDK, customize the consent banner appearance in the UniConsent Dashboard to match your brand and optimize consent rates.

Step 1: Brand Styling in Dashboard

Go to Projects → Select your Project → Settings → Step 5: UI & Style Settings to configure:

• Main Button Colour — Set the primary action button color to match your brand
• Main Button Text Colour — Adjust text color on the primary button for readability
• Background Colour — Set the banner background color to blend with your app
• Text Colour — Ensure body text has appropriate contrast

Step 2: Advanced Styling with Custom CSS (Optional)

For more precise control, add custom CSS in the CSS Content field under Step 5. This is recommended to make the banner feel native to your app and achieve the best consent rate:

/* Example: Style the accept button to match your brand */
.unic-btn-accept {
  background-color: #4CAF50;
  border-radius: 8px;
  font-weight: 600;
}

/* Example: Adjust banner font */
.unic-banner {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Example: Make the reject button less prominent */
.unic-btn-reject {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #666;
}

Tip: A well-branded consent UI that feels native to your app typically achieves higher consent rates. Users are more likely to engage positively with a banner that matches the look and feel they expect.

Usage

Initialize the SDK via Provider

Wrap your application's root component (or the relevant part) with UniConsentProvider. You must provide your licenseId (Publisher ID/pid from UniConsent).

// Your main App file (e.g., App.tsx or index.js)
import React from 'react';
import { UniConsentProvider } from 'uniconsent-sdk';
import YourAppRootComponent from './src/YourAppRootComponent';

const App = () => {
  return (
    <UniConsentProvider licenseId="YOUR_LICENSE_ID">
      <YourAppRootComponent />
    </UniConsentProvider>
  );
};

export default App;

Display Modes

The SDK supports three display modes for the CMP UI, configured via the displayMode prop on UniConsentProvider:

// Full screen (default — no prop needed)
<UniConsentProvider licenseId="YOUR_LICENSE_ID">

// Bottom sheet
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="bottomSheet">

// Center dialog
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="dialog">

Display the CMP UI

Use the useConsent hook within a component inside the Provider to get the openCMP function, then call it when needed (e.g., from a button press).

import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { useConsent } from 'uniconsent-sdk';

const ConsentInfoComponent = () => {
  const { consentStatus, isLoading, openCMP } = useConsent();

  return (
    <View>
      <Text>Consent Status:</Text>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <Text>{consentStatus ?? 'Initializing...'}</Text>
      )}
      <Button
        title="Manage Privacy Settings"
        onPress={openCMP}
        disabled={isLoading}
      />
    </View>
  );
};

Check Consent Programmatically

Use the utility functions to check consent status directly without the hook:

import {
  getTCString,
  isEURegion,
  isPurposeConsented,
  isVendorConsented,
  getConsentData,
} from 'uniconsent-sdk';

// Get the full TC String
const tcString = await getTCString();

// Check if user is in EU/EEA region
const inEU = await isEURegion();

// Check if a specific TCF purpose has consent (1-based ID)
const hasPurpose1 = await isPurposeConsented(1);

// Check if a specific vendor has consent (1-based ID)
const hasVendor755 = await isVendorConsented(755);

// Get all consent data as a single object
const consentData = await getConsentData();

Debug Utilities

The SDK provides helper functions for development and debugging:

import { listKV, clearKV } from 'uniconsent-sdk';

// Log all stored consent keys to console
await listKV();

// Clear all stored consent data
await clearKV();

Configuration

UniConsentProvider Props

API Reference

Components & Hooks

Utility Functions

Exported Types

ConsentData Fields

Notes

• Privacy Settings Access: Your application should provide users with a persistent way (e.g., a "Privacy Settings" button or link, often in a settings menu) to access and update their consent choices. This button should call the openCMP() function obtained from the useConsent hook.
• Automatic Consent Check: The UniConsentProvider automatically checks consent status when your app starts, including whether the Global Vendor List (GVL) has been updated since the user last gave consent. If the GVL version has changed, the user will be re-prompted.