question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

On iOS, Nested ScrollView is locking FlatList gestures after zoom out action released

See original GitHub issue

Hello guys,

I’m trying to build a simple carousel gallery with (images or <View />) zoomable.

I have exactly, the same problem as https://github.com/facebook/react-native/issues/15216 but this one has been closed and locked without any help/answer.

Description

Gestures of parent container (which is FlatList or VirtualizedList) works as long as we don’t zoom in/out his children (which is a ScrollView).

Once we zoom in/out Scrollview, gestures of the parent container is immediately locked.

We have to wait (not touch screen until) 2 secondes before gestures is enabled again.

After that period, gestures of the parent container re-enabled again then swipe left/right works great.

React Native version

react-native info

info Fetching system and libraries information...
System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 44.50 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.18.1 - /usr/local/opt/node@10/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/opt/node@10/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Steps To Reproduce

1 - Swipe left and right, zoom in/out to feel how the swiper and zoom works.

2 - Zoom out to get an scale < 1 ( Like this http://d.pr/i/2Mr2W ) Once you stop zooming, you’ll see that the image get’s back to original size (scale=1)

3 - Immediately after release zooming action, try to swipe left/right If the bug occurs, you should not be able to swipe right/left

It looks like ScrollView as children block gestures parents until I don’t know…

4 - If you stop swiping and wait a few seconds (1 or 2 seconds) and you try, again you’ll be able to swipe right/left

Expected Results

The user should be able to swipe left/right immediately after zoom out action, even if the zoom animation is not finished.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
react-native-botcommented, Mar 12, 2020

Thanks for submitting your issue. Please run react-native info in your terminal and copy the results into your issue description after “React Native version:”. If you have already done this, please disregard this message.

👉 Click here if you want to take another look at the Bug Report issue template.

0reactions
stale[bot]commented, Oct 4, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native nested ScrollView locking up - Stack Overflow
The outer scroller works flawlessly, but the inner one sticks when you touch it while it's moving. What I mean is: if you...
Read more >
ScrollView - React Native
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
Read more >
How to make this ? should I use nested scroll view/flat list
OP wants their horizontal scroll to be totally smooth based on the users gestures (they also want the top portion to respond to...
Read more >
Common bugs in React Native ScrollView and how to fix them
React Native's ScrollView component is ubiquitous, but its implementation can sometimes lead to mistakes. Learn what to look out for here.
Read more >
ScrollView · React Native - API Manual
In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found