Focusing

To focus the camera to a specific point, simply use the Camera's focus(...) function:

await camera.current.focus({ x: tapEvent.x, y: tapEvent.y })

The focus function expects a Point parameter which represents the location relative to the Camera view where you want to focus the Camera to (in points). If you use react-native-gesture-handler, this will consist of the x and y properties of the tap event payload.

So for example, { x: 0, y: 0 } will focus to the upper left corner, while { x: VIEW_WIDTH, y: VIEW_HEIGHT } will focus to the bottom right corner.

Focussing adjusts auto-focus (AF) and auto-exposure (AE).

warning

focus(...) will fail if the selected Camera device does not support focusing (see CameraDevice.supportsFocus)

Example (Gesture Handler)

This is an Example on how to use react-native-gesture-handler to focus the Camera to a specific point on the screen:

import { Camera, useCameraDevice } from 'react-native-vision-camera'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
import { runOnJS } from 'react-native-reanimated';

export function App() {
  const camera = useRef<Camera>(null)
  const device = useCameraDevice('back')

  const focus = useCallback((point: Point) => {
    const c = camera.current
    if (c == null) return
    c.focus(point)
  }, [])

  const gesture = Gesture.Tap()
    .onEnd(({ x, y }) => {
      runOnJS(focus)({ x, y })
    })

  if (device == null) return <NoCameraDeviceError />
  return (
    <GestureDetector gesture={gesture}>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
      />
    </GestureDetector>
  )
}

Focus depth (focus on a fixed manual distance)

You can programmatically set the distance of the focus, or the depth.
For example, if the user wants to set the closest distance from the camera to the object (macro), you will set device.minFocusDistance + 0.1 on Android or 0.0 on iOS.

await camera.current.focusDepth(0.5)

🚀 Next section: Orientation