Comments (74)
+1, also happening in 0.41
from react-native.
I don't agree with the closing of this ticket. What is product pains? Who is going to look there for this? It seems to me that this issue has gotten a lot more attention recently and having it open is a good way for people to know that it is a known issue. Hopefully the extra attention here will help the right person who can fix it notice the issue. Is there a reason why this can't be fixed?
from react-native.
I agree. I went to product pains and didn't understand what it was (and you have to sign up) It's probably better to just talk about development issues here, we're all on here already.
Nested scroll views are super common, so this issue is so big that I would never consider using react-native for a serious application until it's fixed. I'm considering migrating my current prototype application to native because there doesn't seem to be a good solution to this.
If you return false in scrollResponderIsAnimating, you run into strange issues. You'll be scrolling in a nested scroll view, tap on the screen, and it will go into the item instead of stopping. It fixes the issue where it doesn't accelerate, but then touches go through when they're not suppose to.
What's the deal here, why is this not a higher priority?
from react-native.
@toddw @arianitu - thanks for your passion!
Take a look at the issue count: 815. Everything on here is getting buried quickly. This is issue #41 and it has been open for nearly a year. Clearly something isn't working with the approach of leaving an issue open until someone fixes it. Right now this issue is just one of 815 and more recent issues get more attention because they appear at the top of the issue feed.
What's the deal here, why is this not a higher priority?
This isn't a higher priority for a simple reason: "If everything is a priority, nothing is a priority." What I mean by that is this: many other issues have people like yourselves (nothing against any of you, I totally understand where you're coming from) who believe that their issue should be the number one priority. And core developers on React Native also have their own priorities: product teams within Facebook, and our own companies (for those outside of Facebook). The open source community is one (very important) stakeholder.
So when it comes to open source, we don't have the bandwidth to fix every issue that comes up, so we want to focus on those issues that are impacting the greatest number of users. By using ProductPains we are able to get a better idea of what those issues are -- you can use some heuristics like total number of comments to take a guess at it on Github but we haven't had much luck with that. We tried this before: http://react-native-issues.divshot.io/ (this hasn't been updated for a couple of months because I found it wasn't very helpful -- maybe some people commented to help or other reasons).
@vjeux had the idea to use ProductPains a couple of weeks ago and shared it on Twitter: https://twitter.com/Vjeux/status/660858303468040192 -- we're just trying to find a way to make sense of all of the noise and better deal with the huge number of requests we get from the community. I'm very open to other ideas though, please feel free to suggest alternatives!
from react-native.
@arianitu I still see this issue in latest 0.19, why?
from react-native.
Still seeing the same issue in 0.41!
from react-native.
Cc @jordwalke
from react-native.
Great investigation, @jordanna. The information is very helpful. Scroll views in native know to stop scrolling if something that contains them becomes the responder in JS (like if you were dragging an outer modal view down - that should stop any scroll views from scrolling). My question is, why is the outer scroll view becoming the JS responder? One thing that would cause this is an onScroll occurring on the outer scroll view.
(This is why I just wish all the scroll views were implemented in JS - all these problems go away).
from react-native.
Ok, I finally got around to looking more into this issue (was sidetracked by animation hacks!). During event extraction in the ResponderEventPlugin
, I'm seeing JS responder being transferred from the inner scroller to the outer on a topScroll
event.
function setResponderAndExtractTransfer(
topLevelType,
topLevelTargetID,
nativeEvent) {
// topLevelType === 'topScroll'
// topLevelTargetID === ID of inner scroller
...
// bubbleShouldSetFrom is true here, responderID === topLevelTargetID
// i.e. current JS responder is still inner scroller
var bubbleShouldSetFrom = !responderID ?
topLevelTargetID :
ReactInstanceHandles._getFirstCommonAncestorID(responderID, topLevelTargetID);
...
if (skipOverBubbleShouldSetFrom) {
EventPropagators.accumulateTwoPhaseDispatchesSkipTarget(shouldSetEvent);
// shouldSetEvent._dispatchIDs === outer scroller (skipped over inner scroller?),
// these were possibly from 'touchmove' that occurred immediately before this 'topScroll' event
} else {
EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent);
}
var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent);
// By the time it gets here, wantResponderID is for outer scroller
Could this be a timing issue with touch moves and scrolls? ScrollResponder.scrollResponderHandleTouchMove
is consistently invoked for both inner and outer scrollers before ResponderEventPlugin.extractEvent
for a scroll.
from react-native.
I've also been running into this issue. The setup I have is an outer horizontal/paging <ScrollView>
with several inner vertical <ListView>
s. When the <ListView>
s are nested in the outer <ScrollView>
I'm seeing the following warning logged when dragging the inner one:
Warning: ScrollView doesn't take rejection well - scrolls anyway
The adverse affects I'm seeing on the expected scrolling behavior of the inner <ScrollView>
s is they're not respecting tapping the status bar to scroll to top, and scrolling is "sticking" to my finger when trying to continuously flick the list β the same issue that @jordanna is running into.
from react-native.
I'll look more into this in the coming week, but I believe the correct way to correctly integrate is to do all enabling/disabling of the scroll view completely from JS (it should start out disabled and then become enabled when JS determines it should become the JS responder). This is actually incredibly difficult because UIKit's scroll view doesn't like to work this way and it might involve some trickery.
from react-native.
Any updates on this one?
from react-native.
@nicklockwood: Do you know of a way to have UIScrollView
s be disabled by default and then reenabled?
from react-native.
You could set the scrollEnabled property to NO, or in the viewDidScrollDelegate you could reset the contentOffset to th previous value.
from react-native.
I tried both of those options. In the former, you cannot reenable it after touches have began, which is what would allow this issue to be fixed (and all future scroll view conflicts). I also tried the later suggestion, but I believe the momentum has issues in that case.
from react-native.
Running into this issue too - I don't suppose there's been any progress here?
from react-native.
@vjeux, this is the kind of troubles we're having with native scroll views. The responder system solves it and I don't know how to solve it while using the UIScrollViews.
from react-native.
Any movement on this one? I have a similar example up on stack overflow (http://stackoverflow.com/questions/29756217/react-native-nested-scrollview-locking-up) that nobody has been able to answer.
from react-native.
@nicholasstephan Modify node_modules/react-native/Libraries/Components/ScrollResponder.js
: Line 136 (See UPDATE):
scrollResponderHandleScrollShouldSetResponder: function(): boolean {
return this.state.isTouching;
},
UPDATE: I find if the scroll view is currently animating and wants to become the responder, then it will reject. Line 189 in ScrollResponder.js. So I modify Line 340 and it work for me:
scrollResponderIsAnimating: function(): boolean {
// var now = Date.now();
// var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
// var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
// this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
// return isAnimating;
return false;
},
from react-native.
Is there any progress here?
from react-native.
Maybe with subclassing, you can make a disableOffsetUpdates
like in the gist linked here:
https://twitter.com/andy_matuschak/status/559796157241507841
Not sure if that introduces significant lag.
from react-native.
what do you think, @ide? You seem to have the most experience with nesting and composing scroll views...
from react-native.
@ide @sahrens Any movement on this issue? I think i have exactly the same problem.
from react-native.
I'm not actively looking into this. Based on what I've heard from other people and from reading this discussion, the solution could be quite hard or non-obvious without advanced knowledge of gesture systems. I have a thought regarding some of the discussion above...
Do you know of a way to have UIScrollViews be disabled by default and then reenabled?
Might be possible through the gesture recognizers by adding a custom gesture recognizer that communicates with the JS layer. I think you can tell UIScrollView's private gesture recognizers to need this custom gesture recognizer to fail -- this might let JS allow/disallow the private gesture recognizers to become active.
from react-native.
I think @andreic has been looking at this a bit?
from react-native.
I'm having this issue as well. Any insights into which files to start looking into first?
from react-native.
any solution?
from react-native.
ping @andreic π we need you
from react-native.
+1 Also hitting this nasty one. Would look into it if I had more experience with gesture systems.
from react-native.
+1
from react-native.
π
from react-native.
For people looking for a temporary fix, I've had success with Shuangzuan's comment without any obvious ill-effects, though I'm sure the original code is there for a reason that I'm just not running into in my project.
from react-native.
cc @spicyj @jordwalke, I heard we were close to a fix on this?
from react-native.
@ericvicenti: @spicyj Figured out a way to delay the activation of a UIKit gesture recognizer until JS tells it to activate. The final solution then, it to have all scroll views start out disabled, then wait for the JS responder system to tell them that they are enabled. Then all of the logic is perfectly controllable (and cross platform) in JS. The remaining work is to actually implement the starts-out-disabled-until-instructed-otherwise behavior for native UIKit scroll views, and then to build the gesture logic for detecting when a scroll view should become enabled in JS (that part is fairly trivial).
from react-native.
+1 since I updated to 0.9.0
from react-native.
Same error as @alejomendoza
happens when I scroll a listview and since I updated to 0.9.0
from react-native.
Do a deep clean of your git repo and make sure when you rerun npm install that you have only one copy of React Native at all. This is likely caused by version mismatches.
from react-native.
Great I did what you said and it works now! Thanks!
from react-native.
I've been having a similar issue with nested ScrollViews locking up (in v 0.11.0). I tried all of the solutions above with no luck.
For me, the interim fix was to set the method below, in ScrollResponder.js, to false.
scrollResponderHandleTerminationRequest: function(): boolean {
// return !this.state.observedScrollSinceBecomingResponder;
return false;
},
It seems as though if I set a panResponder for onResponderTerminationRequest
(or onPanResponderTerminationRequest
) it gets ignored, and it's overridden by the above.
I'm sure there is a good reason why this is the case though, so it'd be good to get an insider's thoughts. The hack seems to work though, and I have no problems switching between two ScrollViews.
The one side effect is I get this warning, when it would normally lock up.
Warning: ScrollView doesn't take rejection well - scrolls anyway
from react-native.
@traviskochel good!
from react-native.
I'm getting a similar error in 0.11, but only when i bundle js, not when i run it off the server. Cache maybe?
message: ReactInstanceHandles._getFirstCommonAncestorID is not a function. (In 'ReactInstanceHandles._getFirstCommonAncestorID(responderID,topLevelTargetID)', 'ReactInstanceHandles._getFirstCommonAncestorID' is undefined)'
from react-native.
@agmcleod sounds like you are running JS that doesn't match your native binary.
from react-native.
@ide i did a clear in xcode, as well as deleted the main.bundlejs to be safe. I also did a non minified build to get that above error, so i know it is loading my latest file at least.
I also generated a new project to upgrade to 0.11, since the structure changed to support both ios & android.
from react-native.
Can you check your node_modules to make sure there is only one copy of react-native? Conflicts can occur if you are using npm packages that have react-native in their dependencies.
from react-native.
@ide ah shoot that's the problem, was referencing an older fork of mine. My apologies, I thought i had changed that when i updated :)
from react-native.
Does anyone know what breaks if you just return false in scrollResponderIsAnimating (ScrollResponder.js)
It seems to fix the issue, but at what cost?
from react-native.
@arianitu that solves the problem indeed! Thanks
from react-native.
Is anyone actively working on this? I find myself scanning each changelog hoping to see this has been fixed
from react-native.
+1 - running into the issue as well
from react-native.
+1 - getting this issue when I have a horizontal scroll view nested in a list view.
from react-native.
+1 - I'm running into this issue.
from react-native.
+1 ran into this issue
from react-native.
So leaving this in an issue isn't doing much good it seems -- this issue has been open for a very long time now, so I'm going to move it over to ProductPains, please vote it up there if you still think that this is an important fix: https://productpains.com/post/react-native/scrolling-ends-prematurely-in-scrollviews-embedded-in-a-parent-scrollview/
from react-native.
We've added a few links to Product Pains to this repo's README. It's quite helpful to see all the upvotes and the most popular issues at a glance, while GitHub +1's just haven't addressed this need. Already the Product Pains version of this issue has 17 upvotes and will bubble up to the top compared to being permanently buried as issue #41 on GitHub.
When someone has a clear articulation of the issue and suggestions for a structurally correct fix, a GitHub issue will be much more actionable and likely to be addressed in a more timely way.
from react-native.
Github issues are not working well for us - we are a very small team and and need a way to prioritize. A good way to prioritize is to let people vote on issues and Product Pains lets you do exactly that.
You can get an estimate by sorting github issues by the number of comments but it's not that reliable: https://github.com/facebook/react-native/issues?q=is%3Aissue+is%3Aopen+sort%3Acomments-desc
from react-native.
@brentvatne @ide @mkonicek fair enough, thanks for the explanations
from react-native.
@toddw - no problem :) thanks for weighing in on ProductPains!
from react-native.
This has been fixed in this commit 67bf0f1 and should be coming to 0.17. Yay!
from react-native.
So stoked to see this fixed! Thanks so much!
from react-native.
+1 I still get it
from react-native.
+1
from react-native.
+1
from react-native.
I see this happenning in 0.20 too
from react-native.
+1 seeing this issue too
from react-native.
+1 still seeing this issue. is there really no workarounds? Disabling scrolling on the parent causes lots of jerkiness.
from react-native.
+1,I see this issue in 0.22 too
from react-native.
+1,I see this issue in 0.22 too
from react-native.
+1 still seeing it in .20 as well.
from react-native.
+1, 0.46.1
from react-native.
+1, 0.48.3
from react-native.
+1, 0.51.0
from react-native.
+1, 0.50.3, And I try the following way ,but not use.
UPDATE: I find if the scroll view is currently animating and wants to become the responder, then it will reject. Line 189 in ScrollResponder.js. So I modify Line 340 and it work for me:
scrollResponderIsAnimating: function(): boolean {
// var now = Date.now();
// var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
// var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
// this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
// return isAnimating;
return false;
},
from react-native.
+1 0.53.0
from react-native.
+1 0.52.0
My scenario is using a root view in a native view controller as a separated view on iOS platform, the root view contains a <ScrollView/>
component as container view, the items which in scrollview are <TouchableWithoutFeedback/>
. When I scroll the scrollview, before the scrollViewDidEndDecelerating:
function of UIScrollView been invoked, I press some button pushing the current view controller to another one, the scrollViewDidEndDecelerating:
function will never been invoked.
When I pop back to the previous view controller, I press down the <TouchableWithoutFeedback/>
in <ScrollView/>
will have no effect, because the scrollResponderIsAnimating
function in ScrollResponder.js, will return true because of this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime
( last momentum scroll end time didn't set properly because scrollViewDidEndDecelerating:
in UIScrollView not been invoked ) , the gesture system thought that scrollview was still animating, and then the scrollview will capture the response event, not pass it to <TouchableWithoutFeedback/>
.
My solution is return false from scrollResponderIsAnimating
directly, but I'm still looking for a better solution.
from react-native.
Related Issues (20)
- No haptic feedback when using RefreshControl with a tintColor prop
- Uncontrolled input value clears when color is changed HOT 1
- [0.74] New app hangs on blank screen if dev server is not started HOT 3
- `selectOnFocus` does not work with `autoFocus` HOT 2
- Android Native Module: Unresolved reference: PackageList HOT 2
- [0.73.6] HOT 2
- γiOSγThe contentOffset property is missing from TextInputView's onScroll callback HOT 4
- Animated.Event not working attached to onLayout with useNativeDriver enabled HOT 2
- [iOS][Information] App store submissions will require a privacy manifest and signature for hermes HOT 3
- Cookies not being sent to webview for iOS after React Native Upgrade HOT 4
- [0.74] Cannot access Dev Menu on Android (RNTester) HOT 4
- TextInput contextMenuHidden does not hide autofill HOT 1
- Showing Recent Messages Command PhaseScriptExecution failed with a nonzero exit code HOT 3
- Unknown unicode characters in Image source broken on iOS in New Architecture HOT 1
- TouchableWithoutFeedback crashes when SVG component is a direct child of it HOT 2
- FBReactNativeSpec build commands failed with RN 0.71.4 / Xcode 15.3 / M2 HOT 6
- error `fsevents` unavailable (this watcher can only be used on Darwin) HOT 2
- `@synthesize bridge = _bridge` not working with bridgeless mode and TurboModule
- No bundle url is present when run ios app on real iphone device HOT 3
- The application is slow after running for a long time without being used HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.