text: import "expo-dev-client";
  import { StatusBar } from "expo-status-bar";
  import React, { useEffect, useState } from "react";
  import { Asset } from "expo-asset";
  import { Button, Image, StyleSheet, Text, View } from "react-native";
  import ProgressCircle from "react-native-progress/Circle";
  import TesseractOcr, {
    LANG_ENGLISH,
    useEventListener,
  } from "react-native-tesseract-ocr";
  import * as FileSystem from "expo-file-system";
  
  const DEFAULT_HEIGHT = 500;
  const DEFAULT_WIDTH = 600;
  const defaultPickerOptions = {
    cropping: true,
    height: DEFAULT_HEIGHT,
    width: DEFAULT_WIDTH,
  };
  
  export default function App() {
    const [fetchingTrainingData, setFetchingTrainingData] = useState(true);
    const [isLoading, setIsLoading] = useState(false);
    const [progress, setProgress] = useState(0);
    const imgSrc = require("./assets/sample.png");
    const [imgUri, setImgUri] = useState(null);
    const [text, setText] = useState("");
  
    async function getTrainedData() {
      const trainedDataUrl =
        "https://github.com/tesseract-ocr/tessdata/raw/3.04.00/eng.traineddata";
      const trainedDataDir = FileSystem.cacheDirectory + "tessdata/";
      const trainedDataPath = trainedDataDir + "eng.traineddata";
      const pathInfo = await FileSystem.getInfoAsync(trainedDataPath);
      if (pathInfo.exists) {
        setFetchingTrainingData(false);
      } else {
        alert("Training data does not exist. Downloading...");
        await FileSystem.makeDirectoryAsync(trainedDataDir, { intermediates: true });
        FileSystem.downloadAsync(trainedDataUrl, trainedDataPath)
          .then(({ uri }) => {
            alert(`Finished downloading to ${uri}`);
            setFetchingTrainingData(false);
          })
          .catch((error) => {
            alert(error);
          });
      }
    }
  
    Asset.fromModule(require("./assets/sample.png"))
      .downloadAsync()
      .then(({ localUri }) => setImgUri(localUri));
  
    useEventListener("onProgressChange", (p) => {
      setProgress(p.percent / 100);
    });
  
    useEffect(() => {
      getTrainedData();
    }, []);
  
    const recognizeTextFromImage = async (path) => {
      setIsLoading(true);
  
      try {
        const tesseractOptions = {};
        const recognizedText = await TesseractOcr.recognize(
          path,
          LANG_ENGLISH,
          tesseractOptions
        );
        setText(recognizedText);
      } catch (err) {
        console.error(err);
        setText("");
      }
  
      setIsLoading(false);
      setProgress(0);
    };
  
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Expo OCR Example</Text>
        <StatusBar style="auto" />
        <View style={styles.options}>
          <View style={styles.button}>
            <Button
              disabled={fetchingTrainingData || isLoading}
              title="Recognize"
              onPress={() => {
                recognizeTextFromImage(imgUri);
              }}
            />
          </View>
        </View>
        {imgUri && (
          <View style={styles.imageContainer}>
            <Image style={styles.image} source={imgSrc} />
            {isLoading ? (
              <ProgressCircle showsText progress={progress} />
            ) : (
              <Text>{text}</Text>
            )}
          </View>
        )}
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#F5FCFF",
    },
    options: {
      flexDirection: "row",
      justifyContent: "space-between",
      padding: 10,
    },
    button: {
      marginHorizontal: 10,
    },
    imageContainer: {
      justifyContent: "center",
      alignItems: "center",
    },
    image: {
      marginVertical: 15,
      height: DEFAULT_HEIGHT / 2.5,
      width: DEFAULT_WIDTH / 2.5,
    },
    title: {
      fontSize: 20,
      textAlign: "center",
      margin: 10,
    },
    instructions: {
      textAlign: "center",
      color: "#333333",
      marginBottom: 5,
    },
  });
  