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.

await camera.current.focusDepth(0.5)

The value between Android and iOS is reversed:

distance	Android	iOS
macro (close)	10	0
infinite	0.2	1

In practice, you will probably use these values to prevent any issues on Android:

• macro: device.minFocusDistance + 0.1 (0.1 prevents some weird focus changes)
• infinite: Math.min(0.2, device.minFocusDistance) (the lowest value for infinite focus, but setting it too low also produces focus artifacts)

🚀 Next section: Orientation