react-native-live-detect-edges

📸 React Native Live Document Edge Detection

A high-performance, real-time document edge detection and crop library for React Native (iOS & Android).

---

📱 Demo

iOS (Live Detection)	Android (Live Detection)

iOS (Manual Crop)	Android (Manual Crop)

---

🚀 Features

• Real-time Edge Detection: Detects document boundaries instantly from the camera feed.
• Cross-Platform: Fully supported on iOS and Android.
• High Quality Capture: Captures high-resolution images of the document.
• Perspective Correction: Automatically crops and warps the detected document to a flat rectangle.
• Customizable UI: Customize the overlay color, stroke width, and more.
• TypeScript Support: First-class TypeScript definitions included.

📦 Installation

npm install react-native-live-detect-edges
# or
yarn add react-native-live-detect-edges

iOS Setup

Don't forget to install the pods:

cd ios && pod install

Add the following key to your Info.plist to request camera permission:

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan documents.</string>

Android Setup

Ensure you have the camera permission in AndroidManifest.xml (the library adds it, but your app must request it at runtime):

<uses-permission android:name="android.permission.CAMERA" />

💻 Usage

1. The Scanner View (LiveDetectEdgesView)

This component renders the camera preview with the live edge detection overlay.

import { LiveDetectEdgesView } from 'react-native-live-detect-edges';

<LiveDetectEdgesView
  style={{ flex: 1 }}
  overlayColor="rgba(0, 255, 0, 0.5)"
  overlayStrokeWidth={4}
/>;

2. Capturing and Cropping (takePhoto)

Use the takePhoto method to capture the current document. It returns the full image and the detected corner points.

import { takePhoto } from 'react-native-live-detect-edges';

const handleCapture = async () => {
  try {
    const result = await takePhoto();
    console.log('Original Image:', result.originalImage.uri);
    console.log('Cropped Image:', result.image.uri); // Auto-cropped if detected
  } catch (error) {
    console.error('Capture failed:', error);
  }
};

3. Manual Cropping (cropImage)

If you want to manually adjust the crop points (e.g., in a custom UI), use cropImage.

import { cropImage } from 'react-native-live-detect-edges';

const result = await cropImage({
  imageUri: 'file:///path/to/image.jpg',
  quad: {
    topLeft: { x: 100, y: 100 },
    topRight: { x: 400, y: 100 },
    bottomRight: { x: 400, y: 500 },
    bottomLeft: { x: 100, y: 500 },
  },
});

console.log('New Cropped URI:', result.uri);

4. Advanced Usage: Drag & Drop Crop UI

To obtain the quad (Quadrilateral) coordinates for manual cropping, you typically need a UI that allows users to drag corner points over the image.

We provide a full example of such a UI using react-native-gesture-handler and react-native-reanimated in the example app.

👉 Check out the implementation here: example/src/screens/CropScreen.tsx

🧩 API Reference

<LiveDetectEdgesView /> Props

Prop	Type	Default	Description
overlayColor	string	"rgba(0, 255, 0, 0.5)"	The color of the edge detection overlay (stroke).
overlayFillColor	string	undefined	The fill color of the detected area. Defaults to a semi-transparent version of overlayColor if not specified.
overlayStrokeWidth	number	4	The thickness of the detection lines.
style	ViewStyle	-	Standard React Native style prop.

Methods

takePhoto(): Promise<TakePhotoResult>

Captures the current frame, attempts to detect edges, and saves both the original and a cropped version.

Returns:

• originalImage: { uri, width, height }
• image: { uri, width, height } (The auto-cropped result)
• detectedPoints: Quadrilateral (Corner points in image coordinates)

cropImage(params): Promise<CropImageResult>

Performs a perspective transform on an image given specific corner points.

Params:

• imageUri: string (Local file path)
• quad: Quadrilateral (topLeft, topRight, bottomRight, bottomLeft)

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

👏 Acknowledgements

Special thanks to the authors of these amazing libraries:

• Android: Big thanks to pynicolas for FairScan. This library provided the core inspiration and logic for the Android implementation.
• iOS: Huge shoutout to the team at WeTransfer and all contributors of WeScan for building such a robust foundation.

📄 License

MIT

---

Made with create-react-native-library