### 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 `` element. ```xml NSCameraUsageDescription Describe why your app wants to access the device's camera. ``` -------------------------------- ### 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(null); const [flashEnabled, setFlash] = useState(false); const [finderEnabled, setFinder] = useState(false); const [result, setResult] = useState(undefined); const [detectionState, setDetectionState] = useState( '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 ( setResult(undefined)} /> ); } return ( {detectionState} ); } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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(); const ref = useRef(null); const [croppedImage, setCroppedImage] = useState(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 ( setCroppedImage(null)} /> ); } return ( ); } ``` -------------------------------- ### 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