Scanbot React Native Document Scanner SDK

https://docs.scanbot.io/react-native/document-scanner-sdk/
Admin
A software development kit for integrating high-quality document scanning, automatic cropping, and...
Tokens:33,771
Snippets:233
Trust Score:10
Update:7 months ago
Show doc for...
Tokens:
Raw
### Initialize Scanbot SDK with Full Configuration (React Native)

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/initializing-the-sdk

This comprehensive example shows how to initialize the Scanbot SDK in React Native with extended configuration options. It includes setting the license key, enabling/disabling logging, configuring storage format and quality, and enabling GPU/XNNPACK acceleration. It also demonstrates conditional file encryption setup.

```javascript
import {FILE_ENCRYPTION_ENABLED, IMAGE_FILE_FORMAT} from '@utils';

import ScanbotSDK, {SdkConfiguration} from 'react-native-scanbot-sdk';

async function initializeScanbotSDK() {
  try {
    const configuration = new SdkConfiguration({
      // Please note: this is just an example license key string (it is not a valid license)
      licenseKey:
        'fXbN2PmyqEAZ+btdkSIS36TuX2j/EE5qxVNcZMXYErbLQ'
        + '3OBnE10aOQxYI8L4UKwHiZ63jthvoFwUevttctBk0wVJ7Z'
        + '+Psz3/Ry8w7pXvfpB1o+JrnzGGcfwBnRi/5raQ2THDeokR'
        + 'RB1keky2VBOFYbCfYt3Hqms5txF2z70PE/SBTMTIVuxL7q'
        + '1xcHDHclbEBriDtrHw8Pmhh9FqTg/r/4kRN/oEX37QGp+Y'
        + '3ogwIBbSmV+Cv+VuwtI31uXY3/GkyN/pSJZspIl+exwQDv'
        + 'O0O1/R/oAURpfM4ydaWReRJtjW8+b1r9rUgPERguaXfcse'
        + 'HlnclItgDfBHzUUFJJU/g==\nU2NhbmJvdFNESwppby5zY'
        + '2FuYm90LmRlbW8ueGFtYXJpbgoxNDg0NjExMTk5CjcxNjc'
        + 'KMw==\n',
      loggingEnabled: true,
      enableNativeLogging: false,
      storageImageFormat: IMAGE_FILE_FORMAT,
      storageImageQuality: 80,
      allowGpuAcceleration: true,
      allowXnnpackAcceleration: true,
    });

    // Set the following properties to enable encryption.
    if (FILE_ENCRYPTION_ENABLED) {
      configuration.fileEncryptionMode = 'AES256';
      configuration.fileEncryptionPassword =
        'SomeSecretPa$$w0rdForFileEncryption';
    }

    const sdkInitializationResult = await ScanbotSDK.initialize(configuration);
  } catch (error: any) {
    console.error(error);
  }
}
```

--------------------------------

### Install React Native Document Scanner SDK using npm, Yarn, or Expo

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

These commands install the Scanbot Document Scanner SDK for React Native. Choose the command corresponding to your package manager (npm, Yarn, or Expo). Ensure you are in your root project folder.

```bash
npm install react-native-scanbot-sdk
```

```bash
yarn add react-native-scanbot-sdk
```

```bash
npx expo install react-native-scanbot-sdk
```

--------------------------------

### Start Document Scanner UI in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Use the `DocumentScanningFlow` and `ScanbotDocument.startScanner` to launch the single-page document scanning UI. Handle the result, checking the status for success. Customization options are available via `configuration` object.

```javascript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';

async function singlePageScanning() {
  try {
    const configuration = new DocumentScanningFlow();
    configuration.outputSettings.pagesScanLimit = 1;
    const documentResult = await ScanbotDocument.startScanner(configuration);
    if (documentResult.status === 'OK') {
      // Handle the document
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
```

--------------------------------

### Configure and Start the Introduction Screen in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/introduction-screen

This snippet demonstrates how to initialize the DocumentScanningFlow, customize the introduction screen with multiple list entries containing images and styled text, and launch the scanner.

```typescript
import {  
  CheckIntroImage,  
  DocumentScanningFlow,  
  IntroListEntry,  
  ReceiptsIntroImage,  
  ScanbotDocument,  
  StyledText,  
} from 'react-native-scanbot-sdk';  
  
async function startScanning() {  
  try {  
    /** Create the default configuration instance */  
    const configuration = new DocumentScanningFlow();  
    /** Retrieve the instance of the introduction configuration from the main configuration object. */  
    const introductionConfiguration = configuration.screens.camera.introduction;  
    /** Show the introduction screen automatically when the screen appears. */  
    introductionConfiguration.showAutomatically = true;  
    /** Create a new introduction item. */  
    const firstExampleEntry = new IntroListEntry();  
    /** Configure the introduction image to be shown. */  
    firstExampleEntry.image = new ReceiptsIntroImage();  
    /** Configure the text. */  
    firstExampleEntry.text = new StyledText({  
      text: 'Some text explaining how to scan a receipt',  
      color: '#000000',  
    });  
    /** Create a second introduction item. */  
    const secondExampleEntry = new IntroListEntry();  
    /** Configure the introduction image to be shown. */  
    secondExampleEntry.image = new CheckIntroImage();  
    /** Configure the text. */  
    secondExampleEntry.text = new StyledText({  
      text: 'Some text explaining how to scan a check',  
      color: '#000000',  
    });  
    /** Set the items into the configuration. */  
    introductionConfiguration.items = [firstExampleEntry, secondExampleEntry];  
    /** Set a screen title. */  
    introductionConfiguration.title = new StyledText({  
      text: 'Introduction',  
      color: '#000000',  
    });  
    /** Start the Document Scanner UI */  
    const documentResult = await ScanbotDocument.startScanner(configuration);  
    /** Handle the document if the status is 'OK' */  
    if (documentResult.status === 'OK') {  
    }  
  } catch (e: any) {  
    console.error(e.message);  
  }  
}
```

