react-native-document-scanner-plugin

This plugin does not run in Expo Go. To use it with Expo, you must use a development build. Follow these steps:

1. Install the plugin: npx expo install react-native-document-scanner-plugin

2. Add the plugin to your app.json or app.config.json to configure permissions:

{
  "name": "my expo app",
  "plugins": [
    [
      "react-native-document-scanner-plugin",
      {
        "cameraPermission": "We need camera access, so you can scan documents"
      }
    ]
  ]
}

3. Rebuild your project using npx expo prebuild or eas build.

Install the package using npm:

npm install react-native-document-scanner-plugin

iOS Setup

1. Add the NSCameraUsageDescription (Privacy - Camera Usage Description) key to your Info.plist file with a descriptive string explaining why the app needs camera access.
2. Install pods:

cd ios && pod install && cd ..

Android Setup

No additional manual permission configuration is required for this plugin to work, unless you are already using another plugin that manages camera permissions.

The react-native-document-scanner-plugin provides an Expo Config Plugin to automate the native configuration required for the library. You can use this plugin in your app.json or app.config.js to ensure the native modules are correctly linked and configured during the Expo prebuild process.

// Example usage in app.config.js
module.exports = {
  expo: {
    name: 'My App',
    plugins: ['react-native-document-scanner-plugin'],
    // ... other config
  }
};

On Android, you can restrict the number of documents a user can scan in a single session by passing the maxNumDocuments option to DocumentScanner.scanDocument(). This is useful for specific use cases like scanning both sides of a business card.

Note: This option only works on Android.

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

const scanDocument = async () => {
  const { scannedImages } = await DocumentScanner.scanDocument({
    maxNumDocuments: 2
  })

  if (scannedImages.length > 0) {
    // handle scanned images
  }
}

The ScanDocumentResponse object is returned upon completion of the scanDocument() call. It contains the scanned data and the outcome of the operation.

To start the document scanner, call DocumentScanner.scanDocument(). This method returns a Promise that resolves to an object containing an array of scanned image file paths under the scannedImages key.

Note: The returned paths can be used directly as a uri in a React Native Image component.

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

const scanDocument = async () => {
  // start the document scanner
  const { scannedImages } = await DocumentScanner.scanDocument()

  // scannedImages is an array of scanned image file paths
  if (scannedImages.length > 0) {
    // use scannedImages[0] as a URI for an Image component
  }
}

The scanDocument() method opens the camera interface and initiates the document scanning process. It returns a Promise that resolves to a ScanDocumentResponse object containing the results of the scan.

Signature: scanDocument(options?: ScanDocumentOptions) => Promise<ScanDocumentResponse>

const response = await DocumentScanner.scanDocument(options);

You can pass an optional ScanDocumentOptions object to scanDocument() to customize the scanning behavior.

const options: ScanDocumentOptions = {
  croppedImageQuality: 90,
  responseType: ResponseType.Base64,
};
const { scannedImages, status } = await DocumentScanner.scanDocument(options);

The ScanDocumentResponseStatus enum indicates the final state of the scanning session.

// ScanDocumentResponseStatus
{
  Success: 'success'; // The document scan completed successfully.
  Cancel: 'cancel';   // The user closed the camera before completing the scan.
}

The ResponseType enum defines the format of the strings returned in the scannedImages array.

// ResponseType
{
  Base64: 'base64';        // Returns document scan as base64 images.
  ImageFilePath: 'imageFilePath'; // Returns document scan as image file paths.
}

Use the ScanDocumentOptions object to customize the scanning experience. Supported options are:

• croppedImageQuality (number, optional): The quality of the cropped image from 0 to 100. Defaults to 100.
• maxNumDocuments (number, optional): Android only. The maximum number of photos a user can take (excluding retakes). Defaults to undefined.
• responseType (ResponseType, optional): Determines the format of the returned images. Defaults to ResponseType.ImageFilePath.

const options: ScanDocumentOptions = {
  croppedImageQuality: 80,
  maxNumDocuments: 5, // Android only
  responseType: ResponseType.Base64
};