How to Create a React Native Document Scanner

Can't wait to see the fun part?

Jump to code

Document Scanner App

A document scanner app is a professional tool that uses the device's camera to take a picture of a physical (paper) document and transforms it into a digital version. The main goal is to make it look like it was scanned with a Desktop Scanner. That is, crisp text and high contrast between background and text. In order to achieve this, the document scanner needs to do a few processing steps:

• Document edge detection within the image in order to crop the document
• Do a perspective correction to make the document look as it was scanned from top
• Apply some sort of filter to enhance the colors and make the background mostly white

Most successful scanner apps like Adobe Scan or CamScanner are able to do the document recognition within the camera frame in real time to make the document scanning process as easy and less error prone as possible.

If you take a look at more sophisticated scanner apps or document management apps like our app Docutain, they go a few steps further. Once the document was scanned successfully, OCR text recognition is run. With this, you can get two things:

• Searchable PDF files, as they include the recognized text
• Intelligent Data Extraction, e.g. invoice or address data

Building a high quality cross-platform document scanner app for iOS and Android from scratch takes a lot of time, effort and knowledge in a lot of different specializations. Even if you were to build a document scanner successfully, your job won't be done. The vast majority of devices (especially for an Android app) and OS versions cause a lot of maintenance work to be done in order to maintain the compatibility and high quality of your document scanner. All in all it costs a lot of money, time and manpower to have a successful document scanner - trust us, we've been there.

Should you need support with the implementation, we also offer developer support.

So what if I told you that there is a possibility to get a world class document scanner and being able to integrate it into your React Native app in no time?

This short tutorial will guide you through the process of adding a top notch scanner into your React Native app by using our Docutain Document Scanner SDK.

Prerequesites

You can find exhaustive information on how to get started with React Native by reading the React Native documentation. The following prerequesites are a shortened version based on a Windows development platform.

Configure a text editor or IDE

Basically you can implement and run React Native apps using any kind of text editor in combination with the React Native CLI. However, a professional IDE with a React Native extension will provide you many benefits, e.g. code completion, syntax highlighting, debugging and many more. The most popular options are:

• Visual Studio Code 1.75 or later with the React Native extension for VS Code
• Android Studio 2022.3 (Giraffe) or later with the React Native plugin for IntelliJ
• IntelliJ IDEA 2022.3 or later with the React Native plugin for IntelliJ

Getting started

First, you need a React Native project which you will use to implement the document scanner. Either create it in your IDE or with the following command in your shell or terminal:

npx react-native@latest init documentscanner_sample

The Docutain SDK for React Native is distributed via npm: Docutain SDK for React Native. To install the react-native-document-scanner-plugin run the following command:

npm install @docutain/react-native-docutain-sdk

Add the following import to your code.

import DocutainSDK, {DocumentScannerConfiguration, AnalyzeConfiguration} from '@docutain/react-native-docutain-sdk';

Implement the Document Scanner Feature

A great Document Scanner SDK stands out by providing the functionality with just a few lines of code, so that's what we did. In order to start the document scanner you just need to add one line of code:

const result = await DocutainSDK.scanDocument(options); 

Document Scanner Configuration

The Docutain Document Scanner SDK comes with UI components and predefined settings, theming and layouts. The default settings will be a good choice in most cases. The predefined layouts are the result of our long standing experience of our Docutain Document Management App, which includes the Docutain SDK and is used by millions of users around the world on a daily basis.

If your use case requires different default values, e.g. single page scanning instead of multi page scanning, you can of course change them. Either by setting them fixed in your code, or by providing a custom settings page providing the user to change these values on his behalf. It is also possible to alter the default theming to visually integrate the Scanner into your corporate branding.

Most common Document Scanner Settings

Default scan filter

The preparation of camera images is one of the requirements that require a lot of effort. The removal of the background and especially the processing of embedded color images is one of our strengths.

Our React Native Document Scanner Plugin has a set of currently 8 predefined image filters. All of them have their own strengths, however, the one we have defined as default will provide you the best possible scan quality in almost all the cases. Nonetheless, it is of course possible to set any of the predefined filters as the default scan filter.

The quality of our filters can be seen in the color of the T-shirt in the following examples.

Automatic Capture

Docutain's Document Scanner captures the image at the perfect moment automatically. The only thing the user needs to do is to hold the phone above the document to be scanned. However, if you need the user to capture the image manually, you can disable automatic capture.

Multi Page Scan

Scanning multiple pages at once is the default setting, this will ensure maximum efficiency when scanning. If you need single page scanning, of course this is also possible.

Theming

Theming is an important part when it comes to matching the scanner to your corporate branding. You can find all possible theming options in our documentation: React Native Document Scanner Theming. The Docutain SDK supports native dark mode theming as well.

There are a lot more configuration options. If you are interested in them, feel free to check out our documentation or sample app on Github.

Add OCR Text Recognition Feature

Adding OCR Text recognition to your document scanner is just as easy. Just add the following line of code once the scan process finished:

const text: String = await DocutainSDK.getText();

This will provide you the text of the scanned document. If it has multiple pages it will return the text of all scanned pages. Of course you can get the text of a specific page by providing the page number. OCR Text recognition also works on imported files (images and PDF files).

Add Data Extraction Feature

You can probably guess it already. Adding data extraction features to your React Native app also is possible by adding just one line of code:

const analyzeData: string = await DocutainSDK.analyze();

The returned data will be JSON formatted, you can find samples here: Data Extraction Documentation. Currently the best results will be achieved for documents that contain German language. If you need to support different languages our you need to detect specific kinds of data, we would love to hear from you: Contact us.

Learn more about the Docutain SDK. Besides the Document Scanner SDK we also offer a Barcode Scanner SDK. All SDKs are available for all major platforms/frameworks.

If you want to test the Document Scanner SDK without writing any lines of code, check out our Showcase App.