--------------------------------

### Launch React Native Document Scanner

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/how-to-get-started

This code snippet demonstrates how to launch the default Document Scanner UI with a basic configuration. It imports necessary components from the 'react-native-scanbot-sdk' and handles the result of the scanning process. No external dependencies are required beyond the SDK itself.

```typescript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';  
  
async function startScanning() {  
  try {  
    /** Create the default configuration instance */  
    const configuration = new DocumentScanningFlow();  
    /** Start the Document Scanner UI */  
    const documentResult = await ScanbotDocument.startScanner(configuration);  
    /** Handle the document if the status is 'OK' */  
    if (documentResult.status === 'OK') {  
    }  
  } catch (e: any) {  
    console.error(e.message);  
  }  
}
```

--------------------------------

### Configure and Start the Review Screen in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/review-screen

Demonstrates how to initialize the DocumentScanningFlow, customize specific screen configurations such as the Review, Reorder, and Cropping screens, and launch the scanner.

```typescript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';

async function startScanning() {
  try {
    /** Create the default configuration instance */
    const configuration = new DocumentScanningFlow();
    /** Retrieve the instance of the review configuration from the main configuration object. */
    const reviewScreenConfiguration = configuration.screens.review;
    /** Enable / Disable the review screen. */
    reviewScreenConfiguration.enabled = true;
    /** Hide the zoom button. */
    reviewScreenConfiguration.zoomButton.visible = false;
    /** Hide the add button. */
    reviewScreenConfiguration.bottomBar.addButton.visible = false;
    /** Retrieve the instance of the reorder pages configuration from the main configuration object. */
    const reorderScreenConfiguration = configuration.screens.reorderPages;
    /** Hide the guidance view. */
    reorderScreenConfiguration.guidance.visible = false;
    /** Set the title for the reorder screen. */
    reorderScreenConfiguration.topBarTitle.text = 'Reorder Pages Screen';
    /** Retrieve the instance of the cropping configuration from the main configuration object. */
    const croppingScreenConfiguration = configuration.screens.cropping;
    /** Hide the reset button. */
    croppingScreenConfiguration.bottomBar.resetButton.visible = false;
    /** Retrieve the retake button configuration from the main configuration object. */
    const retakeButtonConfiguration =
      configuration.screens.review.bottomBar.retakeButton;
    /** Show the retake button. */
    retakeButtonConfiguration.visible = true;
    /** Configure the retake title color. */
    retakeButtonConfiguration.title.color = '#ffffff';
    /** Apply the retake configuration button to the review bottom bar configuration. */
    configuration.screens.review.bottomBar.retakeButton =
      retakeButtonConfiguration;
    /** Apply the configurations. */
    configuration.screens.review = reviewScreenConfiguration;
    configuration.screens.reorderPages = reorderScreenConfiguration;
    configuration.screens.cropping = croppingScreenConfiguration;
    /** Start the Document Scanner UI */
    const documentResult = await ScanbotDocument.startScanner(configuration);
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
```

--------------------------------

### Migrate Finder Document Scanner Configuration

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/migration

Compares the legacy FinderDocumentScannerConfiguration (v1.0) with the new DocumentScanningFlow (v2.0) approach. The new configuration uses a modular screen-based setup to define viewfinders, palettes, and UI behavior.

```TypeScript (v1.0)
import ScanbotSDK, {  
  AspectRatio,  
  FinderDocumentScannerConfiguration,  
} from 'react-native-scanbot-sdk';  
  
async function finderDocumentScanner() {  
  const configuration: FinderDocumentScannerConfiguration = {  
    topBarBackgroundColor: '#ffffff',  
    finderAspectRatio: new AspectRatio({  
      width: 3,  
      height: 4,  
    }),  
    shutterButtonHidden: true,  
  };  
  
  const pageResult = await ScanbotSDK.UI.startFinderDocumentScanner(  
    configuration,  
  );  
}
```

