Iubenda logo
Start generating

Documentation

Table of Contents

React-Native Developer’s Guide for iubenda SDK Integration

Whether you’re working on an iOS or Android application, this guide provides step-by-step instructions to ensure a smooth integration process.

1. Add the iubenda SDK to your project

1.1 IOS:

To add the iubenda IOS SDK to your project, you can use CocoaPods with the following configuration:

platform :ios, min_ios_version_supported
source "https://github.com/iubenda/cocoapods.git"
target 'MyApp' do
use_frameworks!
pod 'IubendaMobileSDK', '2.6.7'
end

To automatically update the library version with pod update, you can set the dependency as:

  • 'IubendaMobileSDK', '~> 2.6.7' for specific version installs
  • 'IubendaMobileSDK', '~> 2.6' for minor updates
  • 'IubendaMobileSDK' for all updates

To use the library in your code:

  • Add import iubenda in your source files to use the library in Swift
  • Add #import <iubenda/iubenda-Swift.h> in your source files to use the library in Objective-C

1.2 Android:

Add the following repository and dependency to your build.gradle file:

repositories {
maven { url "https://libraries.iubenda.com/android" }
}
dependencies {
implementation "com.iubenda:mobile-sdk:2.6.7"
}

To automatically update the library version on build, you can set the dependency as:

  • "com.iubenda:mobile-sdk:2.6.+" for trivial updates
  • "com.iubenda:mobile-sdk:2.+" for minor updates
  • "com.iubenda:mobile-sdk:+" for all updates

2. Initialize the SDK on Android and iOS projects:

2.1 iOS and Android:

For iOS:

In your AppDelegate class, inside the didFinishLaunchingWithOptions method, create a configuration object with your settings and call IubendaCMP.initialize() (Details)

let config = IubendaCMPConfiguration()
config.gdprEnabled = true
config.googleAds = true
config.siteId = "12341234"
config.cookiePolicyId = "56785678"
config.applyStyles = true
config.cssFile = Bundle.main.path(forResource: "custom_style", ofType: "css")
config.jsonFile = Bundle.main.path(forResource: "config", ofType: "json")
IubendaCMP.initialize(with: config)

For Android:

Create a new class that extends android.app.Application and set it in the app’s manifest if you don’t already have such class in your project

<application android:name=".App"...>...</application>

In your Application class, inside the onCreate method, create a configuration object with your settings and call IubendaCMP.initialize() (Details)

@Override
public void onCreate() {
super.onCreate();
IubendaCMPConfig config = IubendaCMPConfig.builder()
.gdprEnabled(true)
.siteId("12341234")
.cookiePolicyId("56785678")
.googleAds(true)
.cssResource(R.raw.custom_style)
.jsonResource(R.raw.config_json)
.applyStyles(true)
.build();
IubendaCMP.initialize(this, config);
}

2.2 Initialize the SDK on React Native:

2.2.1 iOS:

Create a Bridge class with .h and .m files and add an initialize method that will call iubenda Mobile SDK’s native [IubendaCMP initializeWith:configuration] method.

IMPORTANT NOTE: If you want to use “jsonResource”, “jsonFile”, “cssFile”, “dismissColor” configurations,
please initialize SDK in Application class for Android and AppDelegate class for IOS (Option 2.1).

IubendaBridge.h:

#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"


NS_ASSUME_NONNULL_BEGIN


@interface IubendaBridge : NSObject <RCTBridgeModule>


@end


NS_ASSUME_NONNULL_END

IubendaBridge.m:

#import "IubendaBridge.h"
#import "React/RCTLog.h"
#import <iubenda/iubenda-Swift.h>

@implementation IubendaBridge

