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.2 consent management.

You can find a demo app integrated with this SDK in the /UniconsentDemo directory provided alongside the SDK source.

Prerequisites

A UniConsent CMP plan that includes Mobile App support.
The UniConsent SDK package file for React Native (e.g., uniconsent-sdk-vX.Y.Z.tgz), obtained from your UniConsent account manager or support.
A working React Native development environment.

Getting Started (Installation)

Install the SDK Package File

Place the SDK package file (e.g., uniconsent-sdk-vX.Y.Z.tgz) in your project directory or a known location and install it 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 file uniconsent-sdk-v1.0.0.tgz in the root of your project:

npm install ./uniconsent-sdk-v1.0.0.tgz
# or
yarn add file:./uniconsent-sdk-v1.0.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 ..

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'; // Your actual app component

// Replace with your actual License ID from UniConsent
const YOUR_UNICONSENT_LICENSE_ID = "YOUR_LICENSE_ID_HERE";

const App = () => {
  if (!YOUR_UNICONSENT_LICENSE_ID || YOUR_UNICONSENT_LICENSE_ID === "YOUR_LICENSE_ID_HERE") {
     console.error("UniConsent SDK requires a valid licenseId!");
     return null; // Render nothing or an error message
  }

  return (
    // The Provider initializes the SDK and loads consent state
    <UniConsentProvider licenseId={YOUR_UNICONSENT_LICENSE_ID}>
      <YourAppRootComponent />
    </UniConsentProvider>
  );
};

export default App;

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 { Button } from 'react-native';
import { useConsent } from 'uniconsent-sdk';

const PrivacySettingsButton = () => {
  // Get the openCMP function from the hook
  const { openCMP, isLoading } = useConsent();

  return (
    <Button
      title="Manage Privacy Settings"
      onPress={openCMP} // Call this function to show the CMP modal
      disabled={isLoading}
    />
  );
};

Get the TC String

If you need the raw IAB TCF TC String, use the exported async function:

import { getTCString } from 'uniconsent-sdk';

async function logTCString() {
  try {
    const tcString = await getTCString();
    console.log("TC String:", tcString);
    // Use the tcString with other SDKs (e.g., advertising SDKs)
  } catch (error) {
    console.error("Error getting TC String:", error);
  }
}

Use the exported utility functions like isPurposeConsented:

import { isPurposeConsented } from 'uniconsent-sdk';

async function checkPurposeOne() {
  // Check consent for TCF Purpose 1 (Store and/or access information on a device)
  const hasConsentPurpose1 = await isPurposeConsented(1);
  if (hasConsentPurpose1) {
    console.log("User has consented to Purpose 1.");
    // Proceed with action requiring Purpose 1 consent
  } else {
    console.log("User has NOT consented to Purpose 1.");
  }
}

(Similar functions exist: isVendorConsented, getConsentData)

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.
Initial Consent Check: The UniConsentProvider handles the initial check when your app starts (or when the provider mounts).