[ReactNative] 1. consentmanager SDK Integration
Please be aware that this version of the CMP SDK were completely rebuilt from scratch, and so it represents a major breaking change in relation to v2, as all the methods were renamed, as were renamed the signatures, also now offering callbacks to almost all of the methods. In all cases, you will need to modify your code and update your dependencies to ensure that your mobile app works as expected. Additionally, is worth mentioning that depending on the version of v2 were integrated in your app, all the data persisted by the previous version of our SDK on the users' devices will be erased, which will force the app to redisplay the consent layer.
Due to the nature of React Native as a framework and the constant conflicting requests and edge cases from our client base, we offer the React Native bridge to the underlying native SDKs as a starting point that tries to fill all the requests to the most extensive degree possible. If for some reason you need it any request, we encourage you to fork our repos and adapt it to your own needs. We offer two repos, one for the old architecture, and another one for the new architecture.
Our React Native SDK is in fact a bridge to the underlying native iOS and Android SDKs. So, for further information about our APIs, check the specific platform versions.
On this document, you'll find general information on how to integrate our SDK to your project. For further details, please refer to our API reference documentation for iOS and Android.
1. Installation
consentmanager SDK is a comprehensive solution for managing user consent in mobile applications. Designed to handle GDPR compliance, user privacy preferences, and ad tracking transparency, this SDK provides a seamless integration for iOS and Android platforms. Additionally, it offers wrapper plugins/bridges for React Native, Flutter, and Unity, making it versatile across various development environments.
This document covers the installation procedure and features made available to our clients developing apps with React Native to have access to our consent management CMP SDK via our React Native Native Bridge. For further details, please refer to our API Reference documentation.
1.1 Steps - High Level Description
-
Integration and Configuration:
- Integrate the SDK into your app.
- Configure the SDK settings according to your needs.
-
Creating an Instance and displaying the Consent Layer:
- On app startup, create an instance of the
CMPManagerclass. This instance will handle the consent process. - The SDK will automatically display the consent screen if needed.
- On app startup, create an instance of the
-
Processing user's consent data:
- Once consents are collected, info is stored and is available for querying through different properties and methods exposed by our SDK. You'll have information about rejected or accepted consents, vendors and purposes.
1.2 Configuration API at a glance
setUrlConfig({ id, domain, language, appName, noHash? = false })
setWebViewConfig({
position? = fullScreen,
customRect? (required when position = custom),
cornerRadius? = 5,
respectsSafeArea? = true,
allowsOrientationChanges? = true,
backgroundStyle? = dimmed(black, 0.5)
})
setATTStatus(status) // iOS only; ATTStatus enum (0–3)WebViewPosition:FullScreen|HalfScreenTop|HalfScreenBottom|Custom-
BackgroundStyleType(via BackgroundStyle helper):dimmed(color?, opacity?)color(color)blur(blurEffectStyle: light | dark | extraLight)none
ATTStatus: NotDetermined (0), Restricted (1), Denied (2), Authorized (3)
1.3 Integration and Configuration
NPM
We have published our React Native bridge to both NPM (old and new arch) and our public repos (tarballs for direct linking can be found for the old and new arch). Run this line on your terminal:
npm install cm-sdk-react-native-v3 // For the old architecture
npm install cm-sdk-react-native-v3-new-arch // For the new architectureLinking (React Native 0.59 and below)
If you are using React Native 0.59 or below, you need to link the native modules manually:
react-native link cm-sdk-react-native-v31.4 Creating an instance and displaying consent layer
You'll need to set up your CMP information via the setUrlConfig method, which handles your CMP configuration, like Code-ID and default language, and setWebViewConfig, which will configure the looks of the WebView that will display the consent layer. After that, you're ready to use the method checkAndOpen(false) to automatically fetch the necessary data from our server and determine if the consent screen needs to be shown or not. The boolean parameter determines whether the consent layer will be opened in the settings page (true) that will allow users to customize their choices or if the consent layer will display (false) the default design page of your CMP.
Please note that the functionalities related to determining whether the consent is needed or not, as well as the display of the consent layer, depend on a reliable network connection. If there is no connection available or if the mechanism of retry fails to reach our server, the didReceiveError event will return a timeout error, and so the SDK will be totally unable to determine the need for a consent, as it will be totally unable to display the consent layer. Please ensure your logic takes this into account.
Example:
import {
setUrlConfig,
setWebViewConfig,
setATTStatus,
BackgroundStyle,
BackgroundStyleType,
BlurEffectStyle,
WebViewPosition,
ATTStatus,
} from 'cm-sdk-react-native-v3';
const HomeScreen: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
const [toastMessage, setToastMessage] = useState<string | null>(null);
useEffect(() => {
initializeConsent();
}, []);
const initializeConsent = async () => {
try {
await setWebViewConfig({
position: WebViewPosition.HalfScreenBottom,
backgroundStyle: BackgroundStyle.blur(BlurEffectStyle.Dark),
cornerRadius: 25,
respectsSafeArea: true,
allowsOrientationChanges: true,
// customRect is required if you pick WebViewPosition.Custom (iOS only;
// Android falls back)
});
await setUrlConfig({
id: '<your-Code-id>',
domain: 'delivery.consentmanager.net',
language: 'EN',
appName: 'MyApp',
noHash: true, // optional; defaults to false
});
await CmSdkReactNativeV3.checkAndOpen(false);
console.log('CMPManager initialized and open consent layer opened if necessary');
} catch (error) {
console.error('Error initializing consent:', error);
} finally {
setIsLoading(false);
}
};The SDK will automatically show the consent screen at this point (cookie banner), via a WebView created by our SDK, which will display the consent layer with the text and buttons according to your CMP configurations (chosen via the Code-ID of your CMP), collect the data and persist the consent information in the NSUserDefaults/UserPreferences area of the device, so the other SDKs can read them.
2. Processing users' consent data
2.1 Checking users's consents
Our SDK offer different methods to check and retrieve consent information. The main one is getUserStatus, as displayed in the example below. For further information,
// On the example below retrieved from our Demo App, we have some examples
// of how to check consents from the user, either accepted or rejected.
const buttons = [
{
title: 'Get User Status',
onPress: () => handleApiCall(
CmSdkReactNativeV3.getUserStatus,
(result) => `User Status: ${JSON.stringify(result).substring(0, 100)}...`,
'Failed to get user status',
'getUserStatus'
),
},For further information about the other methods, please refer to our full API Documentation of the underlying native iOS and Android SDKs.
2.2 Reopening the Consent Layer to check the users' choices
In order to allow the user to verify or change their choices, you can simply call forceOpen()
const buttons = [
{
title: 'Force Open Consent Layer',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.forceOpen(false),
() => 'Consent Layer opened'
),
},
]This method will display the consent layer via the same WebView instance created in the previous steps.
2.3 Importing/Exporting consent information to other sources
In some cases an native app might contain webviews in order to display information, like advertising or content. In order to transmit the consent information from the SDK to the webview to avoid duplicate cookie banners, you can retrieve the consent string using exportCMPInfo. This will export the consent string with the consent and all further data that is needed by the CMP. You can then pass this information to the CMP that is in your webview by adding it to the URL that is called in the webview. For further information, please check our dedicated page for this use case.
Another use case is the cross device consent, where you'll import consent from another source to the device. In this case, you case replace checkAndOpen by importCMPInfo with the consent string that you retrieved from the website, for example.
3. Integration with Apple Tracking Transparency (ATT)
In case you are using tracking or analytics in your app, we recommend to read the guide on ATT implementation here.
4. Creating a custom layout
To create a customized view of the WKWebView, like changing its positioning or background, for example, you can change the configuration passed to the ConsentLayerUIConfig object like below:
ConsentLayerUIConfig(
position: .halfScreenTop,
backgroundStyle: .dimmed(.grey, 0.75),
cornerRadius: 20,
respectsSafeArea: false,
allowsOrientationChanges: true)5. Logging
When using our iOS SDK, you may find the need to debug or analyze log information for various purposes. The logs generated by our SDK are tagged under "CMP", allowing you to easily filter and view only the relevant logs. For further information, please refer to this section of our documentation.
6. Platform caveats
- Android currently ignores backgroundStyle overrides and customRect/custom position; it always shows a dimmed full-screen background.
- iOS supports dimmed/color/blur/none and customRect.