```TypeScript (v2.0)
import {  
  AspectRatio,  
  DocumentScanningFlow,  
  NoButtonMode,  
  PageSnapFunnelAnimation,  
  ScanbotDocument,  
} from 'react-native-scanbot-sdk';  
  
async function finderDocumentScanner() {  
  const configuration = new DocumentScanningFlow();  
  
  const palette = configuration.palette;  
  palette.sbColorPrimary = '#ffffff';  
  palette.sbColorOnPrimary = '#0027ff';  
  
  const cameraScreenConfiguration = configuration.screens.camera;  
  
  const viewFinder = cameraScreenConfiguration.viewFinder;  
  viewFinder.visible = true;  
  viewFinder.aspectRatio = new AspectRatio({width: 3, height: 4});  
  
  const bottomBar = cameraScreenConfiguration.bottomBar;  
  bottomBar.previewButton = new NoButtonMode({});  
  bottomBar.autoSnappingModeButton.visible = false;  
  bottomBar.importButton.visible = false;  
  
  cameraScreenConfiguration.acknowledgement.acknowledgementMode = 'NONE';  
  cameraScreenConfiguration.captureFeedback.snapFeedbackMode =  
    new PageSnapFunnelAnimation();  
  
  configuration.screens.review.enabled = false;  
  configuration.outputSettings.pagesScanLimit = 1;  
  
  const documentData = await ScanbotDocument.startScanner(configuration);  
}
```

--------------------------------

### Install React Native Scanbot SDK with npm

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/installing-the-sdk

Installs the React Native Scanbot SDK using the npm package manager. This is a standard command for adding Node.js packages to a project.

```bash
npm install react-native-scanbot-sdk  
```

--------------------------------

### Install React Native Scanbot SDK with Yarn

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/installing-the-sdk

Installs the React Native Scanbot SDK using the Yarn package manager. This command is an alternative to npm for managing project dependencies.

```bash
yarn add react-native-scanbot-sdk  
```

--------------------------------

### Configure and Start the Crop Screen in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/crop-screen

This snippet demonstrates how to initialize the DocumentScanningFlow configuration, customize UI elements like colors and button visibility, and launch the scanner. It handles the result status and includes basic error handling for the scanning process.

```typescript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';

async function startScanning() {
  try {
    /** Create the default configuration instance */
    const configuration = new DocumentScanningFlow();
    /** Retrieve the instance of the crop configuration from the main configuration object. */
    const cropScreenConfiguration = configuration.screens.cropping;
    /** Disable the rotation feature. */
    cropScreenConfiguration.bottomBar.rotateButton.visible = false;
    /** Configure various colors. */
    configuration.appearance.topBarBackgroundColor = '#C8193C';
    cropScreenConfiguration.topBarConfirmButton.foreground.color = '#FFFFFF';
    /** Customize a UI element's text */
    configuration.localization.croppingTopBarCancelButtonTitle = 'Cancel';
    /** Start the Document Scanner UI */
    const documentResult = await ScanbotDocument.startScanner(configuration);
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
```

--------------------------------

### Configure and Start React Native Document Cropping UI

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/scan-from-image/using-the-cropping-ui-screen

This snippet demonstrates how to initialize and launch the cropping UI screen using the Scanbot SDK in React Native. It includes selecting an image, creating a document object, configuring UI elements like button visibility and colors, and starting the cropping process. The function handles potential errors and processes the result if the cropping is successful.

```javascript
import {
  selectImagesFromLibrary,
} from '@utils';
import {
  CroppingConfiguration,
  ScanbotDocument,
} from 'react-native-scanbot-sdk';

async function startDocumentDetectionWithCroppingScreen() {
  try {
    /**
     * Select an image from the Image Library
     * Return early if no image is selected or there is an issue selecting an image
     **/ 
    const selectedImagesResult = await selectImagesFromLibrary();
    if (!selectedImagesResult) {
      return;
    }
    /** Create a new document with the provided imageFileUri. */
    const document = await ScanbotDocument.createDocumentFromImages({
      images: selectedImagesResult,
    });
    /** Create a new configuration with the document and the document's first page. */
    const configuration = new CroppingConfiguration({
      documentUuid: document.uuid,
      pageUuid: document.pages[0].uuid,
    });
    /* Customize the configuration. */
    configuration.cropping.bottomBar.rotateButton.visible = false;
    configuration.appearance.topBarBackgroundColor = '#c8193c';
    configuration.cropping.topBarConfirmButton.foreground.color = '#ffffff';
    configuration.localization.croppingTopBarCancelButtonTitle = 'Cancel';
    /** Start the cropping UI Screen */
    const documentResult = await ScanbotDocument.startCroppingScreen(
      configuration,
    );
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}

```

--------------------------------

### Configure Scanbot SDK Plugin for Expo

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Integrate the Scanbot SDK with Expo using a config plugin in your app config file. This example shows how to enable features like iOS camera usage description, large heap, Maven URLs, and OCR blobs directory.

```json
"plugins": [
  [
    "react-native-scanbot-sdk",
    {
      "iOSCameraUsageDescription": "Document & Barcode Scanning permission",
      "largeHeap": true,
      "mavenURLs": true,
      "ocrBlobsDirPath": "./ocr_blobs"
    }
  ]
]
```

--------------------------------

### Configure iOS Camera Usage Description

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Include a description for camera usage in your iOS project's `Info.plist` file. This informs the user why the app needs camera access. Place this within the `<dict>` element.

```xml
<key>NSCameraUsageDescription</key>
<string>Describe why your app wants to access the device's camera.</string>
```

--------------------------------

### Install React Native Scanbot SDK with Expo

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/installing-the-sdk

Installs the React Native Scanbot SDK within an Expo project using the Expo CLI. This command ensures compatibility with the Expo ecosystem.

