Working with Camera (expo-camera)

1. Requesting Camera Permissions

Permission	Required	Description
camera	`true`	Allows access to the device's camera for capturing photos and videos.
microphone	`false`	Required only if recording audio with video.

Example: Requesting Camera Permission

import { Camera } from 'expo-camera';
import { request, PERMISSIONS } from 'react-native-permissions';

const requestCameraPermission = async () => {
  const permission = await request(PERMISSIONS.ANDROID.CAMERA);
  return permission === 'granted';
};

Note: On iOS, the camera permission is requested automatically when using <Camera /> component, but it's good practice to explicitly request permissions for better control.

2. Creating Camera View

Example: Basic Camera View

import { Camera } from 'expo-camera';
import { StyleSheet, View } from 'react-native';

export default function CameraView() {
  return (
    <View style={styles.container}>
      <Camera style={styles.camera} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
});

Property	Description	Default
cameraId	Unique identifier for the camera	`null`
type	Camera type: `'back'` or `'front'`	`'back'`
flashMode	Flash mode: `'off'`, `'on'`, `'auto'`	`'off'`
ratio	Aspect ratio: `'4:3'`, `'16:9'`	`'4:3'`

3. Taking Photos

Property	Description	Values
cameraRef	Reference to the camera component	`React.RefObject<Camera>`
photoOptions	Configuration options for photo capture	`object`
quality	Compression quality of the photo (0-1)	`number`
skipProcessing	Whether to skip image processing	`boolean`

Example: Capture a Photo

import { Camera } from "expo-camera";

export default function CameraScreen() {
  const cameraRef = useRef(null);

  const takePicture = async () => {
    if (cameraRef.current) {
      const options = { quality: 0.5, skipProcessing: false };
      const data = await cameraRef.current.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <Camera
      ref={cameraRef}
      style={{ flex: 1 }}
      ratio="16:9"
    >
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.captureButton}
          onPress={takePicture}>
          <Text>Take Photo</Text>
        </TouchableOpacity>
      </View>
    </Camera>
  );
}

Note: Ensure camera permissions are granted before capturing photos.

Warning: Large image sizes may cause memory issues on low-end devices.

4. Recording Video

Property	Description	Values
recordOptions	Configuration options for video recording	`{ maxDuration?: number; maxFileSize?: number; quality?: VideoQuality; videoCodec?: VideoCodec; }`
videoCodec	Specifies the video codec to use	`h264`, `hevc`
quality	Video quality preset	`2160p`, `1080p`, `720p`, `480p`

Example: Start Recording Video

import { Camera } from 'expo-camera';

const startRecording = async () => {
  if (cameraRef && cameraRef.current) {
    const options = {
      maxDuration: 30,
      quality: '1080p',
      videoCodec: 'h264'
    };

    const data = await cameraRef.current.recordAsync(options);
    console.log('Recorded video:', data.uri);
  }
};

Example: Stop Recording Video

const stopRecording = () => {
  if (cameraRef && cameraRef.current) {
    cameraRef.current.stopRecording();
  }
};

Note: Video recording is only supported on devices with camera access. On web, it requires the camera permission.

Warning: Recording video may consume significant storage space and battery. Ensure proper handling of recorded files.

5. Switching Camera Type

Property	Values	Description
cameraType	`'back'` \| `'front'`	Specifies which camera to use. Defaults to `'back'`.

Example: Switching Camera Type

import { Camera } from 'expo-camera';

export default function CameraSwitcher() {
  const [cameraType, setCameraType] = useState('back');

  return (
    <Camera
      style={styles.camera}
      type={cameraType}
    />
  );
}

Note: Ensure camera permissions are requested before switching types.

6. Setting Flash Mode

Mode	Description	Usage
off	Flash is disabled	`flashMode: 'off'`
on	Flash is always on	`flashMode: 'on'`
auto	Flash fires only when needed	`flashMode: 'auto'`
torch	Flash stays on continuously	`flashMode: 'torch'`

Example: Setting Flash Mode

import { Camera } from 'expo-camera';

export default function CameraScreen() {
  return (
    <Camera
      flashMode="auto"
      style={{ flex: 1 }}
    />
  );
}

7. Configuring Zoom

Property	Values	Description
zoom	`0.0` to `1.0`	Controls the zoom level of the camera. `0.0` is default, `1.0` is maximum zoom.
maxZoom	`0.0` to `1.0`	Defines the maximum zoom level allowed. Defaults to `1.0`.
minZoom	`0.0` to `1.0`	Defines the minimum zoom level allowed. Defaults to `0.0`.

