PanResponder onMoveShouldSetPanResponder delta not reset
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
Delta is not reset between gestures when it returned false
PanResponder.create({
onMoveShouldSetPanResponder(e, gesture) {
const {dx, dy} = gesture
return false
},
})
That seems to be because none of the other callbacks are called and the inner state initial position isn't reset.
I'm currently fixing this with
function PanProvider({children}) {
const capturedPositionRef = useRef(null);
return <View onMoveShouldSetResponderCapture={({nativeEvent:{pageX, pageY}}) => {
// don't do anything, just capture the initial position
capturedPositionRef.current = {pageX, pageY}
return false
}}>
<PanContext.Provider value={capturedPositionRef}>{children}</PanContext.Provider>
</View>
}
export default function usePanResponderLock(direction: 'horizontal' | 'vertical') {
// uses the provider initial position
const captureGestureRef = usePanResponder();
return useRef(
PanResponder.create({
onMoveShouldSetPanResponder({ nativeEvent: { pageX, pageY } }) {
if (captureGestureRef.current) {
const { pageX: startX, pageY: startY } = captureGestureRef.current;
const dx = Math.abs(pageX - startX);
const dy = Math.abs(pageY - startY);
const dragging = dx > 2 || dy > 2;
if (!dragging) return false;
return direction === 'horizontal' ? dx > dy : dy > dx;
}
return false;
},
onPanResponderTerminationRequest() {
return true;
},
}),
).current;
}
This is working well, but the delta should be fixed in RN
Steps to reproduce
Try looking for a horizontal gesture with dx > dy:
- from the top left corner, make a vertical gesture => delta's are correct, view is not a responder.
- make a new horizontal gesture from bottom left corner => delta y is the distance with the previous touch and delta x too =>
dy > dxeven though it's a horizontal gesture
React Native Version
0.73.8
Affected Platforms
Runtime - Android
Output of npx react-native info
System:
OS: macOS 14.5
CPU: (12) arm64 Apple M2 Max
Memory: 277.72 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.9.0
path: ~/.nvm/versions/node/v20.9.0/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 10.1.0
path: ~/.nvm/versions/node/v20.9.0/bin/npm
Watchman:
version: 2024.01.22.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.13.0
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.11
path: /usr/bin/javac
Ruby:
version: 3.3.0
path: /Users/gregoirevda/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
No stacktrace error.
Reproducer
https://snack.expo.dev/@gregoirevda/bad-orange-popsicle
Screenshots and Videos
No response
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem verlinkten Snack-Reproducer und dem Pfad PanResponder.create/onMoveShouldSetPanResponder; verfolge, wie Gesten-Deltas initialisiert und beibehalten werden, wenn der Callback false zurückgibt, mit Fokus auf Android. Als erledigt gilt die Aufgabe, wenn eine neue Geste ihre Deltas ab ihrem eigenen Start meldet, selbst wenn die vorherige Geste nie zum Responder wurde, und das Verhalten des Reproducers korrigiert ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100