Select Page

Let’s start from the beginning, if you are looking for a document scanner the same as Doc Scanner application then you are at the right place.

There is only one best library that I can suggest to you and that is react-native-document-scanner.

Let us now look at some of the best features of React Native Document Scanner Library.

features of iOS doc scanner

Features:

  • Live detection
  • Live camera filters (brightness, saturation, contrast)
  • Flash
  • Easy to use the base64 image
  • Get URI as well base64 image

Installation:

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

By doing this you will have this library into your project. Now you can play with it.

Note:

This library uses the camera so you need to add NSCameraUsageDescription in Info.plist, Please add proper description that why you want this camera.

With Cocoapods – If you are installing with cocoa pods then you can write below lines to pod file and then user pod install command to install.

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

Manual Linking:

If still, you are unable to use this library then you need to do manual linking.

Go to XCode ->> Project ->> Library right click to Library and select “Add Files to project_name” and choose XCode project from node_modules ->> react-native-document-scanner ->> ios.

Now expand the added library and goto products and drag inside lib into build phases of your project, then open “Link Binary with Libraries” and drag that added Library. And you are done with the installation process.

Usage:

Below is the code snippet to use this library:

use this library

Properties:

PropertyDefaultTypeDescription
overlayColornonestringColor of the detected rectangle : rgba recommended
detectionCountBeforeCapture5integerNumber of correct rectangle to detect before capture
detectionRefreshRateInMS50integerTime between two rectangle detection attempt
enableTorchfalseboolAllows to active or deactivate flash during document detection
useFrontCamfalseboolAllows you to switch between front and back camera
brightness0floatIncrease or decrease camera brightness. Normal as default.
saturation1floatIncrease or decrease camera saturation. Set 0 for black & white
contrast1floatIncrease or decrease camera contrast. Normal as default
quality0.8floatImage compression. Reduces both image size and quality
useBase64falseboolIf base64 representation should be passed instead of image uri's
captureMultiplefalseboolKeeps the scanner on after a successful capture

Manual Capture:

After implementation, you can see there might be chances that you can not scan some of the documents due to some extra edges or low light or any other reason. Then you need to capture it manually.

So you need to give a ref to the Scanner component and use this.scanner.capture() method to capture manually, where a scanner is the ref of the scanner view.

Reference: <Scanner ref={(ref) =>this.scanner = ref} />

Capture: this.scanner.capture();

Screenshots:

Live scanning

Live to scan, as you can see it directly captures the edges and gives the rectangle image.

resulting image

This is the resulting image. You can save it or you can use it for further use.

Conclusion

React Native Document Scanner has all the features to ensure proper document scanning. If you still have any queries or doubts regarding react native document scanner, you can write to us at sales@metizsoft.com. We will be more than happy if you enlighten us with your useful insights. We at Metizsoft Solutions, a mobile app development company always strive to bring useful technological updates from the world of mobile app development for our readers.

Our Recent Article: