### Start Metro Server for Example App

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Navigate to the example directory and run this command to start the Metro bundler for the example application.

```sh
yarn start
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Execute this command from the root directory to build and run the example application on an iOS simulator or device.

```sh
yarn ios
```

--------------------------------

### Install react-native-vision-camera-ocr-plus

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Install peer dependencies first, then the plugin. Ensure the worklets plugin is added to babel.config.js.

```bash
# peer dependencies first
yarn add react-native-vision-camera react-native-worklets-core

# then install the plugin
yarn add react-native-vision-camera-ocr-plus
```

```javascript
// babel.config.js
module.exports = {
  plugins: ['react-native-worklets-core/plugin'],
};

```

--------------------------------

### Run Example App on Android

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Execute this command from the root directory to build and run the example application on an Android device or emulator.

```sh
yarn android
```

--------------------------------

### Install react-native-vision-camera-ocr-plus

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Install the package using npm or yarn. Ensure react-native-vision-camera and react-native-worklets-core are installed as peer dependencies.

```bash
npm install react-native-vision-camera-ocr-plus
# or
yarn add react-native-vision-camera-ocr-plus
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Run this command in the root directory to install all necessary dependencies for the monorepo using Yarn workspaces.

```sh
yarn
```

--------------------------------

### Basic Frame Processor Setup

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Integrate OCR functionality into your camera feed by setting up a frame processor. Ensure you have the necessary imports and initialize the `useTextRecognition` hook with the desired language.

```jsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { Camera, useCameraDevice, useFrameProcessor } from 'react-native-vision-camera';
import { useTextRecognition } from 'react-native-vision-camera-ocr-plus';

export default function App() {
  const device = useCameraDevice('back');
  const { scanText } = useTextRecognition({ language: 'latin' });

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const data = scanText(frame);
    console.log('Detected text:', data);
  }, []);

  return (
    <>
      {!!device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive
          frameProcessor={frameProcessor}
          mode="recognize"
        />
      )}
    </>
  );
}
```

--------------------------------

### Verify Compatibility After Version Switch

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/example/scripts/README.md

Run this command to check for compatibility issues after switching to a new version configuration. This helps ensure your project is stable.

```bash
yarn check-expo
```

--------------------------------

### Add Convenience Script for New Configuration

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/example/scripts/README.md

Create a new script in `package.json` to easily activate your custom version configuration using the `switch-versions.js` script.

```json
{
  "scripts": {
    "use:your-config": "node scripts/switch-versions.js your-new-config"
  }
}
```

--------------------------------

### Show and Switch React Native Versions

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/example/scripts/README.md

Use these commands to view available version configurations and switch to a specific one. The direct command offers an alternative way to switch versions.

```bash
yarn switch-versions
yarn use:rn-0.76      # React Native 0.76 + Expo 52
yarn use:next         # Latest canary versions
yarn use:latest       # Latest stable versions

yarn switch-versions rn-0.76
```

--------------------------------

### Lint Project Files

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Execute this command to lint the project files using ESLint.

```sh
yarn lint
```

--------------------------------

### Clean and Rebuild Native Platforms

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/example/scripts/README.md

After switching versions, clean and rebuild the native iOS and Android platforms to ensure compatibility. This step is crucial for a successful transition.

```bash
# Clean and rebuild native platforms
yarn clean:ios && yarn ios
yarn clean:android && yarn android
```

--------------------------------

### Define New Version Configuration

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/example/scripts/README.md

Add a new version set to `version-configs.json` by specifying dependencies and devDependencies. Ensure the configuration name is unique.

```json
{
  "configurations": {
    "your-new-config": {
      "description": "Description of this configuration",
      "dependencies": {
        "expo": "~50.0.0",
        "react-native": "~0.74.0"
      },
      "devDependencies": {
        "@types/react": "~18.0.0"
      }
    }
  }
}
```

--------------------------------

### Run Unit Tests

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Execute this command to run the unit tests for the project using Jest.

```sh
yarn test
```

--------------------------------

### Type Check Project Files

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Run this command to perform type checking on the project files using TypeScript.

```sh
yarn typecheck
```

--------------------------------

### Configure Text Recognition Performance

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Adjust `frameSkipThreshold` to process fewer frames for higher performance, or `1` for maximum accuracy. `useLightweightMode` can be set to `true` to skip detailed element recognition and improve speed.

