{"id":18995846,"url":"https://github.com/klippa-app/react-native-klippa-scanner-sdk","last_synced_at":"2025-04-22T13:48:36.239Z","repository":{"id":38198530,"uuid":"263446361","full_name":"klippa-app/react-native-klippa-scanner-sdk","owner":"klippa-app","description":"A React Native plugin to use the Klippa Scanner SDK","archived":false,"fork":false,"pushed_at":"2025-04-15T09:35:24.000Z","size":908,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T10:36:40.865Z","etag":null,"topics":["digitize-paper-processes","klippa","react-native","scanner","sdk"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klippa-app.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-12T20:35:32.000Z","updated_at":"2025-04-15T09:35:06.000Z","dependencies_parsed_at":"2024-01-29T17:01:10.745Z","dependency_job_id":"5865f1e4-5182-456e-a0c8-cc8b7ec745f1","html_url":"https://github.com/klippa-app/react-native-klippa-scanner-sdk","commit_stats":{"total_commits":118,"total_committers":8,"mean_commits":14.75,"dds":0.5677966101694916,"last_synced_commit":"75fa3db6d71e15b3d3b05669d642ac389ab42849"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klippa-app%2Freact-native-klippa-scanner-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klippa-app%2Freact-native-klippa-scanner-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klippa-app%2Freact-native-klippa-scanner-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klippa-app%2Freact-native-klippa-scanner-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klippa-app","download_url":"https://codeload.github.com/klippa-app/react-native-klippa-scanner-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250251931,"owners_count":21399908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["digitize-paper-processes","klippa","react-native","scanner","sdk"],"created_at":"2024-11-08T17:33:03.394Z","updated_at":"2025-04-22T13:48:36.225Z","avatar_url":"https://github.com/klippa-app.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Npm version][npm-version]][npm-url]\n\n[npm-version]:https://img.shields.io/npm/v/@klippa/react-native-klippa-scanner-sdk.svg\n[npm-url]:https://www.npmjs.com/package/@klippa/react-native-klippa-scanner-sdk\n\n# react-native-klippa-scanner-sdk\n\n## SDK License\nPlease be aware you need to have a license to use this SDK.\nIf you would like to use our scanner, please contact us [here](https://www.klippa.com/en/ocr/ocr-sdk/)\n\n## Getting started\n### Android\n\nEdit the file `android/build.gradle`, add the Klippa Maven repository:\n\n```maven\nallprojects {\n    repositories {\n        // ... other repositories\n\n        maven {\n            credentials {\n                username \"{your-username}\"\n                password \"{your-password}\"\n            }\n            url \"https://custom-ocr.klippa.com/sdk/android/maven\"\n        }\n    }\n}\n```\n\nReplace the `{your-username}` and `{your-password}` values with the ones provided by Klippa.\n\nIf you're using gradle 7+ you will need to change `copyDownloadableDepsToLibs` in the `app/build.gradle`.\nIt should now look like:\n\n```maven\ntask copyDownloadableDepsToLibs(type: Copy) {\n    from configurations.implementation\n    into 'libs'\n}\n\n```\n\n### iOS\n\nEdit the file `ios/Podfile`, add the Klippa CocoaPod:\n```\n// Add this to the top of your file:\n// Edit the platform to a minimum of 13.0, our SDK doesn't support earlier versions.\n\nplatform :ios, '13.0'\n\nif \"#{ENV['KLIPPA_SCANNER_SDK_USERNAME']}\" == \"\"\n  ENV['KLIPPA_SCANNER_SDK_USERNAME'] = '{your-username}'\nend\n\nif \"#{ENV['KLIPPA_SCANNER_SDK_PASSWORD']}\" == \"\"\n  ENV['KLIPPA_SCANNER_SDK_PASSWORD'] = '{your-password}'\nend\n\n# // Edit the Runner config to add the pod:\n\ntarget ‘YourApplicationName’ do\n  // ... other instructions\n\n  // Add this below `use_react_native`\n\n  if \"#{ENV['KLIPPA_SCANNER_SDK_URL']}\" == \"\"\n    file_path = File.expand_path('../node_modules/@klippa/react-native-klippa-scanner-sdk/ios/.sdk_repo', __dir__)\n    ENV['KLIPPA_SCANNER_SDK_URL'] = File.read(file_path).strip\n  end\n\n  if \"#{ENV['KLIPPA_SCANNER_SDK_VERSION']}\" == \"\"\n    file_path = File.expand_path('../node_modules/@klippa/react-native-klippa-scanner-sdk/ios/.sdk_version', __dir__)\n    ENV['KLIPPA_SCANNER_SDK_VERSION'] = File.read(file_path).strip\n  end\n\n  pod 'Klippa-Scanner', podspec: \"#{ENV['KLIPPA_SCANNER_SDK_URL']}/#{ENV['KLIPPA_SCANNER_SDK_USERNAME']}/#{ENV['KLIPPA_SCANNER_SDK_PASSWORD']}/KlippaScanner/#{ENV['KLIPPA_SCANNER_SDK_VERSION']}.podspec\"\n  \nend\n```\n\nReplace the `{your-username}` and `{your-password}` values with the ones provided by Klippa.\n\nEdit the file `ios/{project-name}/Info.plist` and add the `NSCameraUsageDescription` value:\n```\n...\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eAccess to your camera is needed to photograph documents.\u003c/string\u003e\n\u003ckey\u003eNSPhotoLibraryAddUsageDescription\u003c/key\u003e\n\u003cstring\u003eAccess to your photo library is used to save the images of documents.\u003c/string\u003e\n...\n```\n\n### React native\n\n`$ npm install @klippa/react-native-klippa-scanner-sdk --save`\n\nDon't forget to run `pod install` in the ios folder when running the iOS app.\n\n### Mostly automatic installation (only for versions of React Native lower than 0.60, later versions have auto-linking)\n\n`$ react-native link @klippa/react-native-klippa-scanner-sdk`\n\n## Usage\n```javascript\nimport KlippaScannerSDK from '@klippa/react-native-klippa-scanner-sdk';\n\n// Ask for camera permission.\nKlippaScannerSDK.getCameraPermission().then((authStatus) =\u003e {\n    if (authStatus.Status !== \"Authorized\") {\n        // Do something here to tell the user how they should enable the camera.\n        Alert.alert(\"No access to camera\");\n        return;\n    }\n\n    // Start the scanner.\n    KlippaScannerSDK.getCameraResult({\n        // Required\n        License: \"{license-received-by-klippa}\",\n    \n        // Optional.\n\n        // Ability to disable/hide the shutter button (only works when a model is supplied as well).\n        ShutterButton: {allowShutterButton: true, hideShutterButton: false},\n    \n        // Whether the crop mode (auto edge detection) should be enabled by default.\n        DefaultCrop: true,\n    \n        // Define the max resolution of the output file. It’s possible to set only one of these values. We will make sure the picture fits in the given resolution. We will also keep the aspect ratio of the image. Default is max resolution of camera.\n        ImageMaxWidth: 1920,\n        ImageMaxHeight: 1080,\n    \n        // Set the output quality (between 0-100) of the jpg encoder. Default is 100.\n        ImageMaxQuality: 95,\n    \n        // The camera mode for scanning one part documents.\n        CameraModeSingle?: {name: \"Single Document Mode\", message: \"Description of Camera Mode\"};\n\n        // The camera mode for scanning documents that consist of multiple pages.\n        CameraModeMulti?: {name: \"Multiple Document Mode\", message: \"Description of Camera Mode\"};\n\n        // The camera mode for scanning long documents in separate parts.\n        CameraModeSegmented?: {name: \"Segmented Document Mode\", message: \"Description of Camera Mode\"};\n\n        // To limit the amount of images that can be taken.\n        ImageLimit: 10,\n        \n        // The message to display when the limit has been reached.\n        ImageLimitReachedMessage: \"You have reached the image limit\",\n\n        // Whether to go to the Review Screen once the image limit has been reached. (default false)\n        ShouldGoToReviewScreenWhenImageLimitReached: false,\n\n        // Whether the user must confirm the taken photo before the SDK continues.\n        UserShouldAcceptResultToContinue: false,\n\n        // Whether to hide or show the rotate button in the Review Screen. (default shown/true)\n        UserCanRotateImage: true,\n\n        // Whether to hide or show the cropping button in the Review Screen. (default shown/true)\n        UserCanCropManually: true,\n\n        // Whether to hide or show the color changing button in the Review Screen. (default shown/true)\n        UserCanChangeColorSetting: true,\n\n        // What the default color conversion will be (grayscale, original, enhanced).\n        DefaultColor: \"original\",\n\n        // Whether to perform on-device OCR after scanning completes.\n        PerformOnDeviceOCR: false,\n\n        // What the output format will be (jpeg, pdfMerged, pdfSingle). (Default jpeg)\n        OutputFormat: \"jpeg\",\n    \n        // Optional. Only affects Android.\n    \n        // Where to put the image results.\n        StoragePath: \"/sdcard/scanner\",\n    \n        // The filename to use for the output images, supports replacement tokens %dateTime% and %randomUUID%.\n        OutputFilename: \"KlippaScannerExample-%dateTime%-%randomUUID%\",\n    \n        // The threshold sensitive the motion detection is. (lower value is higher sensitivity, default 50).\n        ImageMovingSensitivityAndroid: 50,\n\n        // If you would like to use a custom model for object detection. Model + labels file should be packaged in your bundle.\n        Model: {name: \"model\", labelsName: \"labels\"},\n        \n        // If you would like to enable automatic capturing of images.\n        Timer: {enabled: true, duration: 0.4},\n\n        // To add extra horizontal and / or vertical padding to the cropped image.\n        CropPadding: {width: 100, height: 100},\n\n        // After capture, show a check mark preview with this success message, instead of a preview of the image.\n        Success: {message: \"Success!\", previewDuration: 0.3},\n\n        // Whether the camera automatically saves the images to the camera roll (iOS) / gallery (Android). Default true.\n        StoreImagesToCameraRoll: true,  \n\n        // Whether to allow users to select media from their device (Shows a media button bottom left on the scanner screen).\n        UserCanPickMediaFromStorage: true,\n\n        // Whether the next button in the bottom right of the scanner screen goes to the review screen instead of finishing the session.\n        ShouldGoToReviewScreenOnFinishPressed: true,\n\n        // The amount of seconds the preview should be visible for, should be a float.\n        PreviewDuration: 1.0,\n        \n        // Optional. Only affects iOS.\n        // The warning message when the camera result is too bright.\n        ImageTooBrightMessage: \"The image is too bright\",\n       \n        // The warning message when the camera result is too dark.\n        ImageTooDarkMessage: \"The image is too dark\",\n\n        // The text inside of the color selection alert dialog button named original.\n        ImageColorOriginalText: \"original\",\n\n        // The text inside of the color selection alert dialog button named grayscale.\n        ImageColorGrayscaleText: \"grayscale\",\n  \n        // The text inside of the color selection alert dialog button named enhanced.\n        ImageColorEnhancedText: \"enhanced\",\n                \n        // The amount of opacity for the overlay, should be a float.\n        OverlayColorAlpha: 0.75,\n         \n        // Whether the camera has a view finder overlay (a helper grid so the user knows where the document should be), should be a Boolean.\n        IsViewFinderEnabled: true,\n\n        // The threshold sensitive the motion detection is. (lower value is higher sensitivity, default 200).\n        ImageMovingSensitivityiOS: 200,\n\n        // The lower threshold before the warning message informs the environment is too dark (default 0).\n        BrightnessLowerThreshold: 0,\n\n        // The upper threshold before the warning message informs the environment is too bright (default 6).\n        BrightnessUpperThreshold: 6,\n    });\n});\n```\n\nThe result of `KlippaScannerSDK.getCameraResult()` is a Promise, so you can get the result with:\n```javascript\nKlippaScannerSDK.getCameraResult(options).then((result) =\u003e {\n    console.log(result);\n}).catch((reason) =\u003e {\n    console.log(reason);\n});\n```\n\nThe content of the result object is:\n```\n{\n  // Whether the MultipleDocuments option was turned on, so you can save it as default.\n  \"MultipleDocuments\": true,\n\n  // Whether the Crop option was turned on, so you can save it as default (Android only).\n  \"Crop\": true,\n\n  // What color option was used, so you can save it as default (Android only).\n  \"Color\": \"original\",\n \n  // An array of images.\n  \"Images\": [\n    {\n      \"Filepath\": \"/sdcard/scanner/dd0ca979-84e1-426e-8877-586e802fed1f.jpg\"\n    }\n  ]\n}\n```\n\nThe reject reason object has a code and a message, the used codes are:\n - E_ACTIVITY_DOES_NOT_EXIST (Android only)\n - E_FAILED_TO_SHOW_CAMERA (Android only)\n - E_LICENSE_ERROR (on iOS license errors result in E_UNKNOWN_ERROR)\n - E_CANCELED\n - E_UNKNOWN_ERROR\n\n## How to use a specific version of the SDK?\n\n### Android\n\nEdit the file `android/build.gradle`, add the following:\n\n```maven\nallprojects {\n  // ... other definitions\n  project.ext {\n      klippaScannerVersion = \"{version}\"\n  }\n}\n```\n\nReplace the `{version}` value with the version you want to use.\n\n### iOS\n\nEdit the file `ios/Podfile`, change the pod line of `Klippa-Scanner` and replace `latest.podspec` with `{version}.podspec`, replace the `{version}` value with the version you want to use.\n\n## How to change the colors of the scanner?\n\n### Android\n\nAdd or edit the file `android/app/src/main/res/values/colors.xml`, add the following:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cresources\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_primary\"\u003e#000000\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_accent\"\u003e#ffffff\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_secondary\"\u003e#2dc36a\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_warning_background\"\u003e#BF000000\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_warning_text\"\u003e#ffffff\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_icon_disabled\"\u003e#444\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_icon_enabled\"\u003e#ffffff\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_button_with_icon_foreground\"\u003e#ffffff\u003c/color\u003e\n    \u003ccolor name=\"klippa_scanner_sdk_color_button_with_icon_background\"\u003e#444444\u003c/color\u003e\n\u003c/resources\u003e\n```\n\n### iOS\n\nUse the following properties in the config when running `getCameraResult`: `PrimaryColor`, `AccentColor`, `OverlayColor`, `WarningBackgroundColor`, `WarningTextColor`, `OverlayColorAlpha`, `IconDisabledColor`, `IconEnabledColor`,  `ReviewIconColor`, `ButtonWithIconBackgroundColor`, `ButtonWithIconForegroundColor`. Each value should be a string with a `hex` including a `#`, i.e: `#fff` for white.\n\n## How to change the texts in the scanner?\n\n### Android\n\nAdd or edit the file `android/app/src/main/res/values/strings.xml`, add the following:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cresources\u003e\n    \u003cstring name=\"klippa_action_crop\"\u003eCrop\u003c/string\u003e\n    \u003cstring name=\"klippa_action_delete\"\u003eDelete\u003c/string\u003e\n    \u003cstring name=\"klippa_image_color_original\"\u003eOriginal\u003c/string\u003e\n    \u003cstring name=\"klippa_image_color_grayscale\"\u003eGrayscale\u003c/string\u003e\n    \u003cstring name=\"klippa_image_color_enhanced\"\u003eEnhanced\u003c/string\u003e\n\n    \u003cstring name=\"klippa_zoom_message\"\u003eMove closer to the document\u003c/string\u003e\n    \u003cstring name=\"klippa_image_limit_reached\"\u003eYou have reached the image limit\u003c/string\u003e\n    \u003cstring name=\"klippa_images\"\u003eImages\u003c/string\u003e\n    \u003cstring name=\"klippa_success_message\"\u003eSuccess\u003c/string\u003e\n    \u003cstring name=\"klippa_image_moving_message\"\u003eMoving too much\u003c/string\u003e\n    \u003cstring name=\"klippa_orientation_warning_message\"\u003eHold your phone in portrait mode\u003c/string\u003e\n\n    \u003cstring name=\"klippa_delete_button_text\"\u003eDelete\u003c/string\u003e\n    \u003cstring name=\"klippa_retake_button_text\"\u003eRetake\u003c/string\u003e\n    \u003cstring name=\"klippa_cancel_button_text\"\u003eCancel\u003c/string\u003e\n    \u003cstring name=\"klippa_cancel_delete_images\"\u003eCancel Scanner\u003c/string\u003e\n    \u003cstring name=\"klippa_cancel_confirmation\"\u003eWhen you close the taken scans will be deleted. Are you sure you want to cancel without saving?\u003c/string\u003e\n\n    \u003cstring name=\"klippa_continue_button_text\"\u003eContinue\u003c/string\u003e\n\n    \u003cstring name=\"klippa_auto_capture\"\u003eAuto-Capture\u003c/string\u003e\n    \u003cstring name=\"klippa_manual_capture\"\u003eManual\u003c/string\u003e\n    \u003cstring name=\"klippa_action_save\"\u003eSave\u003c/string\u003e\n    \u003cstring name=\"klippa_action_expand\"\u003eExpand\u003c/string\u003e\n    \u003cstring name=\"klippa_action_filter\"\u003eFilter\u003c/string\u003e\n    \u003cstring name=\"klippa_action_rotate\"\u003eRotate\u003c/string\u003e\n\u003c/resources\u003e\n```\n\n### iOS\n\nUse the following properties in the config when running `getCameraResult`: `ImageTooBrightMessage`, `ImageTooDarkMessage`, `DeleteButtonText`, `RetakeButtonText`, `CancelButtonText`, `CancelAndDeleteImagesButtonText`, `CancelConfirmationMessage`, `MoveCloserMessage`, `ImageMovingMessage`, `ImageLimitReachedMessage`, `OrientationWarningMessage`, `ImageColorOriginalText`, `ImageColorGrayscaleText`, `ImageColorEnhancedText`, `SaveCropButtonText`, `ExpandCropButtonText`, `CancelCropButtonText`, `DeleteEditButtonText`, `RotateEditButtonText`, `FilterEditButtonText`, `CropEditButtonText`, `SegmentedModeImageCountMessage`.\n\n## How to change the image in the instructions?\n\n### Android\n\nAdd an XML file in `android/app/src/res/drawable/` with name `klippa_camera_mode_single_document.xml` to change the image in Single Document Mode.\nAdd an XML file in `android/app/src/res/drawable/` with name `klippa_camera_mode_multiple_documents.xml` to change the image in Multiple Document Mode.\nAdd an XML file in `android/app/src/res/drawable/` with name `klippa_camera_mode_segmented_document.xml` to change the image in Segmented Document Mode.\n\n### iOS\n\nUse the following properties in the config:\n\n```ts\n// Change the default image in the Single Document Mode instructions.\nCameraModeSingle: {name: \"Name\", message: \"Message\", image: \"{name of image in Assets.xcassets}\"}\n// Change the default image in the Multi Document Mode instructions.\nCameraModeMulti: {name: \"Name\", message: \"Message\", image: \"{name of image in Assets.xcassets}\"}\n// Change the default image in the Segmented Document Mode instructions.\nCameraModeSegmented: {name: \"Name\", message: \"Message\", image: \"{name of image in Assets.xcassets}\"}\n```\n\n## How to clear the storage.\n\n```javascript\nKlippaScannerSDK.purge()\n```\n\n## Important iOS notes\nOlder iOS versions do not ship the Swift libraries. To make sure the SDK works on older iOS versions, you can configure the build to embed the Swift libraries using the build setting `EMBEDDED_CONTENT_CONTAINS_SWIFT = YES`.\n\nWe started using XCFrameworks from version 0.1.0, if you want to use that version or up, you need CocoaPod version 1.9.0 or higher.\n\n## Important Android notes\nWhen using a custom trained model for object detection, add the following to your app's build.gradle file to ensure Gradle doesn’t compress the models when building the app:\n\n```\nandroid {\n    aaptOptions {\n        noCompress \"tflite\"\n    }\n}\n```\n\n## About Klippa\n\n[Klippa](https://www.klippa.com/en) is a scale-up from [Groningen, The Netherlands](https://goo.gl/maps/CcCGaPTBz3u8noSd6) and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.\n\nWe help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.\n\n## License\n\nThe MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklippa-app%2Freact-native-klippa-scanner-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklippa-app%2Freact-native-klippa-scanner-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklippa-app%2Freact-native-klippa-scanner-sdk/lists"}