microsoft / react-native-macos

A framework for building native macOS apps with React.
https://microsoft.github.io/react-native-windows/
MIT License
3.49k stars 135 forks source link

PanResponder crashing + not working after translate View #2214

Open DanielSRS opened 1 day ago

DanielSRS commented 1 day ago

Environment

react-native -v: 0.75.3
npm ls react-native-macos: react-native-macos@0.75.7
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

Example working on mobile:

https://github.com/user-attachments/assets/21986dd0-a667-4e0e-b32f-0f4ef4a92e6b

Actual Behavior

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

https://github.com/user-attachments/assets/c14a84e2-f1a1-4ba5-87b3-b12a896aa724

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)

Screenshot 2024-10-07 at 02 49 34

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 ```Typescript 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 ( Drag this box! ); }; 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

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

Saadnajmi commented 6 hours ago

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