How to Build a Text Detector in React Native?
Data entering is a crucial task in any business. Especially in the bank or any other financial company. It is to be done with care. High accuracy is the primary need in the data entry work. Thanks to react-native text detectors that make it possible to avail data accuracy in less time.
Here in this blog, we will learn how to build a text detector in the React Native with Google Cloud vision API. Let’s go ahead.
Google Cloud Vision:
Now you will learn how to activate Google’s text detection API. Initially, navigate to the Google Cloud Console and then click on the New Project.
Further, we will tell Google that we need Cloud Vision API use. For this, click on Marketplace.
After that, search for Cloud Vision API and then enable it.
The next comes about authorization after enabling the API. Google requires the API key creation. For this, create credentials.
Click on Done, and it will bring you to the Dashboard page. Click on the Create credentials and then API key.
The program will now give the API key. You need to copy this code to the file or somewhere else.
Building the project:
Creating Project:
By running the following terminal command you will initialize the repository using Expo CLI.
expo init text-detector-tutorial The expo will now prompt you to choose the template.
Modules Installation:
Now we will let the client click pictures from their camera roll. We will use the expo-image-picker module.
Npm i expo-image-picker Coding our utility functions:
Further to create a text detector in React Native, we will develop the file called helperFunctions.js. This file will contain the utility functions that we will use throughout the project.
//file name: helperFunctions.js
const API_KEY = 'API_KEY_HERE'; //put your key here.
//this endpoint will tell Google to use the Vision API. Also, we are passing in our key.
const API_URL = `https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}`;
function generateBody(image) {
const body = {
requests: [
{
image: {
content: image,
},
features: [
{
type: 'TEXT_DETECTION', //we will use this API for text detection purposes.
maxResults: 1,
},
],
},
],
};
return body;
} Some concepts from this snippet are as follows:
The API Key will be mentioned in this API_KEY constant. It is necessary to integrate Google’s Cloud Vision API into the app.
We create a generateBody function that will generate the payload for the request. For OCR purposes, React Native will send this payload to Google.
This method will also accept an image parameter. This will also contain base64-encoded data on the desired picture.
Append the following code to helperFunctions.js:
//file: helperFunctions.js
async function callGoogleVisionAsync(image) {
const body = generateBody(image); //pass in our image for the payload
const response = await fetch(API_URL, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
const result = await response.json();
console.log(result);
}
export default callGoogleVisionAsync; Our image picker component building:
We will make a new file called ImagePickerComponent.js. The user will choose the photo from the gallery using this file.
Write the following code in ImagePickerComponent.js:
import * as ImagePicker from 'expo-image-picker';
import React, { useState, useEffect } from 'react';
import { Button, Image, View, Text } from 'react-native';
function ImagePickerComponent({ onSubmit }) {
const [image, setImage] = useState(null);
const [text, setText] = useState('Please add an image');
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
base64: true, //return base64 data.
//It will allow the Vision API to read this image.
});
if (!result.cancelled) { //if the user submits an image,
setImage(result.uri);
//run the onSubmit handler and pass in the image data
const googleText = await onSubmit(result.base64);
}
};
return (
{image && (
<Image
source={{ uri: image }}
style={{ width: 200, height: 200, resizeMode:"contain" }}
/>
)}
);
}
export default ImagePickerComponent; Here is a brief explanation:
We created the pickImage function after initializing ImagePickerComponent that will enable the user to select the file.
The program will run the onSubmit handler if the user submits an image.
The app will display the image to the UI after the submission.
import ImagePickerComponent from
"./ImagePickerComponent";
return (
); Here, we are providing our ImagePickerComponent module and passing in our onSubmit handler. It will log out the selected image’s encoded data to the console.
Run the app using this Bash command:
expo start
We will use the power of Google vision to implement OCR in the application.
Connecting Google Cloud Vision with the image picker:
import callGoogleVisionAsync from "./helperFunctions.js";
//code to find:
return (
{/*Replace the onSubmit handler:*/}
); Edit the above code in App.js
In the above snippet, we have replaced our onSubmit handler with callGoogleVisionAysync. It will send the input of user to Google servers for OCR operations.
At last, attach the piece of code to the end of callGoogleVisionAsync
//file: helperFunctions.js.
//add this code to the end of callGoogleVisionAsync function
const detectedText = result.responses[0].fullTextAnnotation;
return detectedText
? detectedText
: { text: "This image doesn't contain any text!" };
This will tell the program to check if there was a valid response. The function will return the extracted text if the condition is met. Otherwise, an error will come.
async function callGoogleVisionAsync(image) {
const body = generateBody(image);
const response = await fetch(API_URL, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
const result = await response.json();
console.log(result);
const detectedText = result.responses[0].fullTextAnnotation;
return detectedText
? detectedText
: { text: "This image does not include any text!" };
} The complete callGoogleVisionAsync function will look like the above code.
Rendering OCR data to the UI:
The last one will display the image text to the UI after developing OCR in the program.
//code to find:
if (!result.cancelled) {
setImage(result.uri);
setText("Loading.."); //set value of text Hook
const responseData = await onSubmit(result.base64);
setText(responseData.text); //change the value of this Hook again.
}
//extra code removed for brevity
//Finally, display the value of text to the user
return (
{text}
{/*Further code..*/}
In the end, the ImagePickerComponent will look like this
function ImagePickerComponent({ onSubmit }) {
const [image, setImage] = useState(null);
const [text, setText] = useState("Please add an image");
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
base64: true,
});
if (!result.cancelled) {
setImage(result.uri);
setText("Loading..");
const responseData = await onSubmit(result.base64);
setText(responseData.text);
}
};
return (
{image && (
<Image
source={{ uri: image }}
style={{ width: 400, height: 300, resizeMode: "contain" }}
/>
)}
{text}
);
} 
