react / react/react-native

Swipe / scroll actions on Flatlist gets registered as click event

Offen
#47,151 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: FlatList Issue: Author Provided Repro Needs: Attention Needs: Repro
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

I have a my page like this :

{children}

Sometimes while user scrolls /swipes to. go back. the click event gets triggered( navigating to a screen)

I read few issues , the only solution i got so far is to track the scroll with handlePressIn & handlePressOut , then calculate the pageX,pageY difference do decide whether its a drag or click action.

Adding this affects my scroll performance , (large list of products).

Any solution to this, without compromising the app performance?

Steps to reproduce

n/a

React Native Version

0.75.4

Affected Platforms

Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 15.0.1
  CPU: (8) arm64 Apple M3
  Memory: 107.28 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.2
    path: ~/.nvm/versions/node/v18.20.2/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v18.20.2/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v18.20.2/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false
Stacktrace or Logs
N/A
Reproducer

snack.expo.dev/@srimarajexpo/delicious-violet-ramen

Screenshots and Videos

No response

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Führe den verlinkten Snack-Reproducer auf iOS mit React Native 0.75.4 aus und untersuche die beschriebene Interaktion zwischen FlatList und Pressable. Bestätige, ob ein Wischen eine Navigation auslöst, und reduziere dies auf ein reproduzierbares Framework-Problem mit eindeutigem erwarteten Verhalten; im Bericht ist keine Repository-Datei und kein Test angegeben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
28/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.