Cannot tap-to-focus using react-native-vision-camera and react-native-gesture-handler

Question

I am implementing a camera on my react native app using the React Native Vision Camera library and tap gesture from react native gesture handler but cannot seem to get it work. It sometimes goes blur where i tap and at other times does nothing at all. I am able to log the x and y coordinates but the camera does not focus on the tapped point.Guide to focus

Would appreciate any help with this. Thanks :)

Here is the part of the camera component dealing with the tap to focus functionality.

const handleFocusOnTap = async(tapEvent) => {
        try {
            if (cameraDevice.supportsFocus && cameraRef && tapEvent && tapEvent.x !== undefined && tapEvent.y !== undefined) {
                
                await cameraRef?.current?.focus({
                        x: tapEvent.x,
                        y: tapEvent.y
                });
                console.log(tapEvent.x, tapEvent.y)    
            }
        } catch (e) {
            console.error(e);            
        }
    };

    const tap = Gesture.Tap().onEnd((event, success) => {
        const focusAsync = async() => {
            await handleFocusOnTap(event);
        };
        if (success) {          
            focusAsync();
        } else {
            console.error()
        }
    });

    return (
        <>
            <StatusBar style="light"/>
            <AfterInteractions>
                <View style={cameraScreenStyles.cameraContainer}>
                    <GestureDetector gesture={tap} >
                        <Camera
                            style={cameraScreenStyles.camera}
                            ref={cameraRef}
                            device={cameraDevice}
                            isActive={true}
                            photo={true}
                            enableZoomGesture={true}
                            enableHighQualityPhotos={true}
                            orientation={orientation}
                            focusable={true}
                        />
                    </GestureDetector>
...

Answer 1

React Native Vision Camera has now released an example of focusing using React Native Gesture Handler and it works great! :)

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()
  }, [])

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