react-nativenavigationreact-native-gesture-handler

Gesture handler stuck when navigate React Native


I have a tab gesture with inner buttons. But the thing is if navigate with any gesture (with inner buttons or the first tap gesture) app just doesn't tab any other button again or scroll. I really have no idea what is the problem.

Or there are any other usages for tap gesture with buttons or navigate with the gesture

Here is my code

const singleTap = Gesture.Tap()
        .runOnJS(true)
        .maxDuration(5000)
        .onStart(() => {
          headerOpacity === 1 ? setHeaderOpacity(0) : setHeaderOpacity(1)
        })
  
  const episodeButtonTap = Gesture.Tap()
    .runOnJS(true)
    .onStart(() => {
      navigation.goBack()
    })

  return (
   <GestureHandlerRootView style={styles.container}>
    <GestureDetector gesture={singleTap}>
      <View style={styles.container}>
        <GestureDetector gesture={episodeButtonTap}>
            <View accessible accessibilityRole='button'>
              <Text>Bar</Text>
            </View>
        </GestureDetector>
      </View>
    </GestureDetector>
  </GestureHandlerRootView>

Thank you :) !


Solution

  • I have encountered the same issue when using the new react-native-gesture-handler v2 api. As a workaround you can use the older api using the dedicated components for your gestures. E.g. the <PanGestureHandler/> component.

    Important to note that the v1 api is outdated, and won't receive any updates anymore.

    It is currently still unkown what is causing this issue, but it seems to be related to some version of react-native-reanimated, especially when using layout animations. I was lucky enough to have the issue resolve itself after using these versions for the libraries:

    "react-native-gesture-handler": "~2.8.0"
    "react-native-reanimated": "~2.12.0"
    

    There has been an ongoing discussion in the GitHub repo, but no solution has been found unfortunately. I would recommend playing around with the versions to see if anything makes a difference. If you do, don't forget to clear your bundle cache.

    You can read the discussion here: https://github.com/software-mansion/react-native-reanimated/issues/3388