```bash
npx expo install react-native-scanbot-sdk  
```

--------------------------------

### Initialize Scanbot SDK in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Import and initialize the Scanbot SDK using the `initialize` function. This should be done early in your app's lifecycle. A license key is required for production use; testing without one has a 60-second limit per session.

```javascript
import ScanbotSDK from 'react-native-scanbot-sdk'

ScanbotSDK.initialize(new SdkConfiguration({ licenseKey: '' }))
  .then((result) => console.log(result))
  .catch((err) => console.log(err));
```

--------------------------------

### Implement ScanbotDocumentScannerView in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/classic-ui/scanning-ui

This example demonstrates how to integrate the ScanbotDocumentScannerView into a React Native component. It includes state management for camera controls, handling document detection callbacks, and rendering the scanner interface.

```typescript
import {  
  DocumentDetectionResult,  
  DocumentDetectionStatus,  
  ImageRef,  
  SBError,  
  ScanbotDocumentScannerView,  
  ScanbotDocumentScannerViewHandle,  
} from 'react-native-scanbot-sdk';  
  
export function DocumentScannerViewScreen() {  
  const ref = useRef<ScanbotDocumentScannerViewHandle>(null);  
  const [flashEnabled, setFlash] = useState<boolean>(false);  
  const [finderEnabled, setFinder] = useState<boolean>(false);  
  const [result, setResult] = useState<string | undefined>(undefined);  
  const [detectionState, setDetectionState] = useState<DocumentDetectionStatus>(  
    'ERROR_NOTHING_DETECTED',  
  );  
  
  const onToggleFinder = useCallback(() => {  
    setFinder(f => !f);  
  }, []);  
  
  const onToggleFlash = useCallback(() => {  
    setFlash(f => !f);  
  }, []);  
  
  const onSnap = useCallback(() => {  
    ref.current?.snapDocument();  
  }, []);  
  
  const onDocumentResult = useCallback(  
    async (  
      original: ImageRef,  
      documentImage?: ImageRef,  
      _documentDetectionResult?: DocumentDetectionResult,  
    ) => {  
      try {  
        const image = await (documentImage ?? original).encodeImage();  
        if (image) {  
          setResult(image);  
        }  
      } catch (error) {  
        console.warn('Failed to encode image', error);  
      }  
    },  
    [],  
  );  
  
  const onDetectionResult = useCallback(  
    (detectionResult: DocumentDetectionResult) => {  
      if (detectionResult.status !== detectionState) {  
        setDetectionState(detectionResult.status);  
      }  
    },  
    [detectionState],  
  );  
  
  const onError = useCallback((error: SBError) => {  
    console.warn('Document scanner error', error.type);  
  }, []);  
  
  if (result) {  
    return (  
      <View style={styles.resultContainer}>  
        <Image  
          resizeMode={'contain'}  
          style={styles.result}  
          source={{uri: 'data:image/jpeg;base64,' + result}}  
        />  
        <ActionButton  
          label={'Scan Again'}  
          onPress={() => setResult(undefined)}  
        />  
      </View>  
    );  
  }  
  
  return (  
    <View style={styles.container}>  
      <ScanbotDocumentScannerView  
        ref={ref}  
        onSnappedDocumentResult={onDocumentResult}  
        onFrameDetectionResult={onDetectionResult}  
        onError={onError}  
        autoSnappingEnabled={true}  
        flashEnabled={flashEnabled}  
        finderEnabled={finderEnabled}  
        finderLineColor={'#C8193C'}  
        finderLineWidth={3}  
        finderCornerRadius={20}  
        polygonEnabled={!finderEnabled}  
        polygonBackgroundColor={'#C8193C'}  
        polygonBackgroundColorOK={'#FFFFFF'}  
        polygonColor={'#C8193C'}  
        polygonAutoSnapProgressColor={'#FFFFFF'}  
        polygonAutoSnapProgressEnabled={!finderEnabled}  
      />  
      <View pointerEvents={'box-none'} style={styles.overlayContainer}>  
        <View />  
        <Text style={styles.detectionStatusText}>{detectionState}</Text>  
        <View style={styles.buttonContainer}>  
          <ActionButton onPress={onToggleFinder} label={'Toggle Finder'} />  
          <TouchableOpacity onPress={onSnap}>  
            <View style={styles.snapButton} />  
          </TouchableOpacity>  
          <ActionButton onPress={onToggleFlash} label={'Toggle Flash'} />  
        </View>  
      </View>  
    </View>  
  );  
}
```

--------------------------------

### Migrate Document Scanner: React Native v1 to v2

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/migration

Compares the configuration for starting the document scanner in React Native Scanbot SDK between v1.0 and v2.0. v2.0 offers a more flexible and configurable approach using the DocumentScanningFlow class.

```javascript
import ScanbotSDK, {
  DocumentScannerScreenConfiguration,
} from 'react-native-scanbot-sdk';

async function documentScannerV1() {
  const configuration: DocumentScannerScreenConfiguration = {
    ignoreOrientationMismatch: true,
    autoSnappingSensitivity: 0.67,
    topBarBackgroundColor: '#ffffff',
    bottomBarBackgroundColor: '#ffffff',
    textHintOK: "Don't move.\nCapturing document...",
    multiPageButtonHidden: true,
    multiPageEnabled: false,
  };

  const pageResult = ScanbotSDK.UI.startDocumentScanner(configuration);
}

```

