PanResponder onMoveShouldSetPanResponder delta not reset
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con il riproduttore Snack collegato e il percorso PanResponder.create/onMoveShouldSetPanResponder; traccia come vengono inizializzati e mantenuti i delta del gesto quando il callback restituisce false, concentrandoti su Android. Il lavoro è completo quando un nuovo gesto riporta i delta a partire dal proprio inizio anche se il gesto precedente non è mai diventato responder, e il comportamento del riproduttore è corretto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100