// This RCT (React) "macro" exposes the current module to JavaScript
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(initialize: (NSDictionary *) config)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    
    @try{
      
      IubendaCMPConfiguration *configuration = [[IubendaCMPConfiguration alloc] init];
      
      if ([config objectForKey:@"gdprEnabled"]) {
        configuration.gdprEnabled = [config objectForKey:@"gdprEnabled"];
      }
      
      if ([config objectForKey:@"forceConsent"]) {
        configuration.forceConsent = [config objectForKey:@"forceConsent"];
      }
      
      if ([config objectForKey:@"googleAds"]) {
        configuration.googleAds = [config objectForKey:@"googleAds"];
      }
      
      if ([config objectForKey:@"siteId"]) {
        configuration.siteId = [config objectForKey:@"siteId"];
      }
      
      if ([config objectForKey:@"cookiePolicyId"]) {
        configuration.cookiePolicyId = [config objectForKey:@"cookiePolicyId"];
      }
      
      if ([config objectForKey:@"cssContent"]) {
        configuration.cssContent = [config objectForKey:@"cssContent"];
      }
      
      if ([config objectForKey:@"jsonContent"]) {
        configuration.jsonContent = [config objectForKey:@"jsonContent"];
      }
      
      if ([config objectForKey:@"cssUrl"]) {
        configuration.cssUrl = [config objectForKey:@"cssUrl"];
      }
      
      if ([config objectForKey:@"applyStyles"]) {
        configuration.applyStyles = [config objectForKey:@"applyStyles"];
      }
      
      if ([config objectForKey:@"acceptIfDismissed"]) {
        configuration.acceptIfDismissed = [config objectForKey:@"acceptIfDismissed"];
      }
      
      if ([config objectForKey:@"skipNoticeWhenOffline"]) {
        configuration.skipNoticeWhenOffline = [config objectForKey:@"skipNoticeWhenOffline"];
      }
      
      if ([config objectForKey:@"preventDismissWhenLoaded"]) {
        configuration.preventDismissWhenLoaded = [config objectForKey:@"preventDismissWhenLoaded"];
      }
      
      if ([config objectForKey:@"csVersion"]) {
        configuration.csVersion = [config objectForKey:@"csVersion"];
      }
      
      if ([config objectForKey:@"proxyUrl"]) {
        configuration.proxyUrl = [config objectForKey:@"proxyUrl"];
      }
      
      if ([config objectForKey:@"portraitWidth"]) {
        configuration.portraitWidth = [[config objectForKey:@"portraitWidth"] integerValue];
      }
      
      if ([config objectForKey:@"portraitHeight"]) {
        configuration.portraitHeight = [[config objectForKey:@"portraitHeight"] integerValue];
      }
      
      if ([config objectForKey:@"landscapeWidth"]) {
        configuration.landscapeWidth = [[config objectForKey:@"landscapeWidth"] integerValue];
      }
      
      if ([config objectForKey:@"landscapeHeight"]) {
        configuration.landscapeHeight = [[config objectForKey:@"landscapeHeight"] integerValue];
      }
    
      [IubendaCMP initializeWith:configuration];
      
    }
    @catch(NSException *exception){

    }
  });
}

@end

2.2.2 Android:

Create a Bridge class that implements ReactContextBaseJavaModule and add an initialize method that will call iubenda Mobile SDK’s native IubendaCMP.initialize(context, config) method.

IMPORTANT NOTE: If you want to use “jsonResource”, “jsonFile”, “cssFile”, “dismissColor” configurations,
please initialize SDK in Application class for Android and AppDelegate class for iOS (Option 2.1).

import android.app.Activity;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.iubenda.iab.IubendaCMP;
import com.iubenda.iab.IubendaCMPConfig;

public class IubendaBridge extends ReactContextBaseJavaModule {

    public IubendaBridge(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "IubendaBridge";
    }

