{"id":22200836,"url":"https://github.com/michaelvilleneuve/react-native-document-scanner","last_synced_at":"2025-05-15T20:05:41.571Z","repository":{"id":39381059,"uuid":"95193591","full_name":"Michaelvilleneuve/react-native-document-scanner","owner":"Michaelvilleneuve","description":"Document scanner, features live border detection, perspective correction, image filters and more ! 📲📸","archived":false,"fork":false,"pushed_at":"2023-01-24T22:28:20.000Z","size":86006,"stargazers_count":870,"open_issues_count":56,"forks_count":291,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-05-15T20:05:28.462Z","etag":null,"topics":["document","ios","react-native","scanner"],"latest_commit_sha":null,"homepage":"","language":"Java","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/Michaelvilleneuve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-23T07:11:35.000Z","updated_at":"2025-05-13T03:33:25.000Z","dependencies_parsed_at":"2023-02-14T02:15:44.669Z","dependency_job_id":null,"html_url":"https://github.com/Michaelvilleneuve/react-native-document-scanner","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michaelvilleneuve%2Freact-native-document-scanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michaelvilleneuve%2Freact-native-document-scanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michaelvilleneuve%2Freact-native-document-scanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Michaelvilleneuve%2Freact-native-document-scanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Michaelvilleneuve","download_url":"https://codeload.github.com/Michaelvilleneuve/react-native-document-scanner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"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":["document","ios","react-native","scanner"],"created_at":"2024-12-02T15:39:59.587Z","updated_at":"2025-05-15T20:05:36.521Z","avatar_url":"https://github.com/Michaelvilleneuve.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Demo gif](https://raw.githubusercontent.com/Michaelvilleneuve/react-native-document-scanner/master/images/demo.gif)\n\n# React Native Document Scanner\n\nLive document detection library. Returns either a URI or a base64 encoded string of the captured image, allowing you to easily store it or use it as you wish !\n\nFeatures :\n\n- Live detection\n- Perspective correction and crop of the image\n- Live camera filters (brightness, saturation, contrast)\n- Flash\n- Easy to use base64 image\n\n#### Can be easily plugged with [react-native-perspective-image-cropper](https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper)\n\n![Demo crop gif](https://camo.githubusercontent.com/0ac887deaa7263172a5fd2759dba3d692e98585a/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f6d69636861656c76696c6c656e657576652f64656d6f2d63726f702e676966)\n\n## Both Platform\n\nUse version \u003e=1.4.1 if you are using react-native 0.48+\n\n`$ yarn add https://github.com/Michaelvilleneuve/react-native-document-scanner`\n\n`$ react-native link react-native-document-scanner`\n\nEdit the `info.plist` file in XCode and add the following permission : `NSCameraUsageDescription`\n\nRemember, this library uses your device camera, you can't run it on a simulator.\n\n### Android Only\n\nIf you do not have it already in your project, you must link openCV in your `settings.gradle` file\n\n```java\ninclude ':openCVLibrary310'\nproject(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')\n```\n\n#### In android/app/src/main/AndroidManifest.xml\n\nChange manifest header to avoid \"Manifest merger error\". After you add `xmlns:tools=\"http://schemas.android.com/tools\"` should look like this:\n\n```\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\" package=\"com.\u003cyourAppName\u003e\" xmlns:tools=\"http://schemas.android.com/tools\"\u003e\n```\n\nAdd `tools:replace=\"android:allowBackup\"` in \u003capplication tag. It should look like this:\n\n```\n\u003capplication tools:replace=\"android:allowBackup\" android:name=\".MainApplication\" android:label=\"@string/app_name\" android:icon=\"@mipmap/ic_launcher\" android:allowBackup=\"false\" android:theme=\"@style/AppTheme\"\u003e\n```\n\nAdd Camera permissions request:\n\n```\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n```\n\n## Usage\n\n```javascript\nimport React, { Component } from \"react\";\nimport { View, Image } from \"react-native\";\n\nimport DocumentScanner from \"react-native-document-scanner\";\n\nclass YourComponent extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cDocumentScanner\n          useBase64\n          saveInAppDocument={false}\n          onPictureTaken={data =\u003e\n            this.setState({\n              image: data.croppedImage,\n              initialImage: data.initialImage,\n              rectangleCoordinates: data.rectangleCoordinates\n            })\n          }\n          overlayColor=\"rgba(255,130,0, 0.7)\"\n          enableTorch={false}\n          brightness={0.3}\n          saturation={1}\n          contrast={1.1}\n          quality={0.5}\n          onRectangleDetect={({ stableCounter, lastDetectionType }) =\u003e\n            this.setState({ stableCounter, lastDetectionType })\n          }\n          detectionCountBeforeCapture={5}\n          detectionRefreshRateInMS={50}\n          onPermissionsDenied={() =\u003e console.log(\"Permissions Denied\")}\n        /\u003e\n        \u003cImage\n          source={{ uri: `data:image/jpeg;base64,${this.state.image}` }}\n          resizeMode=\"contain\"\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## Properties\n\n| Prop                        | Platform | Default |   Type    | Description                                                       |\n| :-------------------------- | :------: | :-----: | :-------: | :---------------------------------------------------------------- |\n| overlayColor                |   Both   | `none`  | `string`  | Color of the detected rectangle : rgba recommended                |\n| detectionCountBeforeCapture |   Both   |   `5`   | `integer` | Number of correct rectangle to detect before capture              |\n| detectionRefreshRateInMS    |   iOS    |  `50`   | `integer` | Time between two rectangle detection attempt                      |\n| enableTorch                 |   Both   | `false` |  `bool`   | Allows to active or deactivate flash during document detection    |\n| useFrontCam                 |   iOS    | `false` |  `bool`   | Allows you to switch between front and back camera                |\n| brightness                  |   iOS    |   `0`   |  `float`  | Increase or decrease camera brightness. Normal as default.        |\n| saturation                  |   iOS    |   `1`   |  `float`  | Increase or decrease camera saturation. Set `0` for black \u0026 white |\n| contrast                    |   iOS    |   `1`   |  `float`  | Increase or decrease camera contrast. Normal as default           |\n| quality                     |   iOS    |  `0.8`  |  `float`  | Image compression. Reduces both image size and quality            |\n| useBase64                   |   iOS    | `false` |  `bool`   | If base64 representation should be passed instead of image uri's  |\n| saveInAppDocument           |   iOS    | `false` |  `bool`   | If should save in app document in case of not using base 64       |\n| captureMultiple             |   iOS    | `false` |  `bool`   | Keeps the scanner on after a successful capture                   |\n| onPermissionsDenied         | android  | `null`  |  `func`   | Function to call when the Android permissions are denied          |\n\n## Manual capture\n\n- First get component ref\n\n```javascript\n\u003cDocumentScanner ref={ref =\u003e (this.scanner = ref)} /\u003e\n```\n\n- Then call :\n\n```javascript\nthis.scanner.capture();\n```\n\n## Each rectangle detection (iOS only)\n\n| Props             | Params                                 | Type     | Description |\n| ----------------- | -------------------------------------- | -------- | ----------- |\n| onRectangleDetect | `{ stableCounter, lastDetectionType }` | `object` | See below   |\n\nThe returned object includes the following keys :\n\n- `stableCounter`\n\nNumber of correctly formated rectangle found (this number triggers capture once it goes above `detectionCountBeforeCapture`)\n\n- `lastDetectionType`\n\nEnum (0, 1 or 2) corresponding to the type of rectangle found\n\n0. Correctly formated rectangle\n1. Wrong perspective, bad angle\n1. Too far\n\n## Returned image\n\n| Prop           | Params |   Type   | Description                                                                                                                                                               |\n| :------------- | :----: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }` |\n\n## Save in app document\n\nIf you want to use saveInAppDocument options, then don't forget to add those raws in .plist :\n\n```xml\n\u003ckey\u003eLSSupportsOpeningDocumentsInPlace\u003c/key\u003e\n\u003ctrue/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelvilleneuve%2Freact-native-document-scanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelvilleneuve%2Freact-native-document-scanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelvilleneuve%2Freact-native-document-scanner/lists"}