Setup

Add the SDK to your project

Install using yarn add @didomi/react-native or npm i @didomi/react-native

Then install required pods for iOS with cd ios && pod install

As Didomi requires Swift runtime for iOS, if your project does not contain Swift code, you need to add an empty Swift file (to create a bridging header) into Xcode project.

Then you can import project from your js code:

import { Didomi, DidomiEventType } from '@didomi/react-native';

Initialize the SDK

Once our SDK has been added to your project, you need to initialize it. The initialization process will prepare the SDK for interactions with the user and your application. It is important to launch the SDK initialization as soon as possible.

In your code, call the initialize method and pass your API key:

function init() {
    Didomi.onReady().then(() => {
        // From this point, SDK is ready
    });

    Didomi.initialize(
        'YOUR_API_KEY', 
        undefined, 
        undefined, 
        undefined, 
        false, 
        undefined, 
        'YOUR_NOTICE_ID'
    );
}

�Keep in mind that the SDK initialization is an asynchronous process so you must avoid interacting with the DidomiSdk object until it is actually ready to handle your requests. Use the onReady event in js to register a listener for the ready event.

Take a look at our sample app to see how the setup is done.

Setup the SDK UI

Note: the setupUI method should be called only from your contexts where the application starts.

You do not need to call onReady, isReady or shouldConsentBeCollected before calling setupUI because they are called internally. Therefore, by calling this method the consent notice will be displayed if it is required and only once the SDK is ready.

Call the setupUI function of the SDK in your context where the application starts:

Didomi.setupUI();

If you are using deep links or have multiple pages in your react-native app, make sure that the setupUI function is called on every context that the user can launch the app on. This will ensure that consent is always collected as needed and there is no path where the user can launch the app without consent being collected. If setupUI is missing in some entry points, you will see lower consent rates as users will be using the app without giving consent.

Configure the SDK

We support three options for configuring the UI and the behavior of the SDK:

  • Didomi Console: the SDK is configured remotely from the Didomi Console

  • Local file: the SDK is configured from a didomi_config.json file embedded in your app package

  • Remote file: the SDK is configured from a remote didomi_config.json file

You can configure the consent notice in your app by creating a notice in your Didomi Console. It will automatically be linked to your app through your API Key and, optionally, your notice id. You can access the Didomi console here.

In order to enable this option, make sure to pass the disableDidomiRemoteConfig parameter as false when calling the initialize method as shown below.

Didomi.initialize(
        'YOUR_API_KEY', 
        undefined, 
        undefined, 
        undefined, 
        false, 
        undefined, 
        'YOUR_NOTICE_ID'
    );

The SDK will automatically use the remote configuration hosted by Didomi and cache it locally. The cached version is refreshed every 60 minutes. If there is no connection available to download the remote configuration and no locally cached version, the SDK will try to use a local didomi_config.json configuration file as a fallback. See the Local option below for more information on how to configure the SDK through a local configuration file.

Local file

Using a local file automatically disables the TCF integration. If your app uses the TCF, you must use a configuration from the Didomi Console.

Using a local file will prevent you to support multiple regulations.

With this option, you create your own SDK configuration file and embed it in your app package.

The SDK behavior is configured in a didomi_config.json file that must be placed in the Android and iOS folders of your project.

You can create a file with the following content to get started:

{
    "app": {
        "name": "My App Name",
        "privacyPolicyURL": "http://www.website.com/privacy",
        "vendors": {
            "iab": {
                "all": true
            }
        },
        "gdprAppliesGlobally": true,
        "gdprAppliesWhenUnknown": true
    }
}

For Android, the configuration file must be placed in the assets folder of the Android platform code (in this example: android/app/src/main/assets)

For iOS, add the configuration file to the project and make sure the project.pbxproj file is updated.

You also need to disable loading the remote configuration to ensure that only the local file is loaded and that no HTTP request is sent. Update your initialize call to set the disableDidomiRemoteConfig parameter to true:

 Didomi.initialize(
        'YOUR_API_KEY', 
        undefined, 
        undefined, 
        undefined, 
        true, 
        undefined, 
        'YOUR_NOTICE_ID'
    );

Your SDK is now setup. Read the Getting started section of our Mobile SDKs to learn more about how to configure it to match your app UI and requirements.

Remote file

Enabling this option will prevent the configuration from being loaded from the Didomi Console.

You can provide a remote URL for the SDK to download the didomi_config.json configuration file from. That allows you to update the SDK configuration without having to re-publish you mobile application.

When that configuration is enabled, the SDK will automatically use the remote configuration and cache it locally. The cached version is refreshed every 60 minutes. If there is no connection available to download the remote file and no locally cached version, the SDK will try to use the local didomi_config.json (described above) as a fallback.

To enable that option, change your call to initialize to provide the remote file URL:�

 Didomi.initialize(
        'YOUR_API_KEY', 
        undefined, 
        "http://www.website.com/didomi_config.json", 
        undefined, 
        false, 
        undefined, 
        'YOUR_NOTICE_ID'
    );

Also see the reference documentation of the initialize function for more information.

Last updated