```tsx
import { useTextRecognition } from 'react-native-vision-camera-ocr-plus';
import { useFrameProcessor, runAtTargetFps } from 'react-native-vision-camera';

// High performance (recommended for real-time scanning on mid-range Android)
const { scanText: fastScan } = useTextRecognition({
  frameSkipThreshold: 10,     // process 1 in 10 frames
  useLightweightMode: true,   // skip corner points, languages, elements
});

// Balanced
const { scanText: balancedScan } = useTextRecognition({
  frameSkipThreshold: 3,
  useLightweightMode: true,
});

// Maximum accuracy (slower, use for static or low-frequency scenarios)
const { scanText: accurateScan } = useTextRecognition({
  frameSkipThreshold: 1,
  useLightweightMode: false,
});

// Combine with runAtTargetFps for fine-grained FPS control
const frameProcessor = useFrameProcessor((frame) => {
  'worklet';
  runAtTargetFps(2, () => {          // max 2 OCR calls per second
    const data = accurateScan(frame);
    if (data?.resultText) onResult(data);
  });
}, [accurateScan, onResult]);
```

--------------------------------

### Live Text Recognition with Camera

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Use the Camera component in 'recognize' mode to perform live text recognition. Set the 'language' option for optimal results. The 'callback' function receives the recognition results.

```jsx
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';

export default function App() {
  const [data, setData] = useState(null);
  const device = useCameraDevice('back');

  return (
    <>
      {!!device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive
          mode="recognize"
          options={{ language: 'latin' }}
          callback={(result) => setData(result)}
        />
      )}
    </>
  );
}
```

--------------------------------

### useTranslate

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Provides a `translate` worklet function for real-time frame-by-frame translation. ML Kit automatically downloads the required language model on its first use.

```APIDOC
## `useTranslate(options?)` — hook for custom translation frame processors

Returns a `{ translate }` worklet function for real-time frame-by-frame translation. ML Kit downloads the required language model on first use.

### Parameters

- **options** (object) - Required configuration for translation.
  - **from** (string) - The source language code (e.g., 'fr').
  - **to** (string) - The target language code (e.g., 'en').

### Returns

- **translate** (function) - A worklet function that takes a frame and returns the translated text.

### Example Usage

```tsx
import { useTranslate } from 'react-native-vision-camera-ocr-plus';

const { translate } = useTranslate({ from: 'fr', to: 'en' });

// Use translate within a useFrameProcessor
```
```

--------------------------------

### Performance Optimization Options

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Adjust `frameSkipThreshold` and `useLightweightMode` for better performance on Android devices. Higher `frameSkipThreshold` and `useLightweightMode: true` generally lead to faster processing and reduced CPU/memory usage.

```jsx
// Higher performance (recommended for real-time scanning)
const { scanText } = useTextRecognition({
  language: 'latin',
  frameSkipThreshold: 10,      // Process every 10th frame
  useLightweightMode: true    // Skip detailed corner points and element processing
});

// Balanced performance/accuracy
const { scanText } = useTextRecognition({
  language: 'latin',
  frameSkipThreshold: 3,      // Process every 3rd frame
  useLightweightMode: true
});

// Maximum accuracy (slower)
const { scanText } = useTextRecognition({
  language: 'latin',
  frameSkipThreshold: 1,      // Process every frame
  useLightweightMode: false   // Full detailed data
});
```

--------------------------------

### Recognize Text in Static Image with PhotoRecognizer

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Use this function to process a photo URI with ML Kit's image labeling pipeline. It automatically handles file:// prefix normalization for Android and iOS. Ensure the native module is properly linked to avoid errors.

