A comprehensive React Native camera component that provides full-featured camera functionality across iOS, Android, and Web platforms. Expo Camera enables developers to integrate camera preview, photo capture, video recording, and barcode scanning capabilities with a unified, cross-platform API.
expo install expo-cameraimport {
CameraView,
useCameraPermissions,
useMicrophonePermissions,
scanFromURLAsync
} from 'expo-camera';
import type {
CameraType,
FlashMode,
CameraPictureOptions,
CameraCapturedPicture,
BarcodeScanningResult,
BarcodeType,
VideoCodec,
ScanningOptions,
ScanningResult
} from 'expo-camera';For legacy Camera object import:
import { Camera } from 'expo-camera';For selective imports:
import {
CameraView,
scanFromURLAsync,
useCameraPermissions
} from 'expo-camera';This example demonstrates the core camera functionality with photo capture:
import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { CameraView, CameraType, useCameraPermissions } from 'expo-camera';
export default function CameraScreen() {
const [facing, setFacing] = useState<CameraType>('back');
const [permission, requestPermission] = useCameraPermissions();
const cameraRef = useRef<CameraView>(null);
if (!permission) {
// Camera permissions are still loading
return <View />;
}
if (!permission.granted) {
// Camera permissions are not granted yet
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>
We need your permission to show the camera
</Text>
<TouchableOpacity onPress={requestPermission}>
<Text>Grant Permission</Text>
</TouchableOpacity>
</View>
);
}
const toggleCameraFacing = () => {
setFacing(current => (current === 'back' ? 'front' : 'back'));
};
const takePicture = async () => {
if (cameraRef.current) {
try {
const photo = await cameraRef.current.takePicture({
quality: 0.8,
base64: false,
});
console.log('Photo captured:', photo.uri);
} catch (error) {
console.error('Failed to take picture:', error);
}
}
};
return (
<View style={styles.container}>
<CameraView style={styles.camera} facing={facing} ref={cameraRef}>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
<Text style={styles.text}>Flip Camera</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={takePicture}>
<Text style={styles.text}>Take Picture</Text>
</TouchableOpacity>
</View>
</CameraView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
margin: 64,
},
button: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: 'white',
},
});Expo Camera is built on a modular architecture that provides platform-specific implementations while maintaining a unified API:
CameraView Component: The main React component that renders the camera preview and provides methods for capturing media and controlling camera settings.
Permission System: Hook-based permission management for camera and microphone access with automatic status monitoring.
Platform Implementations: Native implementations for iOS and Android with web fallbacks using browser APIs.
Media Capture: Unified photo and video capture with configurable quality, format, and processing options.
Barcode Scanner: Integrated barcode and QR code scanning with support for multiple barcode formats.
The CameraView component provides the core camera functionality with comprehensive configuration options and static methods for device capabilities.
interface CameraViewProps {
facing?: CameraType;
flash?: FlashMode;
zoom?: number;
mode?: CameraMode;
onCameraReady?: () => void;
onBarcodeScanned?: (result: BarcodeScanningResult) => void;
}
// Static methods for device capabilities
static isAvailableAsync(): Promise<boolean>; // Web only
static getAvailableVideoCodecsAsync(): Promise<VideoCodec[]>; // iOS only
static readonly isModernBarcodeScannerAvailable: boolean; // iOS onlyCamera Component Documentation
Comprehensive permission handling for camera and microphone access with React hooks.
const useCameraPermissions: () => [
PermissionResponse | null,
() => Promise<PermissionResponse>,
() => Promise<PermissionResponse>
];
const useMicrophonePermissions: () => [
PermissionResponse | null,
() => Promise<PermissionResponse>,
() => Promise<PermissionResponse>
];Photo and video capture capabilities with extensive configuration options.
interface CameraViewRef {
takePicture(options?: CameraPictureOptions): Promise<CameraCapturedPicture>;
record(options?: CameraRecordingOptions): Promise<{ uri: string }>;
stopRecording(): Promise<void>;
}Real-time barcode and QR code scanning with support for multiple formats and static image scanning.
function scanFromURLAsync(
url: string,
barcodeTypes?: BarcodeType[]
): Promise<BarcodeScanningResult[]>;
interface BarcodeScanningResult {
type: string;
data: string;
bounds: BarcodeBounds;
cornerPoints: BarcodePoint[];
}