Camera

A powerful camera component with advanced features like zoom, timer, torch, and video recording.

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraDemo() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Picture Captured', `Saved to: ${uri}`);
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Video Recorded', `Saved to: ${uri}`);
  };

  return (
    <Camera
      onCapture={handleCapture}
      onVideoCapture={handleVideoCapture}
      style={{ height: 400 }}
    />
  );
}

Installation


pnpm dlx bna-ui add camera

Usage

import { Camera } from '@/components/ui/camera';

<Camera
  onCapture={({ uri, type }) => {
    console.log('Captured:', uri, type);
  }}
  onVideoCapture={({ uri, type }) => {
    console.log('Video captured:', uri, type);
  }}
  onClose={() => {
    // Handle camera close
  }}
/>

Examples

Default

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraDemo() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Picture Captured', `Saved to: ${uri}`);
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Video Recorded', `Saved to: ${uri}`);
  };

  return (
    <Camera
      onCapture={handleCapture}
      onVideoCapture={handleVideoCapture}
      style={{ height: 400 }}
    />
  );
}

With Custom Controls

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraCustomControls() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Capture Complete', `${type} saved successfully`);
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Recording Complete', `Video saved successfully`);
  };

  return (
    <Camera
      facing='front'
      enableTorch={false}
      timerOptions={[0, 5, 15]}
      maxVideoDuration={30}
      onCapture={handleCapture}
      onVideoCapture={handleVideoCapture}
      style={{ height: 400, borderRadius: 12 }}
    />
  );
}

Picture Only Mode

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraPictureOnly() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Photo Captured', 'Picture saved to gallery');
  };

  return (
    <Camera
      enableVideo={false}
      onCapture={handleCapture}
      style={{ height: 400 }}
    />
  );
}

Video Recording

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraVideo() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert(
      'Picture Taken',
      `Saved: ${uri.substring(uri.lastIndexOf('/') + 1)}`
    );
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Video Recorded', `Duration: ${uri ? 'Success' : 'Failed'}`);
  };

  return (
    <Camera
      maxVideoDuration={120}
      onCapture={handleCapture}
      onVideoCapture={handleVideoCapture}
      style={{ height: 400 }}
    />
  );
}

Timer Features

import { Camera } from '@/components/ui/camera';
import React from 'react';
import { Alert } from 'react-native';

export function CameraTimer() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Timer Capture', 'Photo captured after countdown!');
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Timer Recording', 'Video started after countdown!');
  };

  return (
    <Camera
      timerOptions={[0, 3, 5, 10, 15]}
      onCapture={handleCapture}
      onVideoCapture={handleVideoCapture}
      style={{ height: 400 }}
    />
  );
}

Zoom Controls

import { Camera } from '@/components/ui/camera';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';
import { Alert } from 'react-native';

export function CameraZoom() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Zoomed Capture', 'Photo taken with current zoom level');
  };

  return (
    <View style={{ gap: 8 }}>
      <Text variant='body' style={{ textAlign: 'center', opacity: 0.7 }}>
        Pinch to zoom • Double tap for quick zoom • Tap zoom button to cycle
        levels
      </Text>
      <Camera onCapture={handleCapture} style={{ height: 400 }} />
    </View>
  );
}

Settings Panel

import { Camera } from '@/components/ui/camera';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';
import { Alert } from 'react-native';

export function CameraSettings() {
  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Settings Demo', 'Captured with current settings applied');
  };

  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
    Alert.alert('Settings Demo', 'Recorded with current settings applied');
  };

  return (
    <View style={{ gap: 8 }}>
      <Text variant='body' style={{ textAlign: 'center', opacity: 0.7 }}>
        Tap the settings icon to access grid, sound, aspect ratio, and timer
        controls
      </Text>
      <Camera
        onCapture={handleCapture}
        onVideoCapture={handleVideoCapture}
        style={{ height: 400 }}
      />
    </View>
  );
}