```javascript
import {
  DocumentScanningFlow,
  PageSnapFunnelAnimation,
  ScanbotDocument,
} from 'react-native-scanbot-sdk';

async function documentScannerV2() {
  const configuration = new DocumentScanningFlow();

  const cameraScreenConfiguration = configuration.screens.camera;

  // Equivalent to autoSnappingSensitivity: 0.67
  cameraScreenConfiguration.cameraConfiguration.autoSnappingSensitivity = 0.67;

  // Ready-to-Use UI v2 contains an acknowledgment screen to
  // verify the captured document with the built-in Document Quality Analyzer.
  // You can still disable this step:
  cameraScreenConfiguration.acknowledgement.acknowledgementMode = 'NONE';

  // When you disable the acknowledgment screen, you can enable the capture feedback,
  // there are different options available, for example you can display a checkmark animation:
  cameraScreenConfiguration.captureFeedback.snapFeedbackMode =
    new PageSnapFunnelAnimation();

  // You may hide the import button in the camera screen, if you don't need it:
  cameraScreenConfiguration.bottomBar.importButton.visible = false;

  // Equivalent to bottomBarBackgroundColor: '#ffffff', but not recommended:
  configuration.appearance.bottomBarBackgroundColor = '#ffffff';

  // However, now all the colors can be conveniently set using the Palette object:
  const palette = configuration.palette;
  palette.sbColorPrimary = '#ffffff';
  palette.sbColorOnPrimary = '#ffffff';
  // ..

  // Now all the text resources are in the localization object
  const localization = configuration.localization;
  // Equivalent to textHintOK: "Don't move.\nCapturing document...",
  localization.cameraUserGuidanceReadyToCapture =
    "Don't move. Capturing document...";

  // Ready-to-Use UI v2 contains a review screen, you can disable it:
  configuration.screens.review.enabled = false;

  // Multi Page button is always hidden in RTU v2
  // Therefore multiPageButtonHidden: true is not available

  // Equivalent to multiPageEnabled: false
  configuration.outputSettings.pagesScanLimit = 1;

  const documentData = await ScanbotDocument.startScanner(configuration);
}

```

--------------------------------

### Initialize Scanbot SDK with License Key (React Native)

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/initializing-the-sdk

This snippet demonstrates how to initialize the Scanbot SDK in a React Native application using a provided license key. It imports the necessary SDK components and configures the license key within the SdkConfiguration object before calling the initialize method. Ensure you replace the example license key with a valid one for production use.

```javascript
import ScanbotSDK, {SdkConfiguration} from 'react-native-scanbot-sdk';  
  
const configuration = new SdkConfiguration({
  // Please note: this is just an example license key string (it is not a valid license)
  licenseKey:
    'fXbN2PmyqEAZ+btdkSIS36TuX2j/EE5qxVNcZMXYErbLQ'
    + '3OBnE10aOQxYI8L4UKwHiZ63jthvoFwUevttctBk0wVJ7Z'
    + '+Psz3/Ry8w7pXvfpB1o+JrnzGGcfwBnRi/5raQ2THDeokR'
    + 'RB1keky2VBOFYbCfYt3Hqms5txF2z70PE/SBTMTIVuxL7q'
    + '1xcHDHclbEBriDtrHw8Pmhh9FqTg/r/4kRN/oEX37QGp+Y'
    + '3ogwIBbSmV+Cv+VuwtI31uXY3/GkyN/pSJZspIl+exwQDv'
    + 'O0O1/R/oAURpfM4ydaWReRJtjW8+b1r9rUgPERguaXfcse'
    + 'HlnclItgDfBHzUUFJJU/g==\nU2NhbmJvdFNESwppby5zY'
    + '2FuYm90LmRlbW8ueGFtYXJpbgoxNDg0NjExMTk5CjcxNjc'
    + 'KMw==\n',
});

const initResult = await ScanbotSDK.initialize(configuration);
```

--------------------------------

### Configure and Start Acknowledge Screen in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/acknowledge-screen

Demonstrates how to initialize the DocumentScanningFlow, set the acknowledgment mode and minimum quality threshold, and customize the bottom bar buttons and hint messages before launching the scanner.

```typescript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';

async function startScanning() {
  try {
    /** Create the default configuration instance */
    const configuration = new DocumentScanningFlow();
    /** Set the acknowledgment mode */
    configuration.screens.camera.acknowledgement.acknowledgementMode = 'ALWAYS';
    /** Set the minimum acceptable document quality. */
    configuration.screens.camera.acknowledgement.minimumQuality = 'REASONABLE';
    /** Set the background color for the acknowledgment screen. */
    configuration.screens.camera.acknowledgement.backgroundColor = '#EFEFEF';
    /**
     * You can also configure the buttons in the bottom bar of the acknowledgment screen.
     * E.g., to force the user to retake if the captured document is not OK.
     */
    configuration.screens.camera.acknowledgement.bottomBar.acceptWhenNotOkButton.visible =
      false;
    /** Hide the titles of the buttons. */
    configuration.screens.camera.acknowledgement.bottomBar.acceptWhenNotOkButton.title.visible =
      false;
    configuration.screens.camera.acknowledgement.bottomBar.acceptWhenOkButton.title.visible =
      false;
    configuration.screens.camera.acknowledgement.bottomBar.retakeButton.title.visible =
      false;
    /** Configure the acknowledgment screen's hint message which is shown if the least acceptable quality is not met. */
    configuration.screens.camera.acknowledgement.badImageHint.visible = true;
    /** Start the Document Scanner UI */
    const documentResult = await ScanbotDocument.startScanner(configuration);
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
```

