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).
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'
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>
)
}