react-native-ocr-scanner

A React Native package for capturing images, cropping them, and performing Optical Character Recognition (OCR) using on-device ML capabilities.

Features

• Capture images using the device camera
• Crop captured images
• Perform OCR on cropped images
• Easy to integrate with React Native projects

Installation

npm install react-native-ocr-scanner
# or
yarn add react-native-ocr-scanner

Dependencies

This package relies on the following libraries. Make sure to install them in your project:

npm install react-native-image-picker react-native-image-crop-picker @react-native-ml-kit/text-recognition react-native-permissions
# or
yarn add react-native-image-picker react-native-image-crop-picker @react-native-ml-kit/text-recognition react-native-permissions

iOS Setup

For iOS, add the following to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera for OCR functionality.</string>

Android Setup

For Android, add the following permissions to your AndroidManifest.xml:

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

Usage

Here's a basic example of how to use the react-native-ocr-scanner in your React Native app:

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import captureCropAndRecognizeText from 'react-native-ocr-scanner';

const OCRExample = () => {
  const [recognizedText, setRecognizedText] = useState('');

  const handleOCR = async () => {
    try {
      const result = await captureCropAndRecognizeText();
      if (result) {
        setRecognizedText(result.text);
      }
    } catch (error) {
      console.error('OCR Error:', error);
    }
  };

  return (
    <View>
      <Button title="Capture & Recognize Text" onPress={handleOCR} />
      <Text>{recognizedText}</Text>
    </View>
  );
};

export default OCRExample;

API

captureCropAndRecognizeText(options?)

This is the main function exported by the package. It handles the entire process of capturing an image, allowing the user to crop it, and then performing OCR on the cropped image.

Parameters

• options (optional): An object containing configuration options for the camera and cropping process.
  • cameraOptions: Options for react-native-image-picker
  • cropOptions: Options for react-native-image-crop-picker

Returns

• A Promise that resolves to an object containing the recognized text, or null if no text was recognized.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Acknowledgements

This package uses the following open-source libraries:

• react-native-image-picker
• react-native-image-crop-picker
• @react-native-ml-kit/text-recognition
• react-native-permissions

Support

If you're having any problem, please raise an issue on GitHub.