Live OCR in React-Native

Text Recognition + Text Blocks i.e. Written Text.

This is what I've made so far, Basic and Simple

Okay, let's dive straight into complaining, there are a veryyyyyy few tutorials out there on OCR and most of them are so complicated or won't work altogether.

There are GitHub starter projects that won't even configure on your machine smh? Never happened? oh, okay, I admit I'm naive but if you have struggled enough like me I've got the simplest best OCR tutorial for you.

Okay first, drop off all your fancy libraries because this simple react-native-camera gonna do the trick for you. IKR, would've never guessed.

Installing it is simple and tricky both at same time, now listen to me carefully follow this documentation properly, I know we don’t do that but it's IMPORTANT!!

If you follow documentation precisely you'll likely have it working but if you still have any problems reach me out we'll figure it out.

Please not that you’re gonna need an actual device to test this as it needs a hardware feature Camera, android iOS all are welcome here, but simulator ain’t gonna do.

Okay now that we're all set up here's the idea:

• OCR.js- Live Camera + OCR detector.

Let’s get coding..

... //with all of your other imports
import { RNCamera } from 'react-native-camera';

Firstly obviously, import react-native-camera to your file.

export default class OCRScreen extends React.Component {
state = {
canDetectText: true,
textBlocks: [],
};
}

We defined two states one acts as flag and other holds detected text.

render() {
return <View style={styles.container}>{this.renderCamera()}</View>;
}

In our render function we returned our camera function, now let's code that..

renderCamera() {
const { canDetectText } = this.state;
return (
<RNCamera
ref={ref => {this.camera = ref;}}
style={{flex: 1,}}
trackingEnabled
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onTextRecognized={canDetectText ? this.textRecognized : null}
>
{!!canDetectText && this.renderTextBlocks()}
</RNCamera>
);
}

We're using react-native-camera it comes with different props so you're in control you can adjust zoom, flash, focus, white balance and many to your need, we're going with basics, providing permission and other messages and titles, reference to the class itself to launch camera and some basic styling.

We added permissions for android if they aren't already granted.

The magic will happen here and asa it happens i.e. onTextRecognized is triggered we’ll call our textRecognized function which does further processing for us.

textRecognized = object => {
const { textBlocks } = object;
this.setState({ textBlocks });
};
 

It’s always good to do everything in smallll functions rather than long, unreadable complex code that we won’t recognize next morning.

Our function takes the detected text object and simply update our state.

Now our renderTextBlocks to rescue or view (bad jokes).

renderTextBlocks = () => (
<View style={styles.facesContainer} pointerEvents="none">
{
this.state.textBlocks.map(this.renderTextBlock)
}
</View>
);

All basics just we disabled pointerEvents, that basically makes view immune to any taps user might make on previewed textblocks.

Controls whether the View can be the target of touch events.

That’s a wrap on Live OCR reader in react-native, if I missed anything please let me know because I continued writing this article after 6 months because of my poor time management I continued with smaller articles.

We did a pretty good job I’ll say.

What to do now? You can try making your OCR but not live just click a picture and or upload it from gallery and detect text from it, that’s a handy thing too. It’s easier than you think, it’s easier than live OCR.

Hint: Write basic Camera capture code or just obtain image URI howsoever and magic spell is:

RNTextDetector.detectFromUri(yourURI);

this line of code will detect and extract all text for you from any visibly accurate/clear picture.

You can use it like so:

const detectedText = await RNTextDetector.detectFromUri(uri);

now all your text is in your detectedText const, WILD!

Well, okay leave now and drop your thoughts or suggestions in comments down below and drop a few dollars in my account.. okay, JK(not if you’re gonna).

if you’re happy and yk it ykw to do.

Next we’ll do the picture OCR, inShaAllah.