react-native-object-detection/README.md

A React Native library for object detection using MLKit

# React Native Object Detection

A React Native library for object detection using MLKit Vision. This library allows you to detect objects in images and returns their bounding boxes and labels.

## Features

- Object detection using MLKit Vision
- Support for both iOS and Android
- Returns bounding boxes and labels with confidence scores
- Supports both local and remote images
- TypeScript support

## Installation

```bash
npm install react-native-object-detection
# or
yarn add react-native-object-detection
```

### iOS Setup

1. Add the following to your `ios/Podfile`:

```ruby
pod 'react-native-object-detection', :path => '../node_modules/react-native-object-detection'
```

2. Run pod install:

```bash
cd ios && pod install
```

### Android Setup

1. Add the following to your `android/build.gradle`:

```gradle
buildscript {
    dependencies {
        // ... other dependencies
        classpath 'com.google.gms:google-services:4.3.15'
    }
}
```

2. Add the following to your `android/app/build.gradle`:

```gradle
apply plugin: 'com.google.gms.google-services'

dependencies {
    // ... other dependencies
    implementation 'com.google.mlkit:object-detection:17.0.0'
}
```

## Usage

```typescript
import { startObjectDetection } from "react-native-object-detection";

// Detect objects in an image
try {
  const objects = await startObjectDetection("path/to/image.jpg");
  console.log("Detected objects:", objects);
} catch (error) {
  console.error("Object detection failed:", error);
}
```

### API

#### `startObjectDetection(imagePath: string): Promise<DetectedObject[]>`

Detects objects in the provided image.

**Parameters:**

- `imagePath`: string - Path to the image file (can be local or remote URL)

**Returns:**
A Promise that resolves with an array of detected objects. Each object has the following structure:

```typescript
interface DetectedObject {
  frame: {
    left: number;
    top: number;
    right: number;
    bottom: number;
  };
  trackingID: number | null;
  labels: Array<{
    text: string;
    confidence: number;
  }>;
}
```

## Example

```typescript
import React, { useState } from "react";
import { View, Image, StyleSheet } from "react-native";
import { startObjectDetection } from "react-native-object-detection";

const App = () => {
  const [detectedObjects, setDetectedObjects] = useState([]);

  const detectObjects = async (imagePath) => {
    try {
      const objects = await startObjectDetection(imagePath);
      setDetectedObjects(objects);
    } catch (error) {
      console.error("Detection failed:", error);
    }
  };

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: "path/to/image.jpg" }}
        style={styles.image}
        onLoad={() => detectObjects("path/to/image.jpg")}
      />
      {detectedObjects.map((object, index) => (
        <View
          key={index}
          style={[
            styles.boundingBox,
            {
              left: object.frame.left,
              top: object.frame.top,
              width: object.frame.right - object.frame.left,
              height: object.frame.bottom - object.frame.top,
            },
          ]}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  boundingBox: {
    position: "absolute",
    borderWidth: 2,
    borderColor: "red",
    backgroundColor: "transparent",
  },
});

export default App;
```

## License

ISC