--------------------------------

### Configure Android Camera Permissions

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Add camera permissions to your Android project's `AndroidManifest.xml` file. This allows the SDK to access the device camera for scanning. The `uses-feature` tag aids in app recognition on the Play Store.

```xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
```

--------------------------------

### Configure and Launch Document Scanning Screen

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/scanning-screen

This snippet demonstrates how to initialize a DocumentScanningFlow, customize camera screen elements like user guidance and bottom bar buttons, and trigger the scanner. It handles configuration for both automatic and manual capture modes and sets capture feedback animations.

```typescript
import {  
  DocumentScanningFlow,  
  PageSnapCheckMarkAnimation,  
  PageSnapFunnelAnimation,  
  ScanbotDocument,  
} from 'react-native-scanbot-sdk';  
  
async function startScanning() {  
  try {  
    const configuration = new DocumentScanningFlow();  
    configuration.outputSettings.pagesScanLimit = 30;  
    const cameraScreenConfig = configuration.screens.camera;  
    cameraScreenConfig.topUserGuidance.visible = true;  
    cameraScreenConfig.topUserGuidance.background.fillColor = '#4A000000';  
    cameraScreenConfig.topUserGuidance.title.text = 'Scan your document';  
    cameraScreenConfig.userGuidance.visibility = 'ENABLED';  
    cameraScreenConfig.userGuidance.background.fillColor = '#4A000000';  
    cameraScreenConfig.userGuidance.title.text = 'Please hold your device over a document';  
    cameraScreenConfig.scanAssistanceOverlay.visible = true;  
    cameraScreenConfig.scanAssistanceOverlay.backgroundColor = '#4A000000';  
    cameraScreenConfig.scanAssistanceOverlay.foregroundColor = '#FFFFFF';  
    cameraScreenConfig.userGuidance.statesTitles.noDocumentFound = 'No Document';  
    cameraScreenConfig.userGuidance.statesTitles.badAspectRatio = 'Bad Aspect Ratio';  
    cameraScreenConfig.userGuidance.statesTitles.badAngles = 'Bad angle';  
    cameraScreenConfig.userGuidance.statesTitles.textHintOffCenter = 'The document is off center';  
    cameraScreenConfig.userGuidance.statesTitles.tooSmall = 'The document is too small';  
    cameraScreenConfig.userGuidance.statesTitles.tooNoisy = 'The document is too noisy';  
    cameraScreenConfig.userGuidance.statesTitles.tooDark = 'Need more light';  
    cameraScreenConfig.userGuidance.statesTitles.energySaveMode = 'Energy save mode is active';  
    cameraScreenConfig.userGuidance.statesTitles.readyToCapture = 'Ready to capture';  
    cameraScreenConfig.userGuidance.statesTitles.capturing = 'Capturing the document';  
    cameraScreenConfig.userGuidance.statesTitles.captureManual = 'The document is ready to be captured';  
    configuration.appearance.bottomBarBackgroundColor = '#C8193C';  
    cameraScreenConfig.bottomBar.importButton.visible = true;  
    cameraScreenConfig.bottomBar.importButton.title.visible = true;  
    cameraScreenConfig.bottomBar.importButton.title.text = 'Import';  
    cameraScreenConfig.bottomBar.autoSnappingModeButton.title.visible = true;  
    cameraScreenConfig.bottomBar.autoSnappingModeButton.title.text = 'Auto';  
    cameraScreenConfig.bottomBar.manualSnappingModeButton.title.visible = true;  
    cameraScreenConfig.bottomBar.manualSnappingModeButton.title.text = 'Manual';  
    cameraScreenConfig.bottomBar.torchOnButton.title.visible = true;  
    cameraScreenConfig.bottomBar.torchOnButton.title.text = 'On';  
    cameraScreenConfig.bottomBar.torchOffButton.title.visible = true;  
    cameraScreenConfig.bottomBar.torchOffButton.title.text = 'Off';  
    cameraScreenConfig.captureFeedback.cameraBlinkEnabled = true;  
    cameraScreenConfig.captureFeedback.snapFeedbackMode = new PageSnapCheckMarkAnimation();  
    cameraScreenConfig.captureFeedback.snapFeedbackMode = new PageSnapFunnelAnimation();  
    const documentResult = await ScanbotDocument.startScanner(configuration);  
    if (documentResult.status === 'OK') {  
    }  
  } catch (e: any) {  
    console.error(e.message);  
  }  
}
```

--------------------------------

### Utilize ImageRef: Save, Encode, and Get Info (React Native)

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/image-ref-api

