react-native-document-scanner

 

Fast, native React Native document scanner for iOS and Android using Apple VisionKit (iOS) and Google ML Kit (Android). Features automatic document detection, edge/perspective correction, multi‑page scanning, configurable image quality, optional Base64, and support for the React Native New Architecture (Fabric/TurboModules on iOS).

- iOS: Uses VisionKit framework and VNDocumentCameraViewController
- Android: Uses ML Kit Document Scanner API

Preview

| iOS Demo | Android Demo |
|----------|--------------|
| !iOS document scanner demo | !Android document scanner demo |

Features

- 📱 Cross-platform support (iOS 13+ and Android API 21+)
- 🚀 iOS: Full support for new React Native architecture (Fabric/TurboModules)
- 📸 Automatic document detection and scanning
- 🖼️ Multi-page document scanning
- ⚙️ Configurable image quality
- 📦 Optional base64 encoding
- 🎯 Platform parity - same API for both platforms

> Keywords: React Native document scanner, VisionKit document scanner, ML Kit document scanner, scan documents React Native, edge detection, perspective correction, multi‑page scanner

Installation

$3

``bash
npm install @dariyd/react-native-document-scanner
`

or with yarn:

`bash
yarn add @dariyd/react-native-document-scanner
`

$3

`bash
npm install https://github.com/dariyd/react-native-document-scanner.git
`

or

`bash
yarn add https://github.com/dariyd/react-native-document-scanner.git
`

$3

`bash
cd ios && pod install
`

$3

No additional steps required. The ML Kit dependency will be automatically included.

Post-install Steps

$3

Add the NSCameraUsageDescription key to your Info.plist:

`xml
NSCameraUsageDescription
We need access to your camera to scan documents
`

$3

Add camera permission to your AndroidManifest.xml:

`xml

`

The module automatically requests camera permission when launching the scanner.

React Native New Architecture

This module requires React Native 0.77.3 or higher and supports the new architecture on iOS, while using the stable old architecture on Android.

iOS: Full support for Fabric and TurboModules - automatically detected and enabled when you enable new architecture in your project.

Android: Uses the stable bridge implementation for maximum compatibility. New architecture support is planned for a future release.

$3

- React Native 0.77.3 or higher
- React 18.2.0 or higher
- iOS 13.0 or higher
- Android:
- Minimum SDK: API 21 (Android 5.0)
- Target SDK: API 35 (Android 15) - required by Google Play Store
- Compile SDK: API 35

$3

✅ iOS: Fully supported - Set RCT_NEW_ARCH_ENABLED=1 in your Podfile or build settings

⚠️ Android: Currently uses old architecture only. New architecture support for Android is coming in a future release.
- The module is implemented as a Java-only TurboModule on Android, which requires additional C++ bridging setup
- Keep newArchEnabled=false in your gradle.properties for now
- The module works perfectly with the old architecture on Android

The iOS implementation will automatically use Fabric/TurboModules when enabled, while Android will continue to use the stable bridge implementation.

Usage

`javascript
import { launchScanner } from 'react-native-document-scanner';

// Basic usage
const result = await launchScanner();

// With options
const result = await launchScanner({
quality: 0.8,
includeBase64: false,
});

// With callback (optional)
launchScanner({ quality: 0.9 }, (result) => {
if (result.didCancel) {
console.log('User cancelled');
} else if (result.error) {
console.log('Error:', result.errorMessage);
} else {
console.log('Scanned images:', result.images);
}
});
`


API Reference

Methods

`js
import {launchScanner} from 'react-native-document-scanner';
`

$3

Launch scanner to scan documents.

See Options for further information on options.

The callback will be called with a response object, refer to The Response Object.

Options

| Option | iOS | Android | Description |
| -------------- | --- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| quality | ✅ | ✅ | Number between 0 and 1 for image quality (default: 1). Lower values reduce file size |
| includeBase64 | ✅ | ✅ | If true, creates base64 string of the image (Avoid using on large image files due to performance) | |

The Response Object

| key | iOS | Android | Description |
| ------------ | --- | ------- | ------------------------------------------------------------------- |
| didCancel | ✅ | ✅ | true if the user cancelled the process |
| error | ✅ | ✅ | true if error happens |
| errorMessage | ✅ | ✅ | Description of the error, use it for debug purpose only |
| images | ✅ | ✅ | Array of the selected media, refer to Image Object |

Image Object

| key | iOS | Android | Description |
| --------- | --- | ------- | -------------------------------------------------- |
| base64 | ✅ | ✅ | The base64 string of the image (if includeBase64 is true) |
| uri | ✅ | ✅ | The file uri in app specific cache storage |
| width | ✅ | ✅ | Image width in pixels |
| height | ✅ | ✅ | Image height in pixels |
| fileSize | ✅ | ✅ | The file size in bytes |
| type | ✅ | ✅ | The file MIME type (e.g., "image/jpeg") |
| fileName | ✅ | ✅ | The file name |

Platform Differences

While both platforms provide similar functionality, there are some minor differences:

$3

If you encounter issues with ML Kit on Android, ensure that:
1. Google Play Services is installed on the device/emulator
2. Your compileSdkVersion is 35 or higher
3. Your targetSdkVersion is 35 (required by Google Play Store)
4. Your minSdkVersion is 21 or higher

$3

Ensure you've added the NSCameraUsageDescription key to your Info.plist.

Example

Check the example/` directory for a complete example app demonstrating the scanner.

Inspired By

- iOS implementation: react-native-image-picker
- Android ML Kit: Google ML Kit Document Scanner

License

MIT