> 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/document-detector.md).

# Document Detector

Install and launch Document Detector for React Native. Learn configuration options, UI setup, customization paths, hook events, and result handling.

{% 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 %}

## Prerequisites

Before proceeding, ensure the Certta SDK is properly installed. If you haven't done this yet, please refer to our Installation Guide.

{% content-ref url="/pages/tC8MaVHQnCi3YdHr6s0p" %}
[Installation Guide](/caf-sdk/react-native/installation-guide.md)
{% endcontent-ref %}

Enable `documentDetector` (and `documentDetectorUI` if you want the built-in UI) in `caf-modules-config.json`.

## Starting Document Detector

Use `useCafDocumentDetector` and call `open()` with a `CerttaDocumentDetectorConfiguration` object. Read results from the hook `event` state.

{% hint style="info" %}
`CerttaDocumentDetectorConfiguration` is the headless Document Detector module. The `flow` list is required.
{% endhint %}

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

function DocumentCapture() {
  const { open, event } = useCafDocumentDetector();

  useEffect(() => {
    if (event.success) {
      // Handle success — event.success.response is a JWT
    } else if (event.error) {
      // Handle error
    }
  }, [event]);

  const startCapture = async () => {
    try {
      await open({
        flow: [
          { document: CafDocument.RG_FRONT },
          { document: CafDocument.RG_BACK },
        ],
      });
    } catch {
      // Handle BRIDGE_EXCEPTION
    }
  };

  // ...
}
```

`open()` rejects with `CerttaPlatformException` and code `BRIDGE_EXCEPTION` when the native mapper rejects the configuration.

### `CerttaDocumentDetectorConfiguration` parameters

| Parameter                     | Default | Description                                                         |
| ----------------------------- | ------- | ------------------------------------------------------------------- |
| `flow`                        | *None*  | Ordered list of capture steps. **Required.**                        |
| `uploadSettings`              | `null`  | Settings for uploading document images.                             |
| `showPreview`                 | `true`  | Shows a preview screen for user confirmation when `true`.           |
| `requestTimeout`              | `60`    | Maximum time (in seconds) for network requests.                     |
| `showPopup`                   | `false` | Displays a guidance popup during capture when `true`.               |
| `maxRetryAttempts`            | `3`     | Maximum retries after a failed capture. Use `0` to disable retries. |
| `messageCustomization`        | `null`  | In-flow capture messages.                                           |
| `previewCustomization`        | `null`  | Preview screen copy.                                                |
| `uploadCustomization`         | `null`  | Upload dialog copy.                                                 |
| `uploadMessagesCustomization` | `null`  | Messages shown while the document is sent and processed.            |
| `retryCustomization`          | `null`  | Retry screen copy.                                                  |

## Starting Document Detector UI

Use `useCafDocumentDetectorUI` and call `open()` with a `CerttaDocumentDetectorUIConfiguration`.

{% hint style="info" %}
Enable `documentDetectorUI` in `caf-modules-config.json`. The native layer maps `flow` into the document selection screen.
{% endhint %}

```typescript
import { useCafDocumentDetectorUI, CafDocument } from '@caf.io/react-native-sdk';

function DocumentCaptureUI() {
  const { open, event } = useCafDocumentDetectorUI();

  const startCapture = async () => {
    try {
      await open({
        flow: [
          { document: CafDocument.RG_FRONT },
          { document: CafDocument.RG_BACK },
        ],
        documentSelectionScreen: {
          title: 'Choose a document',
          description: 'Select the document you want to use',
        },
      });
    } catch {
      // Handle BRIDGE_EXCEPTION
    }
  };

  // ...
}
```

### `CerttaDocumentDetectorUIConfiguration` parameters

Inherits every field from `CerttaDocumentDetectorConfiguration`, plus:

| Parameter                 | Default | Description                                                               |
| ------------------------- | ------- | ------------------------------------------------------------------------- |
| `instructionScreen`       | `null`  | Instructions shown before camera or file gallery.                         |
| `documentSelectionScreen` | `null`  | Title and description of the document picker. Documents come from `flow`. |

### Deep dive into customizations

{% content-ref url="/pages/7AL4vpmRrt9f9zLLHYYG" %}
[UI Customizations](/caf-sdk/react-native/document-detector/ui-customizations.md)
{% endcontent-ref %}

## Supported documents

| Document     | Description                                                                                                     |
| ------------ | --------------------------------------------------------------------------------------------------------------- |
| `RG_FRONT`   | Front side of the RG document, where the photo is located.                                                      |
| `RG_BACK`    | Back side of the RG document.                                                                                   |
| `RG_FULL`    | Open RG document, displaying both the front and back sides together.                                            |
| `CNH_FRONT`  | Front side of the CNH document, where the photo is located.                                                     |
| `CNH_BACK`   | Back side of the CNH document.                                                                                  |
| `CNH_FULL`   | Open CNH document, displaying both the front and back sides together.                                           |
| `CRLV`       | CRLV document.                                                                                                  |
| `RNE_FRONT`  | Front side of the RNE or RNM document.                                                                          |
| `RNE_BACK`   | Back side of the RNE or RNM document.                                                                           |
| `PASSPORT`   | Passport document, displaying the photo and personal data.                                                      |
| `CTPS_FRONT` | Front side of the CTPS document, where the photo is located.                                                    |
| `CTPS_BACK`  | Back side of the CTPS document.                                                                                 |
| `ANY`        | Allows submission of any type of document, including all those listed above or any other unclassified document. |

In TypeScript, use the `CafDocument` enum (`CafDocument.RG_FRONT`, `CafDocument.CNH_BACK`, `CafDocument.PASSPORT`, and so on).

### Supported file formats (`CafFileFormat`)

Used by `CafDocumentDetectorUploadSettings.fileFormats`.

| Type   | Value             |
| ------ | ----------------- |
| `PNG`  | `image/png`       |
| `JPG`  | `image/jpg`       |
| `JPEG` | `image/jpeg`      |
| `PDF`  | `application/pdf` |
| `HEIF` | `image/heif`      |
| `HEIC` | `image/heic`      |

{% hint style="info" %}
Full HEIC support is available on iOS only.
{% endhint %}

## Understanding Document Detector events and results

### `success` (`CerttaSuccess`)

Triggered when the document is captured and processed successfully.

* `response`: a JWT with the result data from the Document Detector flow.

{% hint style="warning" %}
Ensure the JWT response is evaluated on the backend. This process must include validating the token's signature and verifying the `isAlive` and `isMatch` fields. Do not perform these validations on the client side.
{% endhint %}

### `error` (`CerttaError`)

Triggered when capture fails (network issues, user cancellation, camera permission denials, or configuration errors).

* `type`: error identifier mapped from the native SDK.
* `cause`: additional context, when present.

| Event                 | Typical cause                                                                                                                       |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `InitializationError` | **`configure`** not called, empty token or user ID, or invalid **`maxRetryAttempts`**.                                              |
| `PermissionError`     | Camera (or related) permission denied.                                                                                              |
| `NetworkError`        | Connectivity or server-side issues surfaced as network class errors.                                                                |
| `SecurityError`       | Security checks failed.                                                                                                             |
| `UnknownError`        | Other failures not mapped to a specific case.                                                                                       |
| `Cancelled`           | Occurs when the user abandons the flow before completion, such as by pressing the back button or sending the app to the background. |


---

# 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/document-detector.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.