Demonstrates how to use an ImageRef object to get image information, save the image to a file path with specified quality, and encode the image into a base64 buffer. Requires 'react-native-fs' and 'react-native-scanbot-sdk'.

```typescript
import { DocumentDirectoryPath } from 'react-native-fs';

import {
  autorelease,
  EncodeImageOptions,
  ImageRef,
  SaveImageOptions,
} from 'react-native-scanbot-sdk';

async function imageRefUsage(imageFileUri: string) {
  await autorelease(async () => {
    const ref = await ImageRef.fromImageFileUri(imageFileUri);
    if (ref !== null) {
      /*
       * The `info()` method retrieves information about the image reference.
       * - Returns details such as dimensions and file size.
       */
      const imageInfo = await ref.info();
      console.log('Image size', imageInfo?.maxByteSize);

      /*
       * The `saveImage()` method allows you to save the image reference to a specified file path.
       *  - Useful for storing the processed image or for sharing it with other applications.
       */
      const saveImageRefAtPath = await ref.saveImage(
        DocumentDirectoryPath + '/saved_image.jpg',
        new SaveImageOptions({
          quality: 80,
        }),
      );
      console.log('Is image saved successfully?', saveImageRefAtPath);

      /*
       * The `encodeImage()` method encodes the image reference into a base64 format.
       *  - Useful for transmitting the image data over a network.
       */
      const encodedBuffer = await ref.encodeImage(new EncodeImageOptions());
      console.log('Encoded buffer', encodedBuffer);

      /*
       * The `serialize()` method allows you to serialize the image reference.
       * - Useful for storing the image reference in a format that can be easily transmitted or saved.
       * - The serialized reference can be deserialized later to retrieve the original image reference.
       */
      const serializedRef = await ref.serialize('BUFFER');
    }
  });
}
```

--------------------------------

### Implement ScanbotCroppingView in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/classic-ui/cropping-ui

Demonstrates how to integrate the ScanbotCroppingView component, use a ref for programmatic control over cropping operations, and handle the resulting cropped image data.

```typescript
import {  
  CroppingViewResult,  
  EncodeImageOptions,  
  SBError,  
  ScanbotCroppingView,  
  ScanbotCroppingViewHandle,  
} from 'react-native-scanbot-sdk';  
  
export function CroppingScreen() {  
  const route = useRoute<CroppingViewScreenRouteProp>();  
  const ref = useRef<ScanbotCroppingViewHandle>(null);  
  const [croppedImage, setCroppedImage] = useState<string | null>(null);  
  const [isPortrait, setIsPortrait] = useState(false);  
  
  const onResetPolygons = useCallback(() => {  
    ref.current?.resetPolygon();  
  }, []);  
  
  const onDetect = useCallback(() => {  
    ref.current?.detectPolygon();  
  }, []);  
  
  const onExtractCroppedArea = useCallback(() => {  
    ref.current?.extractCroppedArea();  
  }, []);  
  
  const onClockwiseRotate = useCallback(() => {  
    ref.current?.rotate('CLOCKWISE');  
  }, []);  
  
  const onCounterClockwiseRotate = useCallback(() => {  
    ref.current?.rotate('COUNTERCLOCKWISE');  
  }, []);  
  
  const onCroppedAreaResult = useCallback(  
    async (result: CroppingViewResult) => {  
      if (result.sourceImage) {  
        setCroppedImage(  
          await result.sourceImage.encodeImage(new EncodeImageOptions()),  
        );  
      }  
    },  
    [],  
  );  
  
  const onError = useCallback((error: SBError) => {  
    console.warn('Cropping view error', error.type);  
  }, []);  
  
  const onLayoutChange = useCallback(  
    (layout: LayoutChangeEvent) => {  
      const currentlyIsPortrait =  
        layout.nativeEvent.layout.height > layout.nativeEvent.layout.width;  
      if (currentlyIsPortrait !== isPortrait) {  
        setIsPortrait(currentlyIsPortrait);  
      }  
    },  
    [isPortrait],  
  );  
  
  if (croppedImage) {  
    return (  
      <View style={styles.resultContainer}>  
        <Image  
          resizeMode={'contain'}  
          style={styles.result}  
          source={{uri: 'data:image/jpeg;base64,' + croppedImage}}  
        />  
        <ActionButton  
          label={'Crop Again'}  
          onPress={() => setCroppedImage(null)}  
        />  
      </View>  
    );  
  }  
  
  return (  
    <View  
      onLayout={onLayoutChange}  
      style={isPortrait ? styles.container : styles.containerLandscape}>  
      <ScanbotCroppingView  
        ref={ref}  
        src={{imageFileUri: route.params.fileURI}}  
        onCroppedAreaResult={onCroppedAreaResult}  
        onError={onError}  
        edgeColor={'#C8193C'}  
        anchorPointsColor={'#ff00aa'}  
        edgeLineWidth={5}  
      />  
      <View style={styles.buttonContainer}>  
        <View style={styles.buttonRow}>  
          <View style={styles.buttonCell}>  
            <ActionButton  
              textStyle={styles.buttonText}  
              containerStyle={styles.button}  
              onPress={onResetPolygons}  
              label={'Reset polygon'}  
            />  
            <ActionButton  
              textStyle={styles.buttonText}  
              containerStyle={styles.button}  
              onPress={onDetect}  
              label={'Detect polygon'}  
            />  
          </View>  
          <View style={styles.buttonCell}>  
            <ActionButton  
              textStyle={styles.buttonText}  
              containerStyle={styles.button}  
              onPress={onClockwiseRotate}  
              label={'Rotate ↻'}  
            />  
            <ActionButton  
              textStyle={styles.buttonText}  
              containerStyle={styles.button}  
              onPress={onCounterClockwiseRotate}  
              label={'Rotate ↺'}  
            />  
          </View>  
        </View>  
        <ActionButton  
          textStyle={styles.buttonText}  
          containerStyle={styles.button}  
          onPress={onExtractCroppedArea}  
          label={'Extract polygon'}  
        />  
      </View>  
    </View>  
  );  
}
```