```tsx
import { Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { PhotoRecognizer } from 'react-native-vision-camera-ocr-plus';
import type { Text as OCRText } from 'react-native-vision-camera-ocr-plus';

async function recognizeFromGallery(): Promise<void> {
  // 1. Pick an image
  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (!permission.granted) return;

  const picked = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    quality: 1,
  });
  if (picked.canceled) return;

  const { uri } = picked.assets[0];

  // 2. Run OCR
  try {
    const result: OCRText = await PhotoRecognizer({
      uri,
      // orientation is iOS-only; defaults to 'portrait'
      // values: 'portrait' | 'portraitUpsideDown' | 'landscapeLeft' | 'landscapeRight'
      orientation: 'portrait',
    });

    console.log('Full text:', result.resultText);

    result.blocks.forEach((block, i) => {
      console.log(`Block ${i}: "${block.blockText}"`);
      console.log('  Frame:', block.blockFrame);
      block.lines.forEach((line) => {
        console.log('  Line:', line.lineText, '| langs:', line.lineLanguages);
      });
    });
  } catch (err) {
    // Possible errors:
    // - "Can't resolve img uri" — uri is empty
    // - "PhotoRecognizerModule is not properly linked." — native module missing
    Alert.alert('OCR Error', (err as Error).message);
  }
}

/* Expected output (console):
Full text: Hello World
Block 0: "Hello World"
  Frame: { x: 10, y: 20, width: 200, height: 40, boundingCenterX: 110, boundingCenterY: 40 }
  Line: Hello World | langs: ["en"]
*/
```

--------------------------------

### Fix Formatting Errors

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/CONTRIBUTING.md

Run this command to automatically fix code formatting issues detected by ESLint.

```sh
yarn lint --fix
```

--------------------------------

### Real-time Text Translation with Camera

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Utilize the Camera component in 'translate' mode for real-time text translation. Specify 'from' and 'to' languages in the options. The 'callback' function processes the translation results.

```jsx
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';

export default function App() {
  const [data, setData] = useState(null);
  const device = useCameraDevice('back');

  return (
    <>
      {!!device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive
          mode="translate"
          options={{ from: 'en', to: 'de' }}
          callback={(result) => setData(result)}
        />
      )}
    </>
  );
}
```

--------------------------------

### Use Translate Hook for Real-time Translation

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

The `useTranslate` hook provides a worklet function for real-time, frame-by-frame translation. ML Kit automatically downloads the necessary language models on their first use. Configure the source and target languages.

```tsx
import React, { useCallback, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  Camera,
  useCameraDevice,
  useFrameProcessor,
} from 'react-native-vision-camera';
import { useRunOnJS } from 'react-native-worklets-core';
import { useTranslate } from 'react-native-vision-camera-ocr-plus';

export function TranslateHookScreen() {
  const device = useCameraDevice('back');
  const [output, setOutput] = useState('');

  const { translate } = useTranslate({ from: 'fr', to: 'en' });

  const onTranslated = useRunOnJS(
    (text: string) => setOutput(text),
    [setOutput]
  );

  const frameProcessor = useFrameProcessor(
    (frame) => {
      'worklet';
      const result = translate(frame);
      if (result) onTranslated(result);
    },
    [translate, onTranslated]
  );

  if (!device) return null;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        frameProcessor={frameProcessor}
      />
      <Text style={{ position: 'absolute', bottom: 40, left: 16, color: 'white', fontSize: 18 }}>
        {output}
      </Text>
    </View>
  );
}
```

--------------------------------

### Use Text Recognition with Custom Frame Processor

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Use the `useTextRecognition` hook for custom frame processors when you need full control over the pipeline. Configure options like language, frame skipping, and scan region. The hook returns a `scanText` worklet function.

```tsx
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import {
  Camera,
  useCameraDevice,
  useFrameProcessor,
  runAtTargetFps,
} from 'react-native-vision-camera';
import { Worklets } from 'react-native-worklets-core';
import { useTextRecognition } from 'react-native-vision-camera-ocr-plus';
import type { Text as OCRText } from 'react-native-vision-camera-ocr-plus';

export function CustomProcessorScreen() {
  const device = useCameraDevice('back');
  const [lines, setLines] = useState<string[]>([]);

  // Plugin is memoized; recreated only when options change
  const { scanText } = useTextRecognition({
    language: 'latin',
    frameSkipThreshold: 5,
    useLightweightMode: false,  // full data including corner points
    scanRegion: { left: '5%', top: '25%', width: '90%', height: '50%' },
  });

  // Bridge worklet → JS thread
  const onResult = Worklets.createRunOnJS((result: OCRText) => {
    const extracted = result.blocks.map((b) => b.blockText);
    setLines(extracted);
  });

  const frameProcessor = useFrameProcessor(
    (frame) => {
      'worklet';
      runAtTargetFps(4, () => {
        const data = scanText(frame);
        if (data?.resultText) onResult(data);
      });
    },
    [scanText, onResult]
  );

  if (!device) return null;

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive
      pixelFormat="yuv"
      frameProcessor={frameProcessor}
    />
  );
}

/* Expected OCRText shape:
{
  resultText: "Hello World",
  blocks: [
    {
      blockText: "Hello World",
      blockFrame: { x: 10, y: 20, width: 200, height: 40, boundingCenterX: 110, boundingCenterY: 40 },
      blockCornerPoints: [{ x: 10, y: 20 }, { x: 210, y: 20 }, { x: 210, y: 60 }, { x: 10, y: 60 }],
      lines: [
        {
          lineText: "Hello World",
          lineFrame: { x: 10, y: 20, width: 200, height: 40, boundingCenterX: 110, boundingCenterY: 40 },
          lineLanguages: ["en"],         // iOS always; Android only when useLightweightMode: false
          elements: [
            { elementText: "Hello", elementFrame: { ... } },
            { elementText: "World", elementFrame: { ... } },
          ]
        }
      ]
    }
  ]
}
*/
```

