Feature: AR Try-On
Relevant source files
The following files were used as context for generating this wiki page:The AR Try-On feature provides augmented reality garment visualization, primarily targeting mobile devices. It serves as a key function for users to capture images of themselves or select existing photos, which can then be imported into the Design Studio for 2D design work. This feature is presented as a mobile-friendly alternative for users who cannot access the full 3D editing capabilities available on web and desktop platforms.
The core of this feature is the ARViewScreen component, which manages camera access, image capture, gallery browsing, and integration with other parts of the application.
Sources: README.md, TASK_3_SUMMARY.md, AUDIT_FIXES_SUMMARY.md
Component Architecture
The AR feature is encapsulated within the src/features/ar/ directory. The main screen is ARViewScreen.js, which is exported through the feature's index.js file for use in the application's navigation.
Sources: src/features/ar/index.js, src/features/ar/screens/ARViewScreen.js
ARViewScreen.js
This is the primary component for the AR feature. It handles all UI and logic for camera interaction, image capture, and gallery access.
State Management
The component uses React's useState hook to manage its internal state.
| State Variable | Type | Description |
|---|---|---|
hasPermission | Boolean | Tracks if camera permission has been granted. |
hasMediaLibraryPermission | Boolean | Tracks if media library (gallery) permission has been granted. |
cameraRef | Ref | A reference to the Camera component instance. |
capturedImage | String (URI) | Stores the URI of the most recently captured or selected image. |
savedImages | Array | An array of assets representing images saved to the device's gallery. |
isLoading | Boolean | Manages loading states for asynchronous operations like taking a picture. |
Sources: src/features/ar/screens/ARViewScreen.js:27-37, AUDIT_FIXES_SUMMARY.md
Platform-Specific Logic
The expo-camera module is loaded conditionally, only for non-web platforms. This ensures the app doesn't crash on the web where direct camera hardware access is handled differently. A null check is performed before using the Camera component to prevent runtime errors.
// src/features/ar/screens/ARViewScreen.js:40-46
let Camera = null;
if (Platform.OS !== 'web') {
try {
Camera = require('expo-camera').Camera;
} catch (error) {
console.warn('Camera module not available:', error);
}
}
Sources: AUDIT_FIXES_SUMMARY.md
Core Functionality
The feature's workflow revolves around acquiring an image (either via camera or gallery) and making it available to other parts of the app, like the Design Studio.
Permissions Handling
On component mount, ARViewScreen requests permissions for both the camera and the media library. This is a prerequisite for all subsequent operations.
The diagram below illustrates the permission request flow.
Image Capture and Persistence
Users can capture a photo using the device's camera. The captured image is then automatically saved to the device's gallery using expo-media-library.
The sequence diagram below details the capture and save process.
Gallery Integration
The feature allows users to browse their device's gallery and select an existing image using expo-image-picker.
Key aspects of this functionality:
- Permission Request: It first checks for media library permissions.
- Image Picker: Launches the native image library interface.
- Configuration: The picker is configured to allow image editing (
allowsEditing: true) with a specific aspect ratio and quality. - State Update: If an image is selected, its URI is stored in the
capturedImagestate.
Sources: src/features/ar/screens/ARViewScreen.js:125-146, AUDIT_FIXES_SUMMARY.md
Integration with Design Studio
A primary goal of the AR feature is to provide source images for the 2D design canvas. The sendToDesignStudio function handles this integration.
When called, it navigates the user to the Design Studio screen, passing the selected image URI as a navigation parameter.
// AUDIT_FIXES_SUMMARY.md
const sendToDesignStudio = (imageUri) => {
navigation.navigate('Design Studio', {
importedImage: imageUri,
source: 'ar-camera'
});
};
This flow is triggered after a new photo is captured or an existing one is selected from the gallery, typically via a user prompt.
Sources: AUDIT_FIXES_SUMMARY.md
Entry Points and Configuration
The AR feature can be accessed from various parts of the application and can be toggled via configuration.
Navigation
The HomeScreen provides a "Scan" quick action button that navigates directly to the ARView screen. This serves as a primary entry point for the user.
// src/features/home/screens/HomeScreen.js:338-343
{
icon: <Feather name="camera" size={24} color="#fff" />,
label: 'Scan',
color: '#FF6B6B',
action: () => navigation.navigate('ARView'),
},
Sources: src/features/home/screens/HomeScreen.js:338-343
Feature Flag
The entire AR feature can be enabled or disabled globally using a feature flag defined in the application's constants.
// src/config/constants.js:210
export const FEATURES = {
ENABLE_AR: true,
// ... other flags
};
Sources: src/config/constants.js:210-215
Error Handling and Loading States
The ARViewScreen implements robust error handling and provides user feedback during asynchronous operations.
- Loading State: The
isLoadingstate variable is used to show anActivityIndicatorand disable buttons during operations like taking a picture or opening the gallery. - Try-Catch Blocks: All asynchronous operations (permission requests, camera capture, image saving, gallery access) are wrapped in
try-catchblocks. - User Alerts: In case of an error, an
Alertis shown to the user with a descriptive message, such as "Failed to capture photo" or "Failed to open gallery."
Sources: src/features/ar/screens/ARViewScreen.js:100-146, AUDIT_FIXES_SUMMARY.md