onHandlerStateChange is not triggered at all🐛

[fudr]

What were you trying to do?

Hi, I download and installed exactly as described, the camera is being opened, right buttons are re-rendering the camera as expected but the capture button is not doing anything at all, the event handler onHandlerStateChange is not being called so I cant get to take pics or record videos. Using Android real device, any help please?

Reproduceable Code

{device ?
                    <CaptureButton
                    style={styles.captureButton}
                    camera={cameraRef}
                    onMediaCaptured={onMediaCaptured}
                    cameraZoom={zoom}
                    minZoom={minZoom}
                    maxZoom={maxZoom}
                    flash={supportsFlash ? flash : 'off'}
                    enabled={isCameraInitialized && isActive}
                    setIsPressingButton={setIsPressingButton}
                    />
                    :<Text>-</Text>}

What happened instead?

Capture button is not doing anything at all

Relevant log output

nothing is logged since the const onHandlerStateChanged = useCallback( 
is not being called at all

Device

Moto G60

VisionCamera Version

2.14.1

Additional information

• [ ] I am using Expo
• [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.

[fudr]

I also tried adding all event handlers and none of them are triggered by touching the circle button

<TapGestureHandler
      enabled={enabled}
      ref={tapHandler}
      onHandlerStateChange={onHandlerStateChanged}
      onBegan={onHandlerGestureChanged} 
      onActivated={onActivatedHandler}
      maxDelayMs={1} 
      numberOfTaps={1}
      shouldCancelWhenOutside={false}
      maxDurationMs={99999999} // <-- this prevents the TapGestureHandler from going to State.FAILED when the user moves his finger outside of the child view (to zoom)
      simultaneousHandlers={panHandler}>
      <Reanimated.View {...props} style={[buttonStyle, style]}>
        <PanGestureHandler
          enabled={enabled}
          ref={panHandler}
          failOffsetX={PAN_GESTURE_HANDLER_FAIL_X}
          activeOffsetY={PAN_GESTURE_HANDLER_ACTIVE_Y}
          onGestureEvent={onPanGestureEvent}
          simultaneousHandlers={tapHandler}>
          <Reanimated.View style={styles.flex}>
            <Reanimated.View style={[styles.shadow, shadowStyle]} />
            <View style={styles.button} />
          </Reanimated.View>
        </PanGestureHandler>
      </Reanimated.View>
    </TapGestureHandler>

[ezorfa]

@fudr @manuelbieh I have the same issue. Did you solve this?

[Fari056]

I have the same issue. is there any solution issue only with ### android working fine in IOS ???

[Fari056]

I have resolved this issue by using gestureHandlerRootHOC as per gesture handler doc. On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC (it's no-op on iOS and web). So wrap your components in GestureHandlerRootHOC like this and then call in return const GestureHandlerRootHOC = gestureHandlerRootHOC(() => (

<View style={{ flex: 1 }}>

  <TapGestureHandler
    enabled={enabled}
    ref={tapHandler}
    onHandlerStateChange={onHandlerStateChanged}
    shouldCancelWhenOutside={false}
    maxDurationMs={99999999}
    simultaneousHandlers={panHandler}
  >
    <Reanimated.View {...props} style={[buttonStyle, style]}>
      <PanGestureHandler
        enabled={enabled}
        ref={panHandler}
        onHandlerStateChange={onHandlerStateChanged}
        failOffsetX={PAN_GESTURE_HANDLER_FAIL_X}
        activeOffsetY={PAN_GESTURE_HANDLER_ACTIVE_Y}
        onGestureEvent={onPanGestureEvent}
        simultaneousHandlers={tapHandler}>
        <Reanimated.View style={styles.flex}>
          <Reanimated.View style={[styles.shadow, shadowStyle]} />
          <View style={styles.button} />
        </Reanimated.View>
      </PanGestureHandler>
    </Reanimated.View>
  </TapGestureHandler>
</View>

) ) return ( //call here <GestureHandlerRootHOC /> ) it works in my case...

[mrousavy]

Hey! I've rewritten the entire Android codebase of VisionCamera from CameraX to Camera2 in the efforts of ✨ VisionCamera V3.

I just now completed the Camera2 rewrite and I believe the core structure is running, but there might be some edge cases to iron out. Can you try and test the PR #1674 for me to see if you can still reproduce this issue here?

Here's an instruction on how you can test that: https://github.com/mrousavy/react-native-vision-camera/pull/1674#issuecomment-1684104217

If the issue cannot be reproduced with that version/PR anymore, then hoorayy, I fixed it! 🎉 Otherwise please let me know and I'll keep this issue open to keep track of it.

Thank you!