--------------------------------

### Using runAtTargetFps for Performance

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Improve frame processor performance by using `runAtTargetFps` to limit the execution frequency of the OCR scan. This is particularly useful for real-time applications.

```jsx
const frameProcessor = useFrameProcessor(
    (frame) => {
        'worklet';
        runAtTargetFps(2, () => {
            const data = scanText(frame);
        });
    },
    [scanText],
);

```

--------------------------------

### PhotoRecognizer

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Recognizes text in a static image using ML Kit's image labeling pipeline. Handles file:// prefix normalization automatically for both Android and iOS.

```APIDOC
## `PhotoRecognizer(options)` — recognize text in a static image

Async function that processes a photo URI using ML Kit's image labeling pipeline. Handles `file://` prefix normalization automatically for both Android and iOS.

### Parameters
#### Request Body
- **uri** (string) - Required - The URI of the image to process.
- **orientation** (string) - Optional - iOS-only. Specifies the orientation of the image. Values: 'portrait' | 'portraitUpsideDown' | 'landscapeLeft' | 'landscapeRight'. Defaults to 'portrait'.

### Response
#### Success Response
- **resultText** (string) - The entire detected text joined together.
- **blocks** (array) - An array of detected text blocks.
  - **blockText** (string) - The text content of the block.
  - **blockFrame** (object) - The bounding box of the block.
    - **x** (number)
    - **y** (number)
    - **width** (number)
    - **height** (number)
    - **boundingCenterX** (number)
    - **boundingCenterY** (number)
  - **lines** (array) - An array of lines within the block.
    - **lineText** (string) - The text content of the line.
    - **lineFrame** (object) - The bounding box of the line.
      - **x** (number)
      - **y** (number)
      - **width** (number)
      - **height** (number)
      - **boundingCenterX** (number)
      - **boundingCenterY** (number)
    - **lineLanguages** (array) - An array of languages detected in the line (omitted on Android in lightweight mode).
    - **elements** (array) - An array of text elements within the line (empty array on Android in lightweight mode).

### Request Example
```tsx
const result = await PhotoRecognizer({
  uri: 'file:///path/to/your/image.jpg',
  orientation: 'portrait',
});
```

### Response Example
```json
{
  "resultText": "Hello World",
  "blocks": [
    {
      "blockText": "Hello World",
      "blockFrame": {
        "x": 10,
        "y": 20,
        "width": 200,
        "height": 40,
        "boundingCenterX": 110,
        "boundingCenterY": 40
      },
      "lines": [
        {
          "lineText": "Hello World",
          "lineFrame": {
            "x": 10,
            "y": 20,
            "width": 200,
            "height": 40,
            "boundingCenterX": 110,
            "boundingCenterY": 40
          },
          "lineLanguages": ["en"],
          "elements": []
        }
      ]
    }
  ]
}
```
```

--------------------------------

### useTextRecognition

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Provides a `scanText` worklet function for custom frame processors, enabling full control over the frame processing pipeline. It can be combined with other plugins or features like `runAtTargetFps`.

```APIDOC
## `useTextRecognition(options?)` — hook for custom frame processors

Returns a `{ scanText }` worklet function to use inside a manually-crafted `useFrameProcessor`. Use this when you need full control over the frame processor pipeline (e.g., combining with `runAtTargetFps` or other plugins).

### Parameters