    @ReactMethod
    public void initialize(ReadableMap configMap) {
        final ReactApplicationContext context = getReactApplicationContext();

        IubendaCMPConfig.Builder builder = IubendaCMPConfig.builder();

        if(hasValidKey("gdprEnabled",configMap))
            builder.gdprEnabled(configMap.getBoolean("gdprEnabled"));

        if(hasValidKey("forceConsent",configMap))
            builder.forceConsent(configMap.getBoolean("forceConsent"));

        if(hasValidKey("googleAds",configMap))
            builder.googleAds(configMap.getBoolean("googleAds"));

        if(hasValidKey("siteId",configMap))
            builder.siteId(configMap.getString("siteId"));

        if(hasValidKey("cookiePolicyId",configMap))
            builder.cookiePolicyId(configMap.getString("cookiePolicyId"));

        if(hasValidKey("cssContent",configMap))
            builder.cssContent(configMap.getString("cssContent"));

        if(hasValidKey("jsonContent",configMap))
            builder.jsonContent(configMap.getString("jsonContent"));

        if(hasValidKey("cssUrl",configMap))
            builder.cssUrl(configMap.getString("cssUrl"));

        if(hasValidKey("applyStyles",configMap))
            builder.applyStyles(configMap.getBoolean("applyStyles"));

        if(hasValidKey("acceptIfDismissed",configMap))
            builder.acceptIfDismissed(configMap.getBoolean("acceptIfDismissed"));

        if(hasValidKey("skipNoticeWhenOffline",configMap))
            builder.skipNoticeWhenOffline(configMap.getBoolean("skipNoticeWhenOffline"));

        if(hasValidKey("preventDismissWhenLoaded",configMap))
            builder.preventDismissWhenLoaded(configMap.getBoolean("preventDismissWhenLoaded"));

        if(hasValidKey("csVersion",configMap))
            builder.csVersion(configMap.getString("csVersion"));

        if(hasValidKey("proxyUrl",configMap))
            builder.proxyUrl(configMap.getString("proxyUrl"));

        if(hasValidKey("portraitWidth",configMap))
            builder.portraitWidth(configMap.getInt("portraitWidth"));

        if(hasValidKey("portraitHeight",configMap))
            builder.portraitHeight(configMap.getInt("portraitHeight"));

        if(hasValidKey("landscapeWidth",configMap))
            builder.landscapeWidth(configMap.getInt("landscapeWidth"));

        if(hasValidKey("landscapeHeight",configMap))
            builder.landscapeHeight(configMap.getInt("landscapeHeight"));

        IubendaCMPConfig config = builder.build();
        IubendaCMP.initialize(context, config);

    }

    public static boolean hasValidKey(String key, ReadableMap options) {
        return options != null && options.hasKey(key) && !options.isNull(key);
    }
}

Create a packager class that implements ReactPackage:

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class IubendaPackager implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new IubendaBridge(reactContext));

        return modules;
    }

}

On the Android project, find getPackages() method in Application class and add your packager class:

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new IubendaPackager());
      return packages;
    }

In your React-Native tsx file call initialize method like:

class App extends Component {

componentDidMount(){
var IubendaBridge = NativeModules.IubendaBridge;

var config = {
  gdprEnabled: true,
  forceConsent: true,
  siteId: '12345',
  googleAds: true,
  applyStyles: true,
  cookiePolicyId: '252372',
  acceptIfDismissed: true,
  preventDismissWhenLoaded: true,
  //   cssContent: '',
  jsonContent: '{"enableTcf": true,"tcfVersion": 2,"perPurposeConsent" : true}',
  //   portraitWidth: 200,
  //   portraitHeight: 200,
  //   landscapeWidth: 200,
  //   landscapeHeight: 200,
  //   proxyUrl: 'https....',
  //   cssUrl: 'https....'
  //   csVersion: 'current',
  skipNoticeWhenOffline: true
};

IubendaBridge.initialize(config);
}

render(){
return ( )
}
};

3. Call Native Methods from React Native

To call native SDK methods, Bridge classes (Sections 2.2) must be created in IOS and Android projects, even if the SDK initialization is done natively in Application and AppDelegate classes. After creating Bridge classes in IOS+Android and Packager class in Android, all native SDK methods can be called via React-Native. You just need to decide which methods to use and add them to Bridge classes like:

Android:

@ReactMethod
public void askConsent() {
Activity activity = getCurrentActivity();
IubendaCMP.askConsent(activity);
}

iOS:

RCT_EXPORT_METHOD(askConsent)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    
    @try{
      
      UIViewController *presentedViewController = RCTPresentedViewController();
      [IubendaCMP askConsentFrom:presentedViewController];
      
    }
    @catch(NSException *exception){

    }
  });
}

In your React Native .tsx file, call the method like this:

IubendaBridge.askConsent();

This guide covers adding the iubenda SDK to your React Native project, initializing it, and calling its native methods. Ensure to replace placeholders like min_ios_version_supported with actual values suitable for your project.

Still have questions?

Attend one of our free webinars Email us Live chat