Best way to extract text from a photo/image in React Native?

Viewed 6432

I am building an app with React Native.

After a user takes a photo of an invoice, I would like to be able to extract some key data from the text in the image. I know I will need an OCR of some sort. Is there an easy solution to this? I've seen react-native-text-detector. Is that my best option? Is there a best solution to this?

1 Answers

You can use react-native-firebase-mlkit. It has a lot more functionality than just performing OCR. It also has both on-device support and cloud based support depending on your need.

Here is the library's GitHub page.

It's a wrapper for Google's ML Kit

Heres's a simple example of how to use it:

import RNMlKit from 'react-native-firebase-mlkit';

export class textRecognition extends Component {
  ...

  async takePicture() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true, skipProcessing: true, forceUpOrientation: true };
      const data = await this.camera.takePictureAsync(options);
      // for on-device (Supports Android and iOS)
      const deviceTextRecognition = await RNMlKit.deviceTextRecognition(data.uri); 
      console.log('Text Recognition On-Device', deviceTextRecognition);
      // for cloud (At the moment supports only Android)
      const cloudTextRecognition = await RNMlKit.cloudTextRecognition(data.uri);
      console.log('Text Recognition Cloud', cloudTextRecognition);
    }
  };

  ...
}
Related