How to use Tesseract OCR in React Native Android ( Without Expo )

Introduction

Tesseract opensource OCR engine can be used to recognize plain text in a document, credit cards, etc. They can also be used for automatic data entry, business cards, Converting handwritten messages, old books, manuscripts, written notes, etc. This tutorial will build a React Native (CLI ) application to recognize text from an image using React native camera and Tesseract OCR.

Prerequisites

To proceed with this tutorial:

You will need Android studio for the Android app.

You will also need React native installed. you can install by using the command as shown below.

npm install -g react-native-cli

Overview

We’ll be going through these steps in this article:

1. Setup the development environment.
2. Installing dependencies.
3. Configuration

Building the UI.

1. Adding media picker.
2. Recognize text from the Image.

Building APK

Setup the development environment.

Create a react native app using the command as shown below. The command will create a bare (non-expo) for you.

npx react-native init <your-project-name>

Installing dependencies

You can install these packages in advance or while going through the article.

//copy these in package.json
"react-native-tesseract-ocr": "^2.0.1",
"react-native-image-crop-picker": "^0.32.2",
"react-native-progress": "^4.0.3",
"@react-native-community/art": "^1.2.0"

run following to install the following packages

npm or yarn install 

also, run to link tesseract-ocr.

react-native link react-native-tesseract-ocr

Configuration

Tesseract OCR supports a lot of languages, you have to download the language file you required, you can also use multiple languages in Tesseract OCR.

Download language file from here

In this tutorial, we are using Tesseract OCR for English language text detection

Navigate to the following path

android/app/src/main

Create assets folder inside it create tessdata folder and place the downloaded file.

assets folder

tessdata folder

place downloaded language file

After this, open the AndroidManifest.xml file located in the following location and set app permissions.

android/app/src/main

Add the following code to AndroidManifest.xml

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

and the following in applications as shown in the image

android:requestLegacyExternalStorage=”true”

user permissions

After following the steps, run

cd android && gradlew clean

Now run the app

cd.. & npm run android

Building UI

Code

Tesseract output

Building APK

Tesseract is an on-device OCR engine and can be bundled for production.

Follow this tutorial to build any React Native app for production.

Learn how you can make your react native app production-ready.

If you want to know how to implement Firebase ML Kit in react native android please mention it below in the comments.

Thank you for reading!!

Check out my portfolio: Ameya Upalanchi

LinkedIn: Ameya Upalanchi

My Other Articles:

• Interfacing Motors with raspberry pi