API Reference

Camera

The main camera component with comprehensive controls and features.

Prop	Type	Default	Description
`style`	`ViewStyle`	-	Additional styles to apply to the camera container.
`facing`	`'front' \| 'back'`	`'back'`	The initial camera facing direction.
`enableTorch`	`boolean`	`true`	Whether to show the torch/flash control.
`showControls`	`boolean`	`true`	Whether to show the camera controls overlay.
`timerOptions`	`number[]`	`[0, 3, 10]`	Available timer options in seconds.
`enableVideo`	`boolean`	`true`	Whether to enable video recording mode.
`maxVideoDuration`	`number`	`60`	Maximum video duration in seconds.
`onClose`	`() => void`	-	Callback when the close button is pressed.
`onCapture`	`({ type, uri, cameraHeight }) => void`	-	Callback when a picture is captured.
`onVideoCapture`	`({ type, uri, cameraHeight }) => void`	-	Callback when a video is captured.

CameraRef

The camera component exposes these methods via ref:

Method	Type	Description
`switchCamera`	`() => void`	Switch between front and back camera.
`toggleTorch`	`() => void`	Toggle the torch/flash on and off.
`takePicture`	`() => Promise<void>`	Programmatically take a picture.
`startRecording`	`() => Promise<void>`	Start video recording.
`stopRecording`	`() => Promise<void>`	Stop video recording.

CaptureSuccess

The callback data structure for successful captures:

Property	Type	Description
`type`	`'picture' \| 'video'`	The type of media captured.
`uri`	`string`	The local URI of the captured media.
`cameraHeight`	`number`	The height of the camera view when captured.

Features

Camera Controls

Capture Button: Large, prominent button for taking pictures or starting/stopping video recording
Mode Toggle: Switch between picture and video modes
Camera Flip: Switch between front and back cameras
Torch/Flash: Toggle flashlight for back camera
Zoom: Pinch-to-zoom gestures and tap-to-zoom controls

Advanced Features

Timer: Set delays of 0, 3, or 10 seconds before capture
Grid Lines: Rule of thirds overlay for better composition
Aspect Ratios: Support for 16:9, 4:3, and 1:1 ratios
Sound Control: Enable/disable camera sounds
Settings Panel: Collapsible panel with advanced options

Gestures

Pinch to Zoom: Smooth zoom in/out with gesture controls
Double Tap: Quick zoom toggle between 1x and 2.5x
Tap Controls: Tap zoom button to cycle through zoom levels

Video Recording

Recording Timer: Shows elapsed recording time
Duration Limit: Configurable maximum recording duration
Visual Feedback: Recording indicator with red dot animation

Permissions

The Camera component requires camera and microphone permissions. The component will:

Check for existing permissions
Show a permission request screen if not granted
Provide a clear call-to-action to grant permissions
Handle permission denial gracefully

Accessibility

The Camera component includes accessibility features:

Screen Reader Support: All controls have appropriate labels
High Contrast: Clear visual distinction between active/inactive states
Touch Targets: All interactive elements meet minimum size requirements
Keyboard Navigation: Focus management for external keyboard users
Reduced Motion: Respects system animation preferences

Performance

Optimized Rendering: Minimal re-renders using React.memo and useCallback
Gesture Handling: Efficient native gesture recognition
Memory Management: Proper cleanup of timers and resources
Battery Optimization: Automatic torch disable when switching cameras

Error Handling

The component handles various error scenarios:

Permission Denied: Shows clear permission request screen
Camera Unavailable: Graceful fallback with error messages
Recording Failures: User-friendly error alerts
Memory Issues: Automatic cleanup and error recovery

Customization

The Camera component can be customized through:

Theme Integration: Uses theme colors and design tokens
Custom Styles: Style prop for container customization
Control Visibility: Toggle individual control elements
Timer Options: Configure available timer durations
Aspect Ratios: Support for multiple aspect ratios

Button Camera Preview