Example: Setting Zoom Level

import { Camera } from 'expo-camera';

export default function CameraScreen() {
  const [zoom, setZoom] = useState(0.0);

  return (
    <Camera
      style={styles.camera}
      zoom={zoom}
      maxZoom={1.0}
      minZoom={0.0}
    />
  );
}

Note: Zoom levels are relative and may vary depending on the device's camera capabilities.

8. Handling Barcode Scanning

Property	Description	Values
onBarCodeScanned	Callback function when a barcode is scanned	`function`
barCodeTypes	Array of barcode types to scan	`string[]`

Example: Scanning QR Codes

import { Camera } from "expo-camera";

export default function QRScanner() {
  const [scanned, setScanned] = useState(false);

  const handleBarCodeScanned = ({ data }) => {
    setScanned(true);
    alert(`Scanned: ${data}`);
  };

  return (
    <Camera
      onBarCodeScanned={handleBarCodeScanned}
      barCodeTypes={["qr"]}
      style={StyleSheet.absoluteFillObject}
    />
  );
}

Note: The camera must be granted permission to access the device's camera.

Supported Barcode Types

aztec
ean13
ean8
qr
pdf417
upc_e
datamatrix
code128
code39
code93
interleaved2of5
itf14
codabar

9. Using Camera Refs

Example: Accessing Camera Instance

import { Camera } from 'expo-camera';

const CameraComponent = () => {
  const cameraRef = React.useRef(null);

  const takePicture = async () => {
    if (cameraRef.current) {
      const options = { quality: 0.8, base64: true };
      const data = await cameraRef.current.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <Camera
      ref={cameraRef}
      style={{ flex: 1 }}
      type={Camera.Constants.Type.back}
    >
      <TouchableOpacity onPress={takePicture}>
        <Text>Take Picture</Text>
      </TouchableOpacity>
    </Camera>
  );
};

Property	Description	Usage
cameraRef.current	Reference to the camera instance	Access methods like `takePictureAsync`
takePictureAsync(options)	Take a picture with provided options	Returns a Promise with image data
getCameraPermissionsAsync()	Check camera permissions	Useful for permission handling

Note: Ensure camera permissions are requested before using the ref to avoid runtime errors.

10. Accessing Camera Settings

Property	Description	Values	Notes
cameraType	Specifies the camera to use	`'back'`, `'front'`	Default is `'back'`
flashMode	Controls the flash mode	`'off'`, `'on'`, `'auto'`	Default is `'off'`
zoom	Zoom level of the camera (0.0 to 1.0)	`0.0` to `1.0`	Default is `0.0` (no zoom)
focusMode	Focus mode for the camera	`'auto'`, `'locked'`	Default is `'auto'`
exposureMode	Exposure mode for the camera	`'auto'`, `'locked'`	Default is `'auto'`
whiteBalance	White balance setting	`'auto'`, `'daylight'`, `'fluorescent'`, `'incandescent'`	Default is `'auto'`

Example: Setting Camera Type and Flash Mode

import { Camera } from 'expo-camera';

const CameraComponent = () => {
  return (
    <Camera
      cameraType={'front'}
      flashMode={'auto'}
    />
  );
};

11. Configuring Camera Ratio

Property	Values	Description
ratio	`"4:3"`, `"16:9"`, `"1:1"`, `"2.35:1"`	Aspect ratio of the camera preview
ratio	`"fullscreen"`	Full screen aspect ratio (may vary by device)

Example: Setting Camera Aspect Ratio

import { Camera } from 'expo-camera';

<Camera
  style={styles.camera}
  ratio="16:9"
  /* other props */
>
</Camera>

12. Using Picture Quality

Property	Description	Values	Notes
quality	Controls the quality of the captured image	`0` to `1`	Higher values mean better quality but larger file size

Example: Setting Picture Quality

import { Camera } from 'expo-camera';

export default function CameraScreen() {
  const [cameraRef, setCameraRef] = useState(null);

  const takePicture = async () => {
    if (cameraRef) {
      const options = {
        quality: 0.8,
        base64: true,
      };
      const data = await cameraRef.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <Camera
      ref={setCameraRef}
      style={styles.camera}
      pictureQuality={0.8}
    />
  );
}