๐ Touch events blocked by Camera view (buttons require double tap to work)
What's happening?
When placing interactive elements (e.g., buttons) on top of the Camera component, touch events are partially blocked. Buttons often require two taps to trigger onPress, even with:
pointerEvents="box-none"
zIndex adjustments
enableZoomGesture={false}
Reproduceable Code
const device = useCameraDevice('back');
if (!device) return <View />;
return (
<View style={StyleSheet.absoluteFill}>
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
enableZoomGesture={false}
/>
<View style={{ position: 'absolute', top: 100, left: 20 }}>
<Button title="Back" onPress={() => console.log('Pressed!')} />
</View>
</View>
);
Relevant log output
I Camera State: OPEN (has error: false)
I invokeOnStarted()
D All use case: [androidx.camera.core.Preview-676386c2-7de4-45ac-846b-111f77f8d1ab266175590] for camera: 10
D Active and attached use case: [androidx.camera.core.Preview-676386c2-7de4-45ac-846b-111f77f8d1ab266175590] for camera: 10
I Preview orientation changed! PORTRAIT
I invokeOnPreviewOrientationChanged(PORTRAIT)
I Output orientation changed! PORTRAIT
I invokeOnOutputOrientationChanged(PORTRAIT)
I Camera #10 is now unavailable.
W disableBackButtonMenu prop is not available on Android
W largeTitleHideShadow prop is not available on Android
W backTitle prop is not available on Android
I CameraView attached to window!
Camera Device
{
"formats": [],
"sensorOrientation": "landscape-left",
"hardwareLevel": "limited",
"maxZoom": 1,
"minZoom": 1,
"maxExposure": 6,
"supportsLowLightBoost": false,
"neutralZoom": 1,
"physicalDevices": [
"ultra-wide-angle-camera"
],
"supportsFocus": true,
"supportsRawCapture": false,
"isMultiCam": false,
"minFocusDistance": 0,
"minExposure": -6,
"name": "10 (BACK) androidx.camera.camera2",
"hasFlash": false,
"hasTorch": false,
"position": "back",
"id": "10"
}
Device
Android emulator Pixel 9 Android 16.0
VisionCamera Version
4.3.1 and 4.6.4
Can you reproduce this issue in the VisionCamera Example app?
I didn't try (โ ๏ธ your issue might get ignored & closed if you don't try this)
Additional information
- [ ] I am using Expo
- [x] I have enabled Frame Processors (react-native-worklets-core)
- [x] I have read the Troubleshooting Guide
- [x] I agree to follow this project's Code of Conduct
- [x] I searched for similar issues in this repository and found none.
Guten Tag, Hans here! ๐ป
Thanks for your detailed report! It looks like you're running into touch event issues with buttons over your Camera component. However, I noticed you didn't test if this issue occurs in the VisionCamera Example app. This step is important as it helps isolate whether the problem is with the library or your specific implementation.
Please try running your code in the example app and let us know if the issue persists. If you still encounter problems, please include any relevant logs from adb logcat as they are essential to diagnose this further.
Also, if you find this project helpful, consider sponsoring mrousavy here! Your support helps keep the project alive.
Looking forward to hearing back from you!
Note: If you think I made a mistake, please ping
@mrousavyto take a look.
I've tested this behavior in the VisionCamera Example app (v4.6.4) and can confirm the issue persists there as well - buttons still require a double tap.
Same issuse
same issue +1
any temp fix for this @Semiteplov?
same issue
any temp fix for this @Semiteplov?
Unfortunately I havenโt found a workaround on the emulator. However, on a real device the double-tap issue doesnโt reproduce