OrderVideoRecorder

A cross-platform mobile app (Android + iOS) for recording and managing packaging videos by Order ID.

Tech Stack

• Expo (managed workflow)
• React Native + TypeScript
• expo-camera - Video recording
• expo-file-system - Local file storage
• expo-sqlite - Local metadata database
• expo-av - Video playback
• react-navigation - Navigation (NOT expo-router)

Project Structure

src/
├── screens/          # Screen components
├── components/       # Reusable UI components
├── db/              # SQLite database setup and operations
├── utils/           # Utility functions (permissions, video storage)
└── types/           # TypeScript type definitions

Installation

Required Dependencies

Install all required dependencies with the following command:

npx expo install expo-camera expo-file-system expo-sqlite expo-av @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

Dependency Details

Core Expo Packages:

• expo-camera - Camera access and video recording
• expo-file-system - File system operations for saving videos locally
• expo-sqlite - SQLite database for Order ID → video path mappings
• expo-av - Video playback component

Navigation:

• @react-navigation/native - Core navigation library
• @react-navigation/native-stack - Stack navigator
• react-native-screens - Native screen components (required by react-navigation)
• react-native-safe-area-context - Safe area handling (required by react-navigation)

Configuration

The app is configured with:

• iOS permissions (NSCameraUsageDescription, NSMicrophoneUsageDescription) in app.json
• Android permissions (CAMERA, RECORD_AUDIO, WRITE_EXTERNAL_STORAGE) in app.json
• expo-camera plugin configuration

Development

# Start the development server
npm start

# Run on Android
npm run android

# Run on iOS
npm run ios

MVP Features

• ✅ Enter Order ID manually
• ✅ Record packaging video for an order
• ✅ Save video locally on device
• ✅ Store Order ID → video file path mapping in SQLite
• ✅ Search by Order ID and play saved video
• ✅ One video per order (replace with confirmation)