Giter VIP home page Giter VIP logo

Comments (74)

joaosilva05 avatar joaosilva05 commented on March 29, 2024 9

+1, also happening in 0.41

from react-native.

toddw avatar toddw commented on March 29, 2024 1

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.

arianitu avatar arianitu commented on March 29, 2024 1

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.

brentvatne avatar brentvatne commented on March 29, 2024 1

@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.

aksonov avatar aksonov commented on March 29, 2024 1

@arianitu I still see this issue in latest 0.19, why?

from react-native.

dgurns avatar dgurns commented on March 29, 2024 1

Still seeing the same issue in 0.41!

from react-native.

vjeux avatar vjeux commented on March 29, 2024

Cc @jordwalke

from react-native.

jordwalke avatar jordwalke commented on March 29, 2024

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.

jordanna avatar jordanna commented on March 29, 2024

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.

ericf avatar ericf commented on March 29, 2024

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.

jordwalke avatar jordwalke commented on March 29, 2024

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.

milanvanschaik avatar milanvanschaik commented on March 29, 2024

Any updates on this one?

from react-native.

jordwalke avatar jordwalke commented on March 29, 2024

@nicklockwood: Do you know of a way to have UIScrollViews be disabled by default and then reenabled?

from react-native.

nicklockwood avatar nicklockwood commented on March 29, 2024

You could set the scrollEnabled property to NO, or in the viewDidScrollDelegate you could reset the contentOffset to th previous value.

from react-native.

jordwalke avatar jordwalke commented on March 29, 2024

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.

nick avatar nick commented on March 29, 2024

Running into this issue too - I don't suppose there's been any progress here?

from react-native.

jordwalke avatar jordwalke commented on March 29, 2024

@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.

nicholasstephan avatar nicholasstephan commented on March 29, 2024

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.

Shuangzuan avatar Shuangzuan commented on March 29, 2024

@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.

magicismight avatar magicismight commented on March 29, 2024

Is there any progress here?

from react-native.

sophiebits avatar sophiebits commented on March 29, 2024

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.

sahrens avatar sahrens commented on March 29, 2024

what do you think, @ide? You seem to have the most experience with nesting and composing scroll views...

from react-native.

PhilippKrone avatar PhilippKrone commented on March 29, 2024

@ide @sahrens Any movement on this issue? I think i have exactly the same problem.

from react-native.

ide avatar ide commented on March 29, 2024

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.

sahrens avatar sahrens commented on March 29, 2024

I think @andreic has been looking at this a bit?

from react-native.

sghiassy avatar sghiassy commented on March 29, 2024

I'm having this issue as well. Any insights into which files to start looking into first?

from react-native.

Shimaa-Hassan avatar Shimaa-Hassan commented on March 29, 2024

any solution?

from react-native.

brentvatne avatar brentvatne commented on March 29, 2024

ping @andreic πŸ˜„ we need you

from react-native.

bradens avatar bradens commented on March 29, 2024

+1 Also hitting this nasty one. Would look into it if I had more experience with gesture systems.

from react-native.

amormysh avatar amormysh commented on March 29, 2024

+1

from react-native.

felixakiragreen avatar felixakiragreen commented on March 29, 2024

πŸ‘

from react-native.

rxb avatar rxb commented on March 29, 2024

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.

ericvicenti avatar ericvicenti commented on March 29, 2024

cc @spicyj @jordwalke, I heard we were close to a fix on this?

from react-native.

jordwalke avatar jordwalke commented on March 29, 2024

@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.

alejomendoza avatar alejomendoza commented on March 29, 2024

screen shot 2015-08-19 at 10 54 05 pm

+1 since I updated to 0.9.0

from react-native.

mutp avatar mutp commented on March 29, 2024

Same error as @alejomendoza
happens when I scroll a listview and since I updated to 0.9.0

from react-native.

ide avatar ide commented on March 29, 2024

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.

mutp avatar mutp commented on March 29, 2024

Great I did what you said and it works now! Thanks!

from react-native.

traviskochel avatar traviskochel commented on March 29, 2024

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.

everfire130 avatar everfire130 commented on March 29, 2024

@traviskochel good!

from react-native.

agmcleod avatar agmcleod commented on March 29, 2024

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.

ide avatar ide commented on March 29, 2024

@agmcleod sounds like you are running JS that doesn't match your native binary.

from react-native.

agmcleod avatar agmcleod commented on March 29, 2024

@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.

ide avatar ide commented on March 29, 2024

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.

agmcleod avatar agmcleod commented on March 29, 2024

@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.

arianitu avatar arianitu commented on March 29, 2024

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.

bogdantmm92 avatar bogdantmm92 commented on March 29, 2024

@arianitu that solves the problem indeed! Thanks

from react-native.

webmanarmy avatar webmanarmy commented on March 29, 2024

Is anyone actively working on this? I find myself scanning each changelog hoping to see this has been fixed

from react-native.

bradennapier avatar bradennapier commented on March 29, 2024

+1 - running into the issue as well

from react-native.

votive avatar votive commented on March 29, 2024

+1 - getting this issue when I have a horizontal scroll view nested in a list view.

from react-native.

toddw avatar toddw commented on March 29, 2024

+1 - I'm running into this issue.

from react-native.

praisegeek avatar praisegeek commented on March 29, 2024

+1 ran into this issue

from react-native.

brentvatne avatar brentvatne commented on March 29, 2024

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.

ide avatar ide commented on March 29, 2024

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.

mkonicek avatar mkonicek commented on March 29, 2024

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.

toddw avatar toddw commented on March 29, 2024

@brentvatne @ide @mkonicek fair enough, thanks for the explanations

from react-native.

brentvatne avatar brentvatne commented on March 29, 2024

@toddw - no problem :) thanks for weighing in on ProductPains!

from react-native.

arianitu avatar arianitu commented on March 29, 2024

This has been fixed in this commit 67bf0f1 and should be coming to 0.17. Yay!

https://productpains.com/post/react-native/scrolling-ends-prematurely-in-scrollviews-embedded-in-a-parent-scrollview/

from react-native.

toddw avatar toddw commented on March 29, 2024

So stoked to see this fixed! Thanks so much!

from react-native.

Taakn avatar Taakn commented on March 29, 2024

+1 I still get it

from react-native.

pppluto avatar pppluto commented on March 29, 2024

+1

from react-native.

jalliance avatar jalliance commented on March 29, 2024

+1

from react-native.

maraujop avatar maraujop commented on March 29, 2024

I see this happenning in 0.20 too

from react-native.

neverlan avatar neverlan commented on March 29, 2024

+1 seeing this issue too

from react-native.

faceyspacey avatar faceyspacey commented on March 29, 2024

+1 still seeing this issue. is there really no workarounds? Disabling scrolling on the parent causes lots of jerkiness.

from react-native.

HaviLee avatar HaviLee commented on March 29, 2024

+1,I see this issue in 0.22 too

from react-native.

sandect avatar sandect commented on March 29, 2024

+1,I see this issue in 0.22 too

from react-native.

YashYash avatar YashYash commented on March 29, 2024

+1 still seeing it in .20 as well.

from react-native.

bintoll avatar bintoll commented on March 29, 2024

+1, 0.46.1

from react-native.

shukerullah avatar shukerullah commented on March 29, 2024

+1, 0.48.3

from react-native.

binchik avatar binchik commented on March 29, 2024

+1, 0.51.0

from react-native.

lishoulong avatar lishoulong commented on March 29, 2024

+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.

koloff avatar koloff commented on March 29, 2024

+1 0.53.0

from react-native.

lumiasaki avatar lumiasaki commented on March 29, 2024

+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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.