April 27, 2022 - Latitude

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. Also Read - Know Every thing about React 18 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 useState(null); const 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 && ( )} ); } 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.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.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 useState(null); const 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 && ( )} {text} ); } Last words: So far, we have learned how to write a react native text detector. The OCR program finds its application in retail, marketing and other business. It is great to complete the huge task in a little time. However, you should have experienced React Native developers. You May Also Like August 25, 2018 Native Mobile Apps vs Hybrid Mobile Apps (Pros and Cons) Read more August 29, 2018 Android App Development – Kotlin Read more May 13, 2019 Empowering Businesses With React Native Apps – Hype or Hope? Read more July 24, 2019 Angular Development: Compelling Features, Benefits and Applications Read more August 5, 2019 ADA Compliance for Websites: Protect Your Digital Home Read more April 22, 2020 Everything You Need to Know About Edge of Computing Read more

How to Build a Text Detector in React Native?

Company

Why Latitude

HIRE US

contact channels

Address

CAll US

networks

contact

Address

New york

Mississippi

Sitemap

Primary menu

About us

quick link

contact channels