A React Native application for real-time object detection using YOLO11 models on mobile devices. Built with Expo, React Native, and TensorFlow Lite for efficient edge AI inference.

• Real-time Object Detection: Detect 80 COCO classes using YOLO11 models
• Cross-platform: Works on both Android and iOS
• TensorFlow Lite Integration: Optimized inference using react-native-fast-tflite
• Camera Integration: Real-time detection from device camera using react-native-vision-camera
• Image Processing: Support for image selection, cropping, and manipulation
• New Architecture: Built with React Native's new architecture enabled
• TypeScript: Fully typed for better developer experience

The application can detect 80 object classes from the COCO dataset, including:

• People, animals (person, dog, cat, horse, etc.)
• Vehicles (car, bicycle, motorcycle, bus, train, etc.)
• Furniture (chair, couch, bed, dining table, etc.)
• Electronics (tv, laptop, mouse, keyboard, cell phone, etc.)
• Food items (banana, apple, pizza, donut, cake, etc.)
• And many more...

• Node.js 18+ and npm/yarn
• Expo CLI (npm install -g expo-cli)
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)

1. Clone the repository

   git clone https://github.com/yourusername/react-native-yolo11.git
   cd react-native-yolo11

2. Install dependencies

   npm install

3. Prepare model files

   Place your YOLO11 TensorFlow Lite model files in assets/models/:

   • yolo11n_float16.tflite (recommended for mobile)
   • yolo11n_float32.tflite (alternative)

4. Run the application

   For Android:

   npm run android
   # or
   npx expo run:android

   For iOS:

   npm run ios
   # or
   npx expo run:ios

1. Launch the app on your device or emulator
2. Select an image from your gallery or take a photo
3. The app will process the image and display detected objects with bounding boxes
4. Each detection shows:
   • Bounding box coordinates
   • Object class name
   • Confidence score

You can customize detection parameters in utils/yolo-detector.ts:

const detector = new YOLODetector({
  confThreshold: 0.25,  // Confidence threshold (0-1)
  iouThreshold: 0.45,   // IoU threshold for NMS (0-1)
  inputWidth: 640,      // Model input width
  inputHeight: 640,    // Model input height
});

react-native-yolo11/
├── app/                    # Expo Router app directory
│   ├── (tabs)/            # Tab navigation
│   │   ├── expoview.tsx   # Main detection view
│   │   └── index.tsx      # Home screen
│   └── _layout.tsx        # Root layout
├── assets/
│   ├── images/            # App icons and images
│   └── models/            # YOLO11 TFLite models
├── components/            # Reusable React components
├── utils/
│   └── yolo-detector.ts   # YOLO detection logic
├── hooks/                 # Custom React hooks
└── constants/            # App constants

• YOLODetector (utils/yolo-detector.ts): Core detection class with preprocessing, inference, and postprocessing
• Detection View (app/(tabs)/expoview.tsx): Main UI component for image selection and result visualization
• TensorFlow Lite Integration: Uses react-native-fast-tflite for efficient model inference

• Input: RGB image normalized to [0, 1], resized to 640x640
• Output: Detection tensor with shape [1, 84, 8400] or [84, 8400]
  • 84 = 4 (bbox coordinates) + 80 (class scores)
  • 8400 = number of detection anchors

1. Image Preprocessing: Resize, normalize, and pad image to model input size
2. Model Inference: Run TensorFlow Lite model on preprocessed image
3. Postprocessing: Parse detections, apply confidence thresholding
4. NMS (Non-Maximum Suppression): Remove overlapping detections
5. Coordinate Scaling: Map detections back to original image dimensions
6. Visualization: Draw bounding boxes and labels on image

• react-native-fast-tflite: TensorFlow Lite inference engine
• react-native-vision-camera: Camera access and frame processing
• react-native-image-crop-picker: Image selection and cropping
• expo-gl: WebGL for image processing (optional)
• react-native-reanimated: Smooth animations
• react-native-worklets: Background processing

See package.json for the complete list of dependencies.

# Android
npx expo run:android --variant release

# iOS
npx expo run:ios --configuration Release

See the following documentation files for common issues:

• BUILD_TROUBLESHOOTING.md: Android build issues
• YOLO_SETUP.md: YOLO model setup guide
• ARCHITECTURE_CONFLICT.md: New architecture compatibility

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

• YOLO11 by Ultralytics
• React Native community
• Expo team
• react-native-fast-tflite by Marc Rousavy

For issues and questions, please open an issue on GitHub.

React Native YOLO11 是一个基于 React Native 和 Expo 的移动端实时物体检测应用。使用 TensorFlow Lite 在设备端运行 YOLO11 模型，支持检测 COCO 数据集的 80 种物体类别。

• 实时物体检测: 使用 YOLO11 模型检测 80 种 COCO 类别
• 跨平台支持: 同时支持 Android 和 iOS
• TensorFlow Lite 集成: 使用 react-native-fast-tflite 进行优化的推理
• 相机集成: 使用 react-native-vision-camera 实现实时检测
• 图像处理: 支持图像选择、裁剪和操作
• 新架构: 启用 React Native 新架构
• TypeScript: 完整的类型支持

1. 克隆仓库

   git clone https://github.com/yourusername/react-native-yolo11.git
   cd react-native-yolo11

2. 安装依赖

   npm install

3. 准备模型文件

   将 YOLO11 TensorFlow Lite 模型文件放入 assets/models/ 目录：

   • yolo11n_float16.tflite (推荐用于移动设备)
   • yolo11n_float32.tflite (备选)

4. 运行应用

   Android:

   npm run android

   iOS:

   npm run ios

1. 在设备或模拟器上启动应用
2. 从图库选择图像或拍照
3. 应用将处理图像并显示检测到的物体及其边界框
4. 每个检测结果显示：
   • 边界框坐标
   • 物体类别名称
   • 置信度分数

可以在 utils/yolo-detector.ts 中自定义检测参数：

const detector = new YOLODetector({
  confThreshold: 0.25,  // 置信度阈值 (0-1)
  iouThreshold: 0.45,   // NMS 的 IoU 阈值 (0-1)
  inputWidth: 640,      // 模型输入宽度
  inputHeight: 640,    // 模型输入高度
});

1. 图像预处理: 调整大小、归一化、填充图像到模型输入尺寸
2. 模型推理: 在预处理后的图像上运行 TensorFlow Lite 模型
3. 后处理: 解析检测结果，应用置信度阈值
4. NMS (非极大值抑制): 移除重叠的检测框
5. 坐标缩放: 将检测结果映射回原始图像尺寸
6. 可视化: 在图像上绘制边界框和标签

请参考以下文档文件了解常见问题：

• BUILD_TROUBLESHOOTING.md: Android 构建问题
• YOLO_SETUP.md: YOLO 模型设置指南
• ARCHITECTURE_CONFLICT.md: 新架构兼容性

欢迎贡献！请随时提交 Pull Request。对于重大更改，请先打开 issue 讨论您想要更改的内容。

本项目采用 Apache License 2.0 许可证 - 详情请参阅 LICENSE 文件。

• YOLO11 by Ultralytics
• React Native 社区
• Expo 团队
• react-native-fast-tflite by Marc Rousavy