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

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

iOS Setup

1. Add the following to your ios/Podfile:

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

2. Run pod install:

cd ios && pod install

Android Setup

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

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

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

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

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

Usage

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:

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

Example

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