Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.
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.
uniconsent-sdk-vX.Y.Z.tgz
), obtained from your UniConsent account manager or support.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
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
If developing for iOS, navigate to your project's ios
directory and install the pods:
cd ios
pod install
cd ..
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;
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}
/>
);
};
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
)
openCMP()
function obtained from the useConsent
hook.UniConsentProvider
handles the initial check when your app starts (or when the provider mounts).