react-native-document-scanner

@woonivers/react-native-document-scanner

Live document detection library. Returns either a URI of the captured image, allowing you to easily store it or use it as you wish!

• Live detection
• Perspective correction and crop of the image
• Flash

Getting started

Version >=2.0.0 is thinking to work with React Native >= 0.60

Use version 1.6.2 if you are using React Native 0.59

Install the library using either yarn:

yarn add @woonivers/react-native-document-scanner`

or npm:

npm install @woonivers/react-native-document-scanner --save

Remember, this library uses your device's camera, it cannot run on a simulator and you must request camera permission by your own.

iOS Only

CocoaPods on iOS needs this extra step:

cd ios && pod install && cd ..

Android Only

If you do not have it already in your project, you must link openCV in your settings.gradle file

include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/@woonivers/react-native-document-scanner/android/openCVLibrary310')

In android/app/src/main/AndroidManifest.xml

Change manifest header to avoid "Manifest merger error". After you add xmlns:tools="http://schemas.android.com/tools" should look like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.<yourAppName>" xmlns:tools="http://schemas.android.com/tools">

Add tools:replace="android:allowBackup" in <application tag. It should look like this:

<application tools:replace="android:allowBackup" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme">

Add Camera permissions request:

<uses-permission android:name="android.permission.CAMERA" />

Usage

import React, { Component, useRef } from "react"
import { View, Image } from "react-native"

import DocumentScanner from "@woonivers/react-native-document-scanner"

function YourComponent(props) {
  return (
    <View>
      <DocumentScanner
        style={styles.scanner}
        onPictureTaken={handleOnPictureTaken}
        overlayColor="rgba(255,130,0, 0.7)"
        enableTorch={false}
        quality={0.5}
        detectionCountBeforeCapture={5}
        detectionRefreshRateInMS={50}
      />
    </View>
  )
}

Full example in example folder.

Properties

Manual capture

• First create a mutable ref object:

const documentScannerElement = useRef(null)

• Pass a ref object to your component:

<DocumentScanner ref={documentScannerElement} />

• Then call:

documentScannerElement.current.capture()

Each rectangle detection (iOS only) -Non tested-

The returned object includes the following keys :

• stableCounter

Number of correctly formated rectangle found (this number triggers capture once it goes above detectionCountBeforeCapture)

• lastDetectionType

Enum (0, 1 or 2) corresponding to the type of rectangle found

0. Correctly formated rectangle
1. Wrong perspective, bad angle
2. Too far

Returned image

Save in app document -Non tested-

If you want to use saveInAppDocument options, then don't forget to add those raws in .plist :

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>

Contributors

Set up dev environment

Medium article