Tap To Focus

Starting a Focus Metering Action (AE/AF/AWB) to a specific point

A "Focus Metering Action" adjusts Auto-Exposure (AE), Auto-Focus (AF) and Auto-White-Balance (AWB) to bring a specific point in the Camera "into focus". This operation is also often called "3A Metering".

Start a Focus Metering Action

To start a Focus Metering Action, call CameraController.focusTo(...):

The <Camera /> view automatically converts View Points to Camera Coordinates and performs a Focus Metering Action via CameraRef.focusTo(...):

function App() {
  const camera = useRef<CameraRef>(null)

  const onTap = async ({ viewX, viewY }) => {
    await camera.current.focusTo({ x: viewX, y: viewY })
  }

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

Alternatively, you can enable the native Tap-To-Focus Gesture by setting enableNativeTapToFocusGesture to true:

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

See TapToFocusGestureController for more information.

If you have a CameraController, you must first create a MeteringPoint.

You can create a MeteringPoint from View Coordinates via a PreviewView (createMeteringPoint(...)):

const preview = ...
const meteringPoint = preview.createMeteringPoint(viewX, viewY)

..or from normalized Camera Coordinates (0.0 to 1.0) via createNormalizedMeteringPoint(...):

const meteringPoint = VisionCamera.createNormalizedMeteringPoint(0.5, 0.5)

Then, start a Focus Metering Action to the specific MeteringPoint via CameraController.focusTo(...)):

const controller = ...
const meteringPoint = ...
await controller.focusTo(meteringPoint)

Focus Metering Options

The Focus Metering Action focuses Exposure ('AE'), Focus ('AF') and White-Balance ('AWB') to a specific point as fast as possible ('snappy'), and then keeps that point continuously focused even if the scene changes ('continuous'). After 5 seconds, focus will be automatically reset to the center again.

To adjust this behaviour, use FocusOptions.

Metering Modes

By default, all MeteringModes that are supported on the current CameraDevice will be used. You can adjust this behaviour to - for example - only adjust Exposure ('AE'):

const controller = ...
const meteringPoint = ...
if (controller.device.supportsExposureMetering) {
  await controller.focusTo(meteringPoint, {
    modes: ['AE']
  })
}

Now, only Exposure will be metered to the given meteringPoint, while Focus and White Balance remain at their current positions (possibly the center of the Camera).

Warning

If you pass a custom MeteringModes array, you must ensure that all given MeteringModes are supported on the current CameraDevice. For 'AE', that's CameraDevice.supportsExposureMetering.

Focus Responsiveness

By default, the Metering Action focuses as quickly as possible ('snappy'). This is suitable for photo capture (see "The Photo Output"), as users want to quickly bring a scene into focus. When recording videos, this may feel disruptive - in that case use 'steady' instead, which might focus slower, but doesn't disrupt a video recording as much:

const controller = ...
const meteringPoint = ...
await controller.focusTo(meteringPoint, {
  responsiveness: 'steady'
})

Scene Adaptiveness

By default, the Metering Action continuously keeps the given MeteringPoint in focus - even as the scene changes ('continuous').

For example, when focusing the football field at a football game, the Camera will adjust AE/AF/AWB to bring the football field "into focus". Once a person walks through the Camera (to grab a nice cold beer), the Camera might adjust AE/AF/AWB briefly onto the person, which causes the football field to lose focus. To prevent this, you can lock the AE/AF/AWB values at the given MeteringPoint instead by using 'locked':

const controller = ...
const meteringPoint = ...
await controller.focusTo(meteringPoint, {
  adaptiveness: 'locked'
})

Auto Reset

By default, AE/AF/AWB will automatically be reset to the center of the Camera after 5 seconds. To change the auto reset duration, pass a custom number:

const controller = ...
const meteringPoint = ...
await controller.focusTo(meteringPoint, {
  autoResetAfter: 10
})

If you want to disable auto reset entirely, pass null:

const controller = ...
const meteringPoint = ...
await controller.focusTo(meteringPoint, {
  autoResetAfter: null
})

Resetting Focus

To reset AE/AF/AWB back to the center of the Camera, use CameraController.resetFocus():

const controller = ...
await controller.resetFocus()

Resetting Focus also resets any locked states and ensures the Camera will continuously update AE/AF/AWB again.