Skip to content

Fix gesture detach on component drop #3669

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

Open
wants to merge 2 commits into
base: next
Choose a base branch
from

Conversation

akwasniewski
Copy link
Contributor

@akwasniewski akwasniewski commented Aug 11, 2025

Description

Gestures were not detached properly on Android on component drop.

Test plan

Android component drop

Add a logging message in attach/detach in android/.../react/RNGestureHandlerRegistry.kt

import * as React from 'react';
import { Animated, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const gesture = useGesture('PanGestureHandler', {
    onBegin: (e: any) => {
      console.log('onGestureHandlerEvent', e.nativeEvent.handlerData);
    },
    onUpdate: (e: any) => {
      const { translationX, translationY } = e.nativeEvent.handlerData;
      const distance = Math.sqrt(translationX ** 2 + translationY ** 2);
      if (distance > 100) {
        setVisible(false);
      }
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 100 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={{
              width: 150,
              height: 150,
              backgroundColor: 'blue',
              opacity: 0.5,
              borderWidth: 10,
              borderColor: 'red',
              marginTop: 20,
              marginLeft: 40,
            }}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

@akwasniewski akwasniewski changed the base branch from main to next August 11, 2025 11:14
@akwasniewski akwasniewski reopened this Aug 12, 2025
@akwasniewski akwasniewski marked this pull request as ready for review August 12, 2025 08:57
@akwasniewski akwasniewski force-pushed the @akwasniewski/fix-native-attach-detach branch from 256074d to d0bf8a4 Compare August 12, 2025 09:41
@akwasniewski akwasniewski marked this pull request as draft August 12, 2025 09:45
@akwasniewski akwasniewski changed the title Fix gesture detach in NativeDetector Fix gesture detach in on component drop Aug 12, 2025
@akwasniewski akwasniewski changed the title Fix gesture detach in on component drop Fix gesture detach on component drop Aug 12, 2025
@akwasniewski akwasniewski marked this pull request as ready for review August 13, 2025 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants