React Native Document Scanner (iOS only)

Check out the android branch if you need both platforms, should be released soon

Live 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 !

Features :

Live detection
Perspective correction and crop of the image
Live camera filters (brightness, saturation, contrast)
Flash
Easy to use base64 image

Can be easily plugged with react-native-perspective-image-cropper

Getting started

Use version >=1.4.1 if you are using react-native 0.48+

$ npm install react-native-document-scanner --save

$ react-native link react-native-document-scanner

Edit the info.plist file in XCode and add the following permission : NSCameraUsageDescription

Remember, this library uses your device camera, you can't run it on a simulator.

With Cocoapods

If you want to use Cocoapods insteads of react-native link, add the following to your Podfile

  pod 'RNPdfScanner', :path => '../node_modules/react-native-document-scanner/ios'

Usage

import React,{ Component } from 'react';
import { View, Image } from 'react-native';

import DocumentScanner from 'react-native-document-scanner';

class YourComponent extends Component {
  render() {
    return (
      <View>
        <DocumentScanner
          useBase64
          saveInAppDocument={false}
          onPictureTaken={data => this.setState({
            image: data.croppedImage,
            initialImage: data.initialImage,
            rectangleCoordinates: data.rectangleCoordinates,
          })}
          overlayColor="rgba(255,130,0, 0.7)"
          enableTorch={false}
          brightness={0.3}
          saturation={1}
          contrast={1.1}
          quality={0.5}
          onRectangleDetect={({ stableCounter, lastDetectionType }) => this.setState({ stableCounter, lastDetectionType })}
          detectionCountBeforeCapture={5}
          detectionRefreshRateInMS={50}
        />
        <Image source={{ uri: `data:image/jpeg;base64,${this.state.image}`}} resizeMode="contain" />
      </View>
    );
  }
}

Properties

Prop	Default	Type	Description
overlayColor	`none`	`string`	Color of the detected rectangle : rgba recommended
detectionCountBeforeCapture	`5`	`integer`	Number of correct rectangle to detect before capture
detectionRefreshRateInMS	`50`	`integer`	Time between two rectangle detection attempt
enableTorch	`false`	`bool`	Allows to active or deactivate flash during document detection
useFrontCam	`false`	`bool`	Allows you to switch between front and back camera
brightness	`0`	`float`	Increase or decrease camera brightness. Normal as default.
saturation	`1`	`float`	Increase or decrease camera saturation. Set `0` for black & white
contrast	`1`	`float`	Increase or decrease camera contrast. Normal as default
quality	`0.8`	`float`	Image compression. Reduces both image size and quality
useBase64	`false`	`bool`	If base64 representation should be passed instead of image uri's
saveInAppDocument	`false`	`bool`	If should save in app document in case of not using base 64
captureMultiple	`false`	`bool`	Keeps the scanner on after a successful capture

Manual capture

First get component ref

<DocumentScanner ref={(ref) => this.scanner = ref} />

Then call :

this.scanner.capture();

Each rectangle detection

Props	Params	Type	Description
onRectangleDetect	`{ stableCounter, lastDetectionType }`	`object`	See below

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

Wrong perspective, bad angle
Too far

Returned image

Prop	Params	Type	Description
onPictureTaken	`data`	`object`	Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }`

Save in app document

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

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

If you prefer manual installation

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-pdf-scanner and add RNPdfScanner.xcodeproj
In XCode, in the project navigator, select your project. Add libRNPdfScanner.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

Woonivers/woo-react-native-document-scanner