🐛 Camera component intercepts first touch on a trigger button, requiring second tap to take a photo

[nahooni0511]

What's happening?

I'm experiencing an issue where the first attempt to press my camera shutter button (to take a photo) is consistently ignored when using react-native-vision-camera. The button appears on the screen, but the very first tap does not trigger the onPress event. Instead, the second tap and all subsequent taps work as expected.

Key Points:

First tap ignored: The initial press on the capture button has no effect, as if the touch event is intercepted.

Subsequent taps recognized: After the first "ignored" tap, every following tap works fine, triggering the capture as intended.

No overlapping UI: I've tried ensuring the camera preview and the capture button do not overlap. For example, the camera component is placed above, and the button is placed in a separate view below. The issue persists even with non-overlapping layouts.

Removing the Camera fixes it: If I remove the component completely, the first tap on the button is recognized immediately, indicating the camera component might be consuming or blocking the initial touch.

Other attempts:

Used Pressable, TouchableOpacity, and various pointerEvents settings (e.g., pointerEvents="none" on the camera container) with no success.
Disabled tap-to-focus and zoom gestures (enableTapToFocus={false}, enableZoomGesture={false}) on the camera, but the issue remains.
Environment:

React Native: [version]
react-native-vision-camera: [version]
Platform: Android (issue observed here; not thoroughly tested on iOS)
Device/Emulator: [details]
Expected Behavior:
The first tap on the capture button should immediately trigger the onPress event and capture the photo.

Actual Behavior:
The first tap is completely ignored, and the second tap finally triggers the capture.

Request for Help:
I would appreciate any guidance or solutions to prevent the camera component from intercepting the initial touch, allowing the first tap on the capture button to be recognized.

Reproduceable Code

import React, { useRef, useState } from 'react';
import { View, Pressable, Text, Alert, StyleSheet } from 'react-native';
import { Camera, useCameraDevice } from 'react-native-vision-camera';

export default function CameraScreen() {
  const camera = useRef(null);
  const device = useCameraDevice('back');
  const [isInitialized, setIsInitialized] = useState(false);

  const takePicture = async () => {
    if (camera.current) {
      try {
        const photo = await camera.current.takePhoto();
        Alert.alert('Photo taken', photo.path);
      } catch (e) {
        console.warn(e);
      }
    }
  };

  return (
    <View style={styles.container}>
      {device && (
        <Camera
          ref={camera}
          style={styles.camera}
          device={device}
          isActive={true}
          enableTapToFocus={false}
          enableZoomGesture={false}
          onInitialized={() => setIsInitialized(true)}
        />
      )}
      
      {/* Button placed outside camera area */}
      <View style={styles.buttonContainer}>
        <Pressable onPress={takePicture} style={styles.button}>
          <Text style={{color: '#fff'}}>Capture</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  camera: {
    width: '100%',
    height: 400, // Non-overlapping area
  },
  buttonContainer: {
    flex: 1,
    backgroundColor: 'red', // Separate area below camera
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    padding: 20,
    backgroundColor: 'blue'
  }
});

Relevant log output

.

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "limited",
  "maxZoom": 1,
  "minZoom": 1,
  "maxExposure": 6,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "ultra-wide-angle-camera"
  ],
  "supportsFocus": false,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 999.999985098839,
  "minExposure": -6,
  "name": "10 (BACK) androidx.camera.camera2",
  "hasFlash": false,
  "hasTorch": false,
  "position": "back",
  "id": "10"
}

Device

Android emulator

VisionCamera Version

4.6.3

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

• I am using Expo
• I have enabled Frame Processors (react-native-worklets-core)
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[maintenance-hans]

Guten Tag, Hans here! 🍻

I see you are experiencing a valid issue with ze camera component and ze first touch being intercepted. Thank you for providing all ze detailed information and steps to reproduce, it helps a lot!

However, I would need logs from your Android adb logcat to better understand what is going wrong. Please gather ze logs during ze issue occurrence and share them here. This will help mrousavy take a closer look and work on a solution.

Make sure to have the logging during ze tap events to capture any relevant errors. Looking forward to your updates!

Note: If you think I made a mistake, please ping @mrousavy to take a look.