reactAR

reactAR is a comprehensive Augmented Reality (AR) library for React Native and Expo projects. It provides tools for AR session management, rendering, sensor integration, and more—enabling you to build immersive AR experiences on both iOS and Android.

Features

• Core AR Session & Rendering

  • Manage AR sessions (initialize, start, pause/resume, stop).
  • Integrate with Expo's Camera module for live video feed.
  • Render AR content using GLView and Three.js (via expo-three).
  • Basic 3D scene graph setup with sample objects.

• Sensors & Tracking

  • Integrate device sensors like Accelerometer, Gyroscope, and DeviceMotion.
  • Environmental detection features such as plane detection and hit testing.
  • Support for anchoring virtual objects to real-world positions.

• Asset Management & Loading

  • Load and cache 3D models, textures, and other assets using Expo's Asset and FileSystem modules.

• User Interaction & UI

  • Gesture handling with GestureHandler for intuitive AR interactions.
  • In-AR UI overlays and controls with React components.

• Media, Audio & Recording

  • Capture screenshots or record AR sessions using Expo's captureRef.
  • Spatial audio integration via expo-av for enhanced immersion.

• Utilities & Cross-Platform Support

  • Performance monitoring and debugging tools.
  • Cross-platform support for ARKit (iOS) and ARCore (Android).

Installation

Install the package via npm or yarn:

npm install reactAR
# or
yarn add reactAR

API Reference

ARSession

The ARSession class manages the AR session lifecycle. • Methods: • initialize(): Promise Requests camera and sensor permissions, then initializes the AR session. • start(): void Starts the AR session, initiating the camera feed and sensor tracking. • pause(): void Pauses the session, suspending camera and sensor updates. • resume(): void Resumes the session from a paused state. • stop(): void Stops the session and cleans up resources. • getState(): ARSessionState Returns the current state of the AR session.

ARRenderer

The ARRenderer React component sets up a 3D scene using Expo’s GLView and Three.js. It handles the rendering loop and displays sample AR content, which you can extend or replace with your custom AR objects.

Project Structure

reactAR/ ├── src/ │ ├── core/ │ │ ├── ARSession.ts // AR session management (no JSX) │ │ └── ARRenderer.tsx // AR rendering component (uses JSX) │ ├── sensors/ │ │ ├── DeviceTracking.ts // Sensor data and device tracking logic │ │ └── EnvironmentalDetection.ts // Environmental detection logic │ ├── assets/ │ │ └── AssetManager.ts // Asset loading and caching utilities │ ├── ui/ │ │ └── GestureHandler.tsx // UI component for gesture handling │ ├── media/ │ │ └── MediaCapture.ts // Media capture utilities │ └── index.ts // Main export entry point ├── package.json ├── README.md ├── tsconfig.json // TypeScript configuration └── tests/ └── (unit and integration tests)