<Camera />

The <Camera /> is a convenience wrapper around useCamera(...) that adds a PreviewView, wraps methods in a CameraRef, and supports updating zoom and exposure via Reanimated SharedValues.

In most apps, <Camera /> provides enough flexibility for all use-cases. If you need full control over the individual connections and preview outputs (for example to build a multi-camera session), you should use the <NativePreviewView /> directly.

Using the <Camera />

To display a Camera, grab a CameraDevice and render the <Camera /> view:

function App() {
  const device = useCameraDevice('back')

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

The isActive prop

isActive controls the Camera's lifecycle. When it is true, the Camera will start as soon as possible (see CameraSession.start()) and keeps running until it is unmounted.

It is recommended to set isActive to false as soon as your scene/page/screen goes out of focus, which will stop the Camera (see CameraSession.stop()) while keeping it configured and prepared in-memory. For example, in react-navigation you would use useIsFocused():

import { useIsFocused } from '@react-navigation/native'

function App() {
  const device = useCameraDevice('back')
  const isFocused = useIsFocused()

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={isFocused}
    />
  )
}

Native Gesture Controllers

The <Camera /> view has built-in support for various native gestures - such as the ZoomGestureController (which enables pinch to zoom) or the TapToFocusGestureController (which enables tap to focus).

To enable those gestures, simply set enableNativeZoomGesture or enableNativeTapToFocusGesture:

function App() {
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device="back"
      isActive={true}
      enableNativeZoomGesture={true}
      enableNativeTapToFocusGesture={true}
    />
  )
}