> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/react-native/installation-guide.md).

# Installation Guide

Install and configure Certta for React Native. Learn SDK requirements, module selection, permissions, session setup, runtime token updates, and color theming.

{% hint style="warning" %}
This guide covers **@caf.io/react-native-sdk 5.4.0** and above (Certta DevX). For the previous sequential `useCafSdk` flow, see the [legacy documentation](https://docs.caf.io/caf-sdk/react-native/getting-started-with-the-sdk).
{% endhint %}

## Installing the SDK for React Native

This guide walks you through the setup required to download, configure, and initialize **Certta** (`@caf.io/react-native-sdk` 5.4.0+) in a React Native app.

### Requirements

#### React Native

| Requirement              | Version |
| ------------------------ | ------- |
| **React Native Version** | 0.73.x  |
| **Node.js**              | 18      |

#### Android

| Requirement                                        | Version |
| -------------------------------------------------- | ------- |
| **Android SDK API - minimum version (minSdk)**     | 26      |
| **Android SDK API - compile version (compileSdk)** | 36      |
| **Kotlin**                                         | 1.9.10  |
| **Gradle**                                         | 8.4     |
| **Android Gradle Plugin (AGP)**                    | 8.3.2   |

#### iOS

| Requirement               | Version |
| ------------------------- | ------- |
| **iOS Deployment Target** | 15.0    |
| **Xcode**                 | 26.0    |
| **Swift**                 | 5.10    |

### Step 1: Install the SDK

```sh
npm install @caf.io/react-native-sdk
```

The published package version is **5.4.0**. Import Certta DevX hooks from the main package:

```typescript
import {
  useCerttaSdk,
  useCafFaceLiveness,
  useCafDocumentDetector,
  useCafDocumentDetectorUI,
  CafEnvironment,
} from '@caf.io/react-native-sdk';
```

{% hint style="info" %}
The sequential `useCafSdk` API remains available in the same package. Prefer Certta DevX for new integrations. See [Migrating from CafSdk](/caf-sdk/react-native/migrating-from-cafsdk.md).
{% endhint %}

### Step 2: Configure module selection

{% tabs %}
{% tab title="Expo" %}
When using Expo, `caf-modules-config.json` is generated from `app.json`. Add the plugin:

```json
{
  "plugins": [
    [
      "@caf.io/react-native-sdk",
      {
        "documentDetector": true,
        "faceLiveness": true,
        "documentDetectorUI": true,
        "faceLivenessUI": true,
        "livenessProviders": ["iproov-lite", "payface"],
        "fingerprint": true
      }
    ]
  ]
}
```

{% endtab %}

{% tab title="Community CLI" %}
Create `caf-modules-config.json` in your app root:

```json
{
  "documentDetector": true,
  "faceLiveness": true,
  "documentDetectorUI": true,
  "faceLivenessUI": true,
  "livenessProviders": ["iproov-lite", "payface"],
  "fingerprint": true
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If you omit the SDK modules configuration, all modules are enabled by default and **`iproov-lite`** is used as the Face Liveness provider.
{% endhint %}

Set each module flag to `true` to include it, or `false` to exclude it.

**iProov and Protobuf**

* **`iproov-lite`**: use when your app targets **Protobuf JavaLite** — the usual choice for a smaller Android binary.
* **`iproov-full`**: use when you need **Protobuf Java** (full) together with iProov.

{% hint style="warning" %}
If you include the **PayFace** provider, you must also use **iProov Lite** (`iproov-lite`). PayFace is built against Protobuf JavaLite; mixing it with **`iproov-full`** causes Protobuf dependency conflicts at build time.
{% endhint %}

**Fingerprint**

The Fingerprint module is optional (`fingerprint`, boolean). It defaults to `false`. Fingerprint is collected as part of the liveness flow, so it is only bundled when `faceLiveness` or `faceLivenessUI` is also enabled.

Contact CAF Support to request activation on the backend. If it is not enabled on our side, the SDK will not trigger the fingerprint library even if the property is `true` locally.

### Step 3: Android configuration

Configure the `repositories` block in your project's `android/build.gradle.kts` (usually at the root level):

{% tabs %}
{% tab title="Kotlin Script" %}

```kotlin
repositories {
    // Caf Repository
    maven { url = uri("https://repo.combateafraude.com/android/release") }
}
```

{% endtab %}

{% tab title="Groovy" %}

```groovy
repositories {
    // Caf Repository
    maven { url "https://repo.combateafraude.com/android/release" }
}
```

{% endtab %}
{% endtabs %}

### Step 4: iOS configuration

Navigate to the `ios/` directory of your React Native project and run:

```sh
pod install
```

* This step is mandatory so iOS can link the native modules.
* Re-run `pod install` whenever native dependencies are added or updated.

***

## Permissions

### Android

Declare the following in **AndroidManifest.xml**:

**Face Liveness**

| Permission                    | Description                                                              | Necessity |
| ----------------------------- | ------------------------------------------------------------------------ | --------- |
| `android.permission.CAMERA`   | Camera access for face verification (liveness).                          | Mandatory |
| `android.permission.INTERNET` | Communication with authentication and verification services (HTTPS/WSS). | Mandatory |

**Document Detector**

| Permission                                 | Description                                           | Necessity        |
| ------------------------------------------ | ----------------------------------------------------- | ---------------- |
| `android.permission.CAMERA`                | Camera access to capture document images.             | Only for capture |
| `android.permission.INTERNET`              | Upload captured images for processing and validation. | Mandatory        |
| `android.permission.READ_EXTERNAL_STORAGE` | Access stored files when document upload is enabled.  | Only for upload  |

### iOS

Declare the following in **Info.plist**:

**Face Liveness**

| Permission                 | Description                                                              | Necessity |
| -------------------------- | ------------------------------------------------------------------------ | --------- |
| `NSCameraUsageDescription` | Camera access for face verification (liveness).                          | Mandatory |
| Network access             | Communication with authentication and verification services (HTTPS/WSS). | Mandatory |

**Document Detector**

| Permission                       | Description                                           | Necessity        |
| -------------------------------- | ----------------------------------------------------- | ---------------- |
| `NSCameraUsageDescription`       | Camera access to capture document images.             | Only for capture |
| Network access                   | Upload captured images for processing and validation. | Mandatory        |
| `NSPhotoLibraryUsageDescription` | Access stored files when document upload is enabled.  | Only for upload  |

***

## Configuring the session

To generate your mobile token, follow this guide:

{% content-ref url="/pages/9JinhiBRarpeMNxbUECl" %}
[Authentication](/caf-sdk/authentication.md)
{% endcontent-ref %}

Initialize Certta once you have a valid mobile token (JWT) and user ID — typically after login:

```typescript
import { useEffect } from 'react';
import { useCerttaSdk, CafEnvironment } from '@caf.io/react-native-sdk';

function App() {
  const { configureSDK, isInitialized } = useCerttaSdk();

  useEffect(() => {
    void (async () => {
      try {
        await configureSDK({
          mobileToken: 'your-jwt',
          userId: 'user-id',
          environment: CafEnvironment.PROD,
          securityEnabled: true,
        });
      } catch {
        // Handle BRIDGE_EXCEPTION
      }
    })();
  }, []);

  // await isInitialized() when needed
}
```

#### `CerttaConfiguration` parameters

| Parameter            | Type                     | Description                                                |
| -------------------- | ------------------------ | ---------------------------------------------------------- |
| `mobileToken`        | `string`                 | CAF mobile JWT from your backend.                          |
| `userId`             | `string`                 | End-user identifier.                                       |
| `environment`        | `CafEnvironment`         | Backend environment: `PROD`, `BETA`, or `DEV`.             |
| `securityEnabled`    | `boolean`                | Enables security checks. Default `true`.                   |
| `colorConfiguration` | `CafColorConfiguration?` | Optional color theme. See [Color theming](#color-theming). |

{% hint style="info" %}
`configureSDK` rejects with `CerttaPlatformException` and code `BRIDGE_EXCEPTION` when the native mapper rejects the configuration.
{% endhint %}

### Runtime configuration updates

`userId` and `mobileToken` can be updated after the initial `configureSDK` without repeating the full configuration:

```typescript
const { updateUserId, updateMobileToken } = useCerttaSdk();

updateUserId('new-user-id');
updateMobileToken('new-jwt-token');
```

{% hint style="warning" %}
Use these methods whenever your app performs logout/login or when your backend issues a refreshed JWT so Certta stays synchronized with the active session.
{% endhint %}

### Logs

SDK pipeline logs are collected by `useCerttaSdk` in the `logs` array:

```typescript
const { logs } = useCerttaSdk();

useEffect(() => {
  logs.forEach((log) => {
    console.log(`${log.level}: ${log.message}`);
  });
}, [logs]);
```

***

## Color theming

Face Liveness and Document Detector support custom colors so the SDK UI can match your brand. Pass hexadecimal strings (for example `"#RRGGBB"`) on `CafColorConfiguration` when you call `configureSDK`:

```typescript
await configureSDK({
  mobileToken: 'your-jwt',
  userId: 'user-id',
  environment: CafEnvironment.PROD,
  colorConfiguration: {
    primaryColor: '#FF0000',
    secondaryColor: '#00FF00',
    backgroundColor: '#FFFFFF',
    contentColor: '#000000',
    mediumColor: '#D1D1D1',
    dialogBackgroundColor: '#FFFFFF',
    dialogBorderColor: '#0C395E',
  },
});
```

{% hint style="info" %}
All color fields are optional. Override only the colors you need.
{% endhint %}

| Color property          | Description                                    |
| ----------------------- | ---------------------------------------------- |
| `primaryColor`          | Main color for buttons and highlights.         |
| `secondaryColor`        | Secondary color for complementary elements.    |
| `backgroundColor`       | Screen background color.                       |
| `contentColor`          | Color used for texts and icons.                |
| `mediumColor`           | Neutral color for elements like progress bars. |
| `dialogBackgroundColor` | Dialog and popup background color.             |
| `dialogBorderColor`     | Dialog and popup border color.                 |

***

## Code obfuscation

Add ProGuard/R8 rules to `android/app/proguard-rules.pro` so the SDK keeps working after obfuscation. See the full rule set in [Legacy Getting Started — ProGuard/R8 Rules](/caf-sdk/react-native/getting-started-with-the-sdk.md#proguardr8-rules).

***

## Next steps

{% content-ref url="/pages/kzXW2VibOXBWCXSGprnP" %}
[Face Liveness](/caf-sdk/react-native/face-liveness.md)
{% endcontent-ref %}

{% content-ref url="/pages/NcrmbSIkgcjxtOxZcp4D" %}
[Document Detector](/caf-sdk/react-native/document-detector.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.caf.io/caf-sdk/react-native/installation-guide.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.