Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Can't use GestureDetector if one BottomSheetModal on top another #2124

Closed
arjunAbcd opened this issue Jan 22, 2025 · 1 comment
Closed
Labels
bug Something isn't working invalid This doesn't seem right

Comments

@arjunAbcd
Copy link

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I am trying to track user interactions in my React Native app to perform specific operations. To achieve this, I wrapped the content inside a BottomSheetModal with a GestureDetector and invoked a custom hook to handle the logic.
The behavior works correctly when a single BottomSheetModal is active. However, an issue arises when I open a second BottomSheetModal on top of the first one. At that point, the gesture detection and functionality do not work as expected.

Here is the code snippet I used in the BottomSheetModal:

<BottomSheetModal
  name={portalName}
  index={snapIndex}
  stackBehavior="push"
  backdropComponent={...}
  backgroundStyle={Styles.bottomSheetBackground}
  style={Styles.sheet}
  onClose={close}
  ref={ref}
  enableDynamicSizing={...}
  snapPoints={...}
  enablePanDownToClose={...}
  handleComponent={...}
>
  <GestureDetector gesture={gesture}>
    <View style={Styles.flex}>
      <BottomSheetViewNew style={Styles.sheetContentView}>
        {children}
      </BottomSheetViewNew>
    </View>
  </GestureDetector>
</BottomSheetModal>

Custom hook :

export const useInactivityTimeout = (): ManualGesture => {
  const INACTIVITY_THRESHOLD = AppInactiveTime * 60 * 1000;
  const inactivityTimer = useRef<NodeJS.Timeout | null>(null);
  const {isActivityTracked} = useSelector((state: RootState) => state.app);

  ....
  ....

  // Gesture to capture user interactions
  const gesture = Gesture.Manual().onTouchesDown(() => {
    runOnJS(updateLastInteraction)(); // Update interaction on touch
  });

  return gesture;
};

Reproduction steps

  • Open a BottomSheetModal with a GestureDetector wrapping its content.
  • Open another same BottomSheetModal on top of the first one.
  • Observe the behavior of gesture detection and functionality in the second BottomSheetModal.

Reproduction sample

NA

Relevant log output

@arjunAbcd arjunAbcd added the bug Something isn't working label Jan 22, 2025
Copy link

Hello @arjunAbcd 👋, this issue is being automatically closed and locked because it does not follow the issue template.

@github-actions github-actions bot added the invalid This doesn't seem right label Jan 22, 2025
@github-actions github-actions bot locked as spam and limited conversation to collaborators Jan 22, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working invalid This doesn't seem right
Projects
None yet
Development

No branches or pull requests

1 participant