- **options** (object) - Optional configuration for text recognition.
  - **language** (string) - The language to use for text recognition (e.g., 'latin').
  - **frameSkipThreshold** (number) - The number of frames to skip between recognition attempts.
  - **useLightweightMode** (boolean) - If true, uses a lightweight mode for faster processing; if false, provides full data including corner points.
  - **scanRegion** (object) - Defines the region of the frame to scan for text.
    - **left** (string) - The left boundary of the scan region (e.g., '5%').
    - **top** (string) - The top boundary of the scan region (e.g., '25%').
    - **width** (string) - The width of the scan region (e.g., '90%').
    - **height** (string) - The height of the scan region (e.g., '50%').

### Returns

- **scanText** (function) - A worklet function that takes a frame and returns recognition data.

### Example Usage

```tsx
import { useTextRecognition } from 'react-native-vision-camera-ocr-plus';

const { scanText } = useTextRecognition({
  language: 'latin',
  frameSkipThreshold: 5,
  useLightweightMode: false,
  scanRegion: { left: '5%', top: '25%', width: '90%', height: '50%' },
});

// Use scanText within a useFrameProcessor
```

### Expected OCRText Shape

```json
{
  "resultText": "string",
  "blocks": [
    {
      "blockText": "string",
      "blockFrame": { "x": number, "y": number, "width": number, "height": number, "boundingCenterX": number, "boundingCenterY": number },
      "blockCornerPoints": [{ "x": number, "y": number }],
      "lines": [
        {
          "lineText": "string",
          "lineFrame": { "x": number, "y": number, "width": number, "height": number, "boundingCenterX": number, "boundingCenterY": number },
          "lineLanguages": ["string"],
          "elements": [
            { "elementText": "string", "elementFrame": { ... } },
          ]
        }
      ]
    }
  ]
}
```
```

--------------------------------

### <Camera> Component

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

A drop-in camera component that integrates with react-native-vision-camera to provide text recognition (OCR) or real-time translation capabilities. It accepts standard VisionCamera props and specific mode-related options.

```APIDOC
## <Camera> Component

### Description
This component wraps `react-native-vision-camera`'s `<Camera>` and automatically sets up a frame processor for either text recognition or translation. It supports all standard `CameraProps` along with a discriminated union of `mode`, `options`, and `callback`.

### Usage

#### Mode: "recognize"
Used for text recognition.

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';
import type { Text as OCRText } from 'react-native-vision-camera-ocr-plus';

export function OCRScreen() {
  const device = useCameraDevice('back');
  const [result, setResult] = useState<OCRText | null>(null);

  if (!device) return null;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        mode="recognize"
        options={{
          language: 'latin',          // 'latin' | 'chinese' | 'devanagari' | 'japanese' | 'korean'
          frameSkipThreshold: 10,     // process every 10th frame (default: 10)
          useLightweightMode: true,   // Android: skip corner points for speed (default: false)
          scanRegion: {               // focus recognition on a sub-region
            left: '10%',
            top: '20%',
            width: '80%',
            height: '30%',
          },
        }}
        callback={(data) => setResult(data as OCRText)}
      />
      {result && (
        <Text style={{ position: 'absolute', bottom: 40, color: 'white' }}>
          {result.resultText}
        </Text>
      )}
    </View>
  );
}
```

#### Mode: "translate"
Used for real-time translation.

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';

export function TranslateScreen() {
  const device = useCameraDevice('back');
  const [translated, setTranslated] = useState('');

  if (!device) return null;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        mode="translate"
        options={{ from: 'ja', to: 'en' }}   // any Languages code pair
        callback={(data) => setTranslated(data as string)}
      />
      <Text style={{ position: 'absolute', bottom: 40, color: 'white' }}>
        {translated}
      </Text>
    </View>
  );
}
```

### Props

- **`style`** (StyleProp<ViewStyle>) - Standard React Native style props.
- **`device`** (CameraDevice) - The camera device to use, obtained from `useCameraDevice`.
- **`isActive`** (boolean) - Controls whether the camera is active.
- **`mode`** ('recognize' | 'translate') - Discriminates between OCR and translation modes.
- **`options`** (object) - Configuration options specific to the selected mode:
  - For `mode: 'recognize'`:
    - **`language`** ('latin' | 'chinese' | 'devanagari' | 'japanese' | 'korean') - The language model to use for text recognition.
    - **`frameSkipThreshold`** (number) - Processes every Nth frame to optimize performance. Defaults to 10.
    - **`useLightweightMode`** (boolean) - (Android only) Skips corner point detection for faster processing. Defaults to `false`.
    - **`scanRegion`** (object) - Defines a specific region of the camera view for text recognition:
      - **`left`** (string) - The left boundary of the scan region (e.g., '10%').
      - **`top`** (string) - The top boundary of the scan region (e.g., '20%').
      - **`width`** (string) - The width of the scan region (e.g., '80%').
      - **`height`** (string) - The height of the scan region (e.g., '30%').
  - For `mode: 'translate'`:
    - **`from`** (string) - The source language code (e.g., 'ja').
    - **`to`** (string) - The target language code (e.g., 'en').
