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 = HybridCameraFactory.createMeteringPoint(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 3 MeteringModes will be used. You can adjust this behaviour to - for example - only adjust Exposure ('AE'):

const controller = ...
const meteringPoint = ...
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).

Focus Responsiveness

By default, the Metering Action focuses as quickly as possible ('continuous'). 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 this 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 keeps the given MeteringPoint in focus - even if the scene changes.

For example, when focusing the football field at a football game, the Camera will adjust Focus/Exposure/White-Balance to bring the football field "into focus". Once a person walks through the Camera (to grab a cold beer), the Camera might adjust Focus/Exposure/White-Balance briefly onto the person, which causes the football field to lose focus. In this case, you can lock the Focus/Exposure/White-Balance values at the given MeteringPoint instead by using 'locked':

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

Auto Reset

By default, Focus/Exposure/White-Balance 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 Focus/Exposure/White-Balance back to the center of the Camera, use CameraController.resetFocus(...):

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