--------------------------------

### Trigger Document Scanner from a Button Press

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/quick-start

Call the `singlePageScanning` function within the `onPress` event handler of a React Native Button component to initiate the document scanning process when the button is tapped.

```javascript
<Button title={"Start single page scanning"} onPress={singlePageScanning} />
```

--------------------------------

### Migrate Legacy Page Objects to DocumentData

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/migration

Demonstrates how to convert legacy Page objects into the modern DocumentData model using the ScanbotDocument.createDocumentFromLegacyPages utility.

```TypeScript
import {Page, ScanbotDocument} from 'react-native-scanbot-sdk';  
  
async function createDocumentWithLegacyPages(pages: Page[]) {  
  const documentData = ScanbotDocument.createDocumentFromLegacyPages({  
    pages: pages,  
  });  
}
```

--------------------------------

### Configure Android largeHeap for Scanbot SDK

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/installing-the-sdk

Enables the `android:largeHeap="true"` property in the AndroidManifest.xml file. This is recommended for versions of Android <= 7.x to prevent OutOfMemoryError exceptions when processing high-resolution images.

```xml
<application ... android:largeHeap="true">
  ...
</application>  
```

--------------------------------

### Configure and launch the Reorder Screen in React Native

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/ready-to-use-ui/scanning-flow/reorder-screen

This snippet demonstrates how to initialize the DocumentScanningFlow configuration, customize the reorder screen's guidance and appearance, and launch the scanner. It requires the react-native-scanbot-sdk package and handles the resulting document status.

```typescript
import {DocumentScanningFlow, ScanbotDocument} from 'react-native-scanbot-sdk';

async function startScanning() {
  try {
    /** Create the default configuration instance */
    const configuration = new DocumentScanningFlow();
    /** Retrieve the instance of the reorder pages configuration from the main configuration object. */
    const reorderScreenConfiguration = configuration.screens.reorderPages;
    /** Hide the guidance view. */
    reorderScreenConfiguration.guidance.visible = false;
    /** Set the title for the reorder screen. */
    reorderScreenConfiguration.topBarTitle.text = 'Reorder Pages Screen';
    /** Set the title for the guidance. */
    reorderScreenConfiguration.guidance.title.text = 'Reorder';
    /** Set the color for the page number text. */
    reorderScreenConfiguration.pageTextStyle.color = '#000000';
    /** Start the Document Scanner UI */
    const documentResult = await ScanbotDocument.startScanner(configuration);
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
```

--------------------------------

### Generate PDF from Image Files

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/scan-result-handling/creating-pdf-documents

Shows how to create a PDF document from a collection of images, such as those selected from a device's photo library. It includes setting specific page sizes and orientations via the PdfConfiguration object.

```typescript
import {selectImagesFromLibrary} from '@utils';  
import {PdfConfiguration, ScanbotPdfGenerator} from 'react-native-scanbot-sdk';  
  
async function createPDFFromImages() {  
  try {  
    /**  
     * Select images from the Image Library  
     * Return early if no images are selected or there is an issue with selecting images  
     **/  
    const selectedImagesResult = await selectImagesFromLibrary();  
    if (!selectedImagesResult) {  
      return;  
    }  
    /** Create a PDF file with the provided options */  
    const pdfCreationResult = await ScanbotPdfGenerator.generateFromImages({  
      images: selectedImagesResult,  
      pdfConfiguration: new PdfConfiguration({  
        pageSize: 'A4',  
        pageDirection: 'PORTRAIT',  
      }),  
    });  
    /** Handle the result */  
  } catch (e: any) {  
    console.error(e.message);  
  }  
}
```

--------------------------------

### Initialize Scanbot SDK with Image Quality Settings

Source: https://docs.scanbot.io/react-native/document-scanner-sdk/detailed-setup-guide/initializing-the-sdk

Configures the storage format and JPEG compression quality for images captured by the SDK. The quality parameter accepts values between 1 and 100, with 80 being the recommended default.

```javascript
import ScanbotSDK, {SdkConfiguration} from 'react-native-scanbot-sdk';

const configuration = new SdkConfiguration({
  licenseKey: '<YOUR_LICENSE_KEY_HERE>',
  storageImageFormat: 'JPG',
  storageImageQuality: 80,
});

const result = await ScanbotSDK.initialize(configuration);
```
Tokens:
Raw