Create an Image to Text App using React-Native

In this article, we are going to build a step-by-step Image to Text app using React-Native. This application will allow users to extract the text from the image using OCR (Optical Character Recognition) and later copy it to the clipboard or share it with others. This application is a perfect usage of React Native as the perfect framework for application development. The application will allow the user to either pick an image from the gallery or click a photo using the camera implemented in the application. Later the image will be shown and a Text component will display the extracted text.

Preview Image:

Prerequisites

• Introduction to React Native
• Introduction React Native Components
• React Native State
• React Native Props
• Expo CLI
• Node.js and npm (Node Package Manager)

Project Setup

Step 1: Create the project

npx create-expo-app image-to-text-app

Step 2: Navigate to the project

cd image-to-text-app

Step 3: Install the expo-location package.

npx expo install expo-image-picker

Project Structure:

Here’s package.json file for dependencies and respective versions.

{
    "name": "image-to-text-app",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web"
    },
    "dependencies": {
        "expo": "~49.0.11",
        "expo-status-bar": "~1.6.0",
        "react": "18.2.0",
        "react-native": "0.72.4",
        "expo-image-picker": "~14.3.2"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0"
    },
    "private": true
}

Approach

• In this application, we use an API for image-to-text. Create a free account and get the API key
• Next, we use expo-image-picker to pick the image from gallery and send the file to perform OCR.
• The performOCR function gets the file as argument and then performs fetch POST operation, and saves the text to a variable.
• The image and the text is displayed.

Example: This example shows the use of the above-explained approach.

Javascript

// App.js file

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import {
    Button,
    StyleSheet,
    Text,
    Image,
    SafeAreaView,
} from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function App() {

    // State to hold the selected image
    const [image, setImage] = useState(null);

    // State to hold extracted text
    const [extractedText, setExtractedText] =
        useState("");

    // Function to pick an image from the
    // device's gallery
    const pickImageGallery = async () => {
        let result =
            await ImagePicker.launchImageLibraryAsync({
                mediaTypes:
                    ImagePicker.MediaTypeOptions.Images,
                allowsEditing: true,
                base64: true,
                allowsMultipleSelection: false,
            });
        if (!result.canceled) {

            // Perform OCR on the selected image
            performOCR(result.assets[0]);

            // Set the selected image in state
            setImage(result.assets[0].uri);
        }
    };

    // Function to capture an image using the
    // device's camera
    const pickImageCamera = async () => {
        let result = await ImagePicker.launchCameraAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            base64: true,
            allowsMultipleSelection: false,
        });
        if (!result.canceled) {

               // Perform OCR on the captured image
            // Set the captured image in state
            performOCR(result.assets[0]);
            setImage(result.assets[0].uri);
        }
    };

    // Function to perform OCR on an image
    // and extract text
    const performOCR = (file) => {
        let myHeaders = new Headers();
        myHeaders.append(
            "apikey",

            // ADDD YOUR API KEY HERE
            "FEmvQr5uj99ZUvk3essuYb6P5lLLBS20"
        );
        myHeaders.append(
            "Content-Type",
            "multipart/form-data"
        );

        let raw = file;
        let requestOptions = {
            method: "POST",
            redirect: "follow",
            headers: myHeaders,
            body: raw,
        };

        // Send a POST request to the OCR API
        fetch(
            "https://api.apilayer.com/image_to_text/upload",
            requestOptions
        )
            .then((response) => response.json())
            .then((result) => {

                // Set the extracted text in state
                setExtractedText(result["all_text"]);
            })
            .catch((error) => console.log("error", error));
    };

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.heading}>
                Welcome to GeeksforGeeks
            </Text>
            <Text style={styles.heading2}>
                Image to Text App
            </Text>
            <Button
                title="Pick an image from gallery"
                onPress={pickImageGallery}
            />
            <Button
                title="Pick an image from camera"
                onPress={pickImageCamera}
            />
            {image && (
                <Image
                    source={{ uri: image }}
                    style={{
                        width: 400,
                        height: 300,
                        objectFit: "contain",
                    }}
                />
            )}

            <Text style={styles.text1}>
                Extracted text:
            </Text>
            <Text style={styles.text1}>
                {extractedText}
            </Text>
            <StatusBar style="auto" />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        display: "flex",
        alignContent: "center",
        alignItems: "center",
        justifyContent: "space-evenly",
        backgroundColor: "#fff",
        height: "100%",
    },
    heading: {
        fontSize: 28,
        fontWeight: "bold",
        marginBottom: 10,
        color: "green",
        textAlign: "center",
    },
    heading2: {
        fontSize: 22,
        fontWeight: "bold",
        marginBottom: 10,
        color: "black",
        textAlign: "center",
    },
    text1: {
        fontSize: 16,
        marginBottom: 10,
        color: "black",
        fontWeight: "bold",
    },
});

Step 4: Run the application

npx expo start

Step optional: To run on Web, you need to install the following packages

npx expo install react-dom react-native-web @expo/webpack-config

Step 5: To run on web, press w on Terminal will application is running. For Android/IOS, install the Expo app and scan the QR code or enter the link of Metro in the Terminal.

Output: