Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
import { CameraPreview } from '@/components/ui/camera-preview';
export function CameraPreviewDemo() {
return <CameraPreview />;
}
Installation
pnpm dlx bna-ui add camera-preview
Usage
import { CameraPreview } from '@/components/ui/camera-preview';<CameraPreview />Examples
Default
import { CameraPreview } from '@/components/ui/camera-preview';
export function CameraPreviewDemo() {
return <CameraPreview />;
}
Features
Camera Capabilities
- Photo Capture: High-quality photo capture with multiple resolution options
- Video Recording: Full video recording with audio support
- Flash Control: Built-in torch/flash toggle functionality
- Camera Switching: Front and back camera switching
- Focus Control: Tap-to-focus functionality
Media Management
- Preview Mode: Full-screen preview of captured media
- Save to Gallery: Direct save to device photo library
- Custom Upload: Configurable upload handling
- Media Processing: Ready for custom processing workflows
User Experience
- Responsive Design: Adapts to different screen sizes
- Theme Support: Automatic light/dark theme support
- Permission Handling: Graceful permission request flows
- Error Handling: Comprehensive error handling and user feedback
API Reference
CameraPreview
The main camera preview component that provides a complete camera experience.
| Prop | Type | Default | Description |
|---|---|---|---|
onUpload | (media: MediaDetails) => void | - | Custom upload handler for captured media |
onSave | (media: MediaDetails) => void | - | Custom save handler for captured media |
facing | 'front' | 'back' | 'back' | Default camera facing direction |
enableTorch | boolean | true | Enable flash/torch functionality |
enableVideo | boolean | true | Enable video recording |
showControls | boolean | true | Show camera control buttons |
maxDuration | number | 60 | Maximum video recording duration in seconds |
quality | 'low' | 'medium' | 'high' | 'max' | 'high' | Photo/video quality setting |
style | ViewStyle | - | Additional styles for the container |
cameraStyle | ViewStyle | - | Additional styles for the camera view |
buttonStyle | ViewStyle | - | Additional styles for control buttons |
autoSave | boolean | false | Automatically save to gallery after capture |
showPreview | boolean | true | Show preview screen after capture |
MediaDetails
The media object structure returned by capture events.
interface MediaDetails {
uri: string;
type: 'picture' | 'video';
timestamp: string;
width?: number;
height?: number;
duration?: number;
size?: number;
}Events
| Event | Type | Description |
|---|---|---|
onCapture | (media: MediaDetails) => void | Fired when media is captured |
onError | (error: Error) => void | Fired when an error occurs |
onPermission | (granted: boolean) => void | Fired when permissions are requested |
Permissions
The Camera Preview component requires the following permissions:
iOS
- Camera: Required for photo and video capture
- Microphone: Required for video recording with audio
- Photo Library: Required for saving media to gallery
Android
- CAMERA: Required for photo and video capture
- RECORD_AUDIO: Required for video recording with audio
- WRITE_EXTERNAL_STORAGE: Required for saving media
- READ_EXTERNAL_STORAGE: Required for accessing saved media
Best Practices
Performance
- Use appropriate quality settings for your use case
- Implement proper cleanup when component unmounts
- Handle memory management for large media files
- Use compression for uploaded media when appropriate
User Experience
- Always request permissions gracefully
- Provide clear feedback during capture and processing
- Implement proper loading states
- Handle edge cases like low storage space
Security
- Validate uploaded media on your backend
- Implement proper file type checking
- Consider implementing media scanning for inappropriate content
- Use secure upload endpoints with proper authentication
Accessibility
The Camera Preview component is built with accessibility in mind:
- Screen reader support for all interactive elements
- High contrast mode support
- Voice-over announcements for capture events
- Keyboard navigation support where applicable
- Proper focus management throughout the interface
Troubleshooting
Common Issues
Camera not working on iOS simulator
- The iOS simulator doesn't support camera functionality
- Test on a physical device for full functionality
Permission denied errors
- Ensure permissions are properly configured in app.json
- Check that users have granted necessary permissions
- Implement graceful fallbacks for denied permissions
Media not saving to gallery
- Verify Media Library permissions are granted
- Check available storage space
- Ensure proper error handling is implemented
Video recording issues
- Verify microphone permissions for audio recording
- Check maximum duration settings
- Monitor memory usage during long recordings