- **`callback`** (function) - A callback function that receives the processed data:
  - In 'recognize' mode, it receives `OCRText` (which includes `resultText`).
  - In 'translate' mode, it receives the translated string.
```

--------------------------------

### Supported Languages

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Lists the languages supported by the OCR library, along with their codes and flags.

```APIDOC
## Supported Languages

### Description
Provides a list of languages supported by the OCR functionality, including their corresponding codes.

### Languages
| Language | Code |
|:----------|:------|
| Afrikaans | `af` |
| Arabic | `ar` |
| Bengali | `bn` |
| Chinese | `zh` |
| English | `en` |
| French | `fr` |
| German | `de` |
| Hindi | `hi` |
| Japanese | `ja` |
| Korean | `ko` |
| Portuguese | `pt` |
| Russian | `ru` |
| Spanish | `es` |
| ...and [many more](https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/src/types.ts). |

### Usage
This information is for reference to know which language codes can be used with the library's features.
```

--------------------------------

### Recognize Text from a Photo

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Recognizes text from a given image URI. The orientation parameter is specific to iOS and recommended for photos taken with the camera.

```APIDOC
## PhotoRecognizer

### Description
Recognizes text from a photo using its URI. Supports an optional orientation parameter for iOS.

### Method Signature
`PhotoRecognizer(options: { uri: string, orientation?: 'portrait' | 'portraitUpsideDown' | 'landscapeLeft' | 'landscapeRight' }): Promise<string[]> `

### Parameters
#### Options
- **uri** (string) - Required - The URI of the image to process.
- **orientation** (string) - Optional - The orientation of the photo, applicable only on iOS. Possible values: `portrait`, `portraitUpsideDown`, `landscapeLeft`, `landscapeRight`. Defaults to `portrait`.

### Request Example
```js
import { PhotoRecognizer } from 'react-native-vision-camera-ocr-plus';

const result = await PhotoRecognizer({
  uri: asset.uri,
  orientation: 'portrait',
});

console.log(result);
```

### Response
#### Success Response
- Returns a Promise that resolves to an array of strings, where each string is a recognized text block.
```

--------------------------------

### Translation Camera Component

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Use the Camera component in 'translate' mode for real-time translation. Specify source and target language codes. The callback receives the translated string.

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';

// --- Mode: "translate" ---
export function TranslateScreen() {
  const device = useCameraDevice('back');
  const [translated, setTranslated] = useState('');

  if (!device) return null;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        mode="translate"
        options={{ from: 'ja', to: 'en' }}   // any Languages code pair
        callback={(data) => setTranslated(data as string)}
      />
      <Text style={{ position: 'absolute', bottom: 40, color: 'white' }}>
        {translated}
      </Text>
    </View>
  );
}

```

--------------------------------

### OCR Camera Component

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Use the Camera component in 'recognize' mode for on-device text recognition. Configure language, frame skipping, lightweight mode, and scan region. The callback receives OCR text data.

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useCameraDevice } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera-ocr-plus';
import type { Text as OCRText } from 'react-native-vision-camera-ocr-plus';

// --- Mode: "recognize" ---
export function OCRScreen() {
  const device = useCameraDevice('back');
  const [result, setResult] = useState<OCRText | null>(null);

  if (!device) return null;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        mode="recognize"
        options={{
          language: 'latin',          // 'latin' | 'chinese' | 'devanagari' | 'japanese' | 'korean'
          frameSkipThreshold: 10,     // process every 10th frame (default: 10)
          useLightweightMode: true,   // Android: skip corner points for speed (default: false)
          scanRegion: {               // focus recognition on a sub-region
            left: '10%',
            top: '20%',
            width: '80%',
            height: '30%',
          },
        }}
        callback={(data) => setResult(data as OCRText)}
      />
      {result && (
        <Text style={{ position: 'absolute', bottom: 40, color: 'white' }}>
          {result.resultText}
        </Text>
      )}
    </View>
  );
}

