Zooming

Zooming allows you to adjust the crop-area of a Camera:

function App() {
  const zoom = useSharedValue(device.minZoom)

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

function App() {
  return (
    <Camera
      {...props}
      enableNativeZoomGesture={true}
    />
  )
}

const device = ...
const controller = ...
await controller.setZoom(device.minZoom)

const device = ...
const zoom = ...
const clampedZoom = Math.min(Math.max(zoom, device.minZoom), device.maxZoom)

Zoom Animations

Zoom animations can be started using CameraController.startZoomAnimation(...):

const controller = ...
const zoom = ...
await controller.startZoomAnimation(zoom, 2)

To cancel a zoom animation, use CameraController.cancelZoomAnimation(...):

const controller = ...
await controller.cancelZoomAnimation()

Virtual Device Zoom switchover

Virtual Camera Devices (see CameraDevice.isVirtualDevice) contain multiple constituent physical devices, and automatically switchover between devices, depending on the zoom ratio.

To find out at which zoom ranges a virtual device may switch over to a different physical device, use CameraDevice.zoomLensSwitchFactors:

const device = ...
const controller = ...
for (const switchOverFactor of device.zoomLensSwitchFactors) {
  await controller.setZoom(switchOverFactor)
}

Default Zoom

To provide a natural user experience, always start at zoom 1. If a virtual Camera contains an 'ultra-wide-angle' Camera (the "0.5x Camera"), the user may zoom out to less than 1 (here 0.5) instead.

• minZoom <= 1 (e.g. 0.5x)
• natural zoom = 1
• maxZoom >= 1 (e.g. 3x)

Getting current zoom values

A CameraController exposes its current zoom value:

const controller = ...
console.log(controller.zoom) // 1
await controller.setZoom(5)
console.log(controller.zoom) // 5

Getting a user-displayable zoom factor

A CameraController also exposes a user-displayable zoom factor via displayableZoomFactor:

const controller = ...
console.log(controller.displayableZoomFactor) // 0.5
await controller.setZoom(2)
console.log(controller.displayableZoomFactor) // 1