Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Touch events are not happening on FlatList/ScrollView when navigating back to the screen with a scrolling list (IOS) #46276

Open
shubhamguptadream11 opened this issue Aug 30, 2024 · 3 comments
Open

Touch events are not happening on FlatList/ScrollView when navigating back to the screen with a scrolling list (IOS) #46276

shubhamguptadream11 opened this issue Aug 30, 2024 · 3 comments
Labels
Component: FlatList Component: ScrollView Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided.

Comments

@shubhamguptadream11
Copy link
Contributor

Description

If we navigate to a new screen while a list component is currently scrolling and come back to this screen, the touch does not work on the previously scrolling list. Once i manually scroll the list again and scroll ends only after that touch starts to work on the children of the FlatList or ScrollView.

Basically the Scroll Area got freeze out.

This is happening on both Old and New Arch.

Steps to reproduce

  1. Install the repro app attached.
  2. Initiate a flick gesture on the list
  3. While the list is scrolling, quickly switch the tab to DISCOVERSCREEN.
  4. Now navigate back to previous tab i.e. HOMESCREEN.
  5. Try to click on any yellow card in current viewport.
  6. Nothing will happen until you manually scroll down a bit.

Expected: Scroll Items should be clickable and redirect to new screen.

React Native Version

0.75.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 75.70 MB / 32.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.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/shubhamgupta/.rbenv/shims/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: Giraffe 2022.3.1 Patch 4 Giraffe 2022.3.1 Patch 4
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 1.8.0_292
    path: /Users/shubhamgupta/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/shubhamgupta/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.2
    wanted: 0.75.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No stacktrace

Reproducer

https://github.com/dream-sports-labs/reproducer-react-native/tree/feat/repro-scroll-stuck

Screenshots and Videos

Scroll area is not clickable after switching tabs while scrolling:

not_working.MP4

Ideal Behaviour: Items in scroll area must be clickable after tab switch as well.
@react-native-bot react-native-bot added Component: FlatList Component: ScrollView Platform: iOS iOS applications. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Aug 30, 2024
@react-native-bot
Copy link
Collaborator

⚠️ Missing Reproducible Example
ℹ️ We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

@react-native-bot
Copy link
Collaborator

⚠️ Missing Reproducible Example
ℹ️ We could not detect a reproducible example in your issue report. Please provide either:

@shubhamguptadream11 shubhamguptadream11 mentioned this issue Aug 30, 2024
Closed
@shubhamguptadream11
Copy link
Contributor Author

Raised a PR to fix this: #46277

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Aug 30, 2024
@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: PR Submitted A pull request with a fix has been provided. and removed Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Attention Issues where the author has responded to feedback. labels Sep 12, 2024
facebook-github-bot pushed a commit that referenced this issue Sep 13, 2024
@shubhamguptadream11 @facebook-github-bot
fix(iOS): fire onMomentumScrollEnd when UIScrollView is removed from …
b98b9f1 
…window (#46277)

Summary:
Solves this issue: #46276

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[IOS] [ADDED] - fire onMomentumScrollEnd when UIScrollView is removed from window

**Why the issue is happening?**
The `onMomentumScrollEnd` event is typically triggered by the `UIScrollView` delegate methods `scrollViewDidEndDecelerating` and `scrollViewDidEndScrollingAnimation`. However, if the scroll view is removed from the window while navigating away, these delegate methods are not called, resulting in the event not being dispatched.

This behaviour was particularly problematic in scenarios where a scroll view is in motion, and the user navigates away from the screen before the scrolling completes. In such cases, the `onMomentumScrollEnd` event would never fire, which further make scroll area un touchable or un responsive.

**What we changed?**
In the didMoveToWindow method, we added logic to handle the scenario where the UIScrollView is being removed from the window (i.e., when the component is unmounted or the user navigates away). Here’s a breakdown of the changes:

- **Added a Check for Scroll State:** We check if the UIScrollView was decelerating or had stopped tracking (_scrollView.isDecelerating || _scrollView.isTracking == NO).

- **Manually Triggered onMomentumScrollEnd:** If the scroll view was in motion and is being removed from the window, we manually trigger the `onMomentumScrollEnd` event to ensure that the final scroll state is captured.

**_I had fixed this issue on both Old and New arch._**

Pull Request resolved: #46277

Test Plan:
Attaching a video with working solution:

https://github.com/user-attachments/assets/1a1f3765-3f11-46c3-af18-330c88478db8

Reviewed By: andrewdacenko

Differential Revision: D62374798

Pulled By: cipolleschi

fbshipit-source-id: 014be8d313bab0257459dc4e53f5b0386a39d5e0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: FlatList Component: ScrollView Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cortinico @react-native-bot @shubhamguptadream11