```

--------------------------------

### Recognize Text from Photo

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Use PhotoRecognizer to extract text from a given image URI. The orientation option is available only on iOS and is recommended for photos captured via the camera.

```javascript
import { PhotoRecognizer } from 'react-native-vision-camera-ocr-plus';

const result = await PhotoRecognizer({
  uri: asset.uri,
  orientation: 'portrait',
});

console.log(result);
```

--------------------------------

### Remove Downloaded Translation Language Model

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Use this async function to remove a previously downloaded ML Kit translation language model from the device, freeing up storage. It returns `true` on successful removal. Ensure the language code is valid.

```tsx
import { Alert } from 'react-native';
import { RemoveLanguageModel } from 'react-native-vision-camera-ocr-plus';
import type { Languages } from 'react-native-vision-camera-ocr-plus';

async function cleanupModels(): Promise<void> {
  const modelsToRemove: Languages[] = ['fr', 'de', 'ja'];

  for (const code of modelsToRemove) {
    try {
      const success = await RemoveLanguageModel(code);
      console.log(`Removed model "${code}":`, success); // true
    } catch (err) {
      Alert.alert(`Failed to remove model "${code}"`, (err as Error).message);
    }
  }
}

// Single removal
async function removeFrenchModel(): Promise<void> {
  const removed = await RemoveLanguageModel('fr');
  console.log('French model removed:', removed); // true
}
```

--------------------------------

### Configuring Scan Region

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Define a specific area within the camera frame for text scanning to improve performance and focus. All `scanRegion` values are percentage proportions from 0 to 100.

```jsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { Camera, useCameraDevice, useFrameProcessor } from 'react-native-vision-camera';
import { useTextRecognition } from 'react-native-vision-camera-ocr-plus';

export default function App() {
  const device = useCameraDevice('back');
  const { scanText } = useTextRecognition({
    language: 'latin',
    scanRegion: {
      left: '5%',    // Start 5% from the left edge
      top: '25%',     // Start 25% from the top edge
      width: '80%',   // Span 80% of frame width
      height: '40%'   // Span 40% of frame height
    }
  });

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const data = scanText(frame);
    console.log('Detected text in region:', data);
  }, []);

  return (
    <>
      {!!device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive
          frameProcessor={frameProcessor}
        />
      )}
    </>
  );
}
```

--------------------------------

### Remove Unused Translation Models

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Removes a specified language model from the device.

```APIDOC
## RemoveLanguageModel

### Description
Removes an unused language model for a given language code.

### Method Signature
`RemoveLanguageModel(languageCode: string): Promise<void>`

### Parameters
#### languageCode
- **languageCode** (string) - Required - The code of the language model to remove (e.g., 'en' for English).

### Request Example
```js
import { RemoveLanguageModel } from 'react-native-vision-camera-ocr-plus';

await RemoveLanguageModel('en');
```

### Response
#### Success Response
- Returns a Promise that resolves when the language model has been removed.
```

--------------------------------

### RemoveLanguageModel

Source: https://context7.com/jamenamcinteer/react-native-vision-camera-ocr-plus/llms.txt

Deletes a downloaded translation language model from the device to free up storage. Returns true on success.

```APIDOC
## `RemoveLanguageModel(languageCode)` — delete a downloaded translation model

Async function that removes a previously downloaded ML Kit translation language model from the device to free storage. Returns `true` on success.

### Parameters
#### Path Parameters
- **languageCode** (string) - Required - The ISO 639-1 code of the language model to remove (e.g., 'fr', 'de', 'ja').

### Response
#### Success Response
- **success** (boolean) - `true` if the model was successfully removed, `false` otherwise.

### Request Example
```tsx
const success = await RemoveLanguageModel('fr');
console.log('French model removed:', success);
```
```

--------------------------------

### Remove Unused Translation Model

Source: https://github.com/jamenamcinteer/react-native-vision-camera-ocr-plus/blob/next-release/README.md

Call RemoveLanguageModel with a language code to remove its associated translation model from the device. This helps in managing storage space.

```javascript
import { RemoveLanguageModel } from 'react-native-vision-camera-ocr-plus';

await RemoveLanguageModel('en');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.