PanResponder crashing + not working after translate View

[DanielSRS]

Environment

react-native -v: 0.75.3
npm ls react-native-macos: [email protected]
node -v: v21.7.1
npm -v: 10.5.0
yarn --version: 3.6.4
xcodebuild -version: Xcode 15.4 Build version 15F31d

Steps to reproduce the bug

1. Copy and run the PanResponder example from react native docs
2. Drag the blue square around
3. Release the mouse
4. Try drag the box again

Expected Behavior

• I expected to drag the View around as many times I want and to any position
• Be able to set useNativeDrive to true
• Restart drag from the last position I released it

Example working on mobile:

Screen.Recording.2024-10-07.at.02.12.19.mov

Actual Behavior

• I can drag the view around as long as I do not release the mouse
• If I release the mouse I cannot restart dragging the view again from its last position, but if I try to do it from its initial position it somewhat works
• When setting useNativeDrive to true, the app crashes with an uncaught exception

With useNativeDrive is false, it partially works, but with this dragging issue:

macos_pan_responder.mp4

Error I got after setting useNativeDrive to true:

TypeError: config.onPanResponderMove is not a function. (In 'config.onPanResponderMove(event, gestureState)', 'config.onPanResponderMove' is an instance of AnimatedEvent)

Reproducible Demo

I took the code directly from React Native website here, but since the code is really small, I will just past it here bellow

Example code

import React, {useRef} from 'react';
import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';

const App = () => {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}], { useNativeDriver: true }),
      onPanResponderRelease: () => {
        pan.extractOffset();
      },
    }),
  ).current;

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Drag this box!</Text>
      <Animated.View
        style={{
          transform: [{translateX: pan.x}, {translateY: pan.y}],
        }}
        {...panResponder.panHandlers}>
        <View style={styles.box} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    fontSize: 14,
    lineHeight: 24,
    fontWeight: 'bold',
  },
  box: {
    height: 150,
    width: 150,
    backgroundColor: 'blue',
    borderRadius: 5,
  },
});

export default App;

Additional context

• This happens in react-native-macos 0.73 too, except it doesn't crash when setting useNativeDrive to true;
• I didn't test with 0.74, but I will assume It behaves the same as 0.73 and 0.75
• I tested this with Blank new initialized projects

Initially I thought it was an issue with PanResponder alone, but searching a bit, it may be related with:

• This issue Using translate in style doesn't transform hitbox #2147
• And maybe this one Transforming a view doesn't transform its interaction area #1099 that seems to have been closed by the bot

[Saadnajmi]

Well, this is indeed a bug I have not seen before. Thanks for the report! I'm not sure when we'll look at it, but I wanted you to know I've seen your issue

[DanielSRS]

Yeah, I can see why thats not a priority. Is not difficult work to around it, so it's not a big problem. Thanks for letting me know, I really appreciate it 😁