Complete Guide of React Native Document Scanner Library (Only iPhone)
Let’s start from the beginning, if you are looking for a document scanner the same as the 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:
- Live detection
- Live camera filters (brightness, saturation, contrast)
- Flash
- Easy to use the base64 image
- Get URI as well as 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 in 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 a proper description that why you want this camera.
With Cocoapods – If you are installing with cocoa pods then you can write the below lines to the pod file and then use the 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:
Properties:
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 to scan, as you can see it directly captures the edges and gives the rectangle 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 [email protected]. 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 to our readers.
Our Recent Article:
