Expo Camera Workflow

Expo Camera Workflow

This skill handles the complete camera integration workflow for Expo React Native apps, including permissions, capture, sticker creation, and file system management.

When to Use This Skill

Use this skill when you need to:

• Implement camera functionality with permission handling
• Capture photos using CameraView
• Implement photo editing or sticker creation logic
• Manage photo storage and file system operations
• Integrate camera features with MST stores

Camera Workflow Steps

1. Permission Management

Always request camera permissions before accessing camera:

import { Camera } from 'expo-camera'

export async function requestCameraPermissions(): Promise<boolean> {
  const { status } = await Camera.requestCameraPermissionsAsync()
  return status === 'granted'
}

2. Camera Setup

Configure CameraView with proper settings:

import { CameraView } from 'expo-camera'

<CameraView
  ref={cameraRef}
  style={styles.camera}
  facing="back"
  flash="off"
/>

3. Photo Capture

Capture photos with takePictureAsync:

const photo = await cameraRef.current?.takePictureAsync({
  quality: 1.0,
})

4. Photo Editing (Sticker Creation)

Create stickers by drawing paths and using captureRef:

import { manipulateAsync, SaveFormat } from 'expo-image-manipulator'
import { captureRef } from 'react-native-view-shot'

// 1. Capture drawing view
const uri = await captureRef(viewRef, { format: 'png', quality: 1 })

// 2. Crop to sticker bounding box
const result = await manipulateAsync(
  uri,
  [{ crop: { originX, originY, width, height } }],
  { format: SaveFormat.PNG }
)

5. File Storage

Store captured images in app's document directory:

import * as FileSystem from 'expo-file-system'

const PHOTOS_DIR = `${FileSystem.documentDirectory}purrsuit/​photos/`
await FileSystem.copyAsync({ from: photoUri, to: `${PHOTOS_DIR}${filename}` })

Best Practices

1. Permissions: Use requestCameraPermissions and handle denied states.
2. Icons: Use lucide-react-native for consistent UI.
3. Storage: Always ensure directories exist before saving.
4. Compression: Use high quality (1.0) for stickers, slightly lower for originals if needed.

References

See CAMERA_PATTERNS.md for actual project implementations.