[ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up #3042

brentvatne · 2015-09-25T19:39:48Z

See: https://www.youtube.com/watch?v=_8Wkf6SmuLQ for a demo
And: https://github.com/brentvatne/ListViewRenderScrollingError for an example.

It's sometimes hard to reproduce - scroll up a bit and then back down to the bottom, and if the timing is right then when you hit the bottom of the scroll view it will smooth scroll back up.

brentvatne · 2015-09-25T19:40:13Z

cc @mkonicek @kmagiera

satya164 · 2015-09-26T17:17:27Z

It also happens when I scroll very fast and it hasn't finished rendering the rows yet.

kmagiera · 2015-09-26T20:31:15Z

That's a known problem. JS listview dynamically adds rows while fling animation is going on. Apparently there is a bug in android scrollview fling animation which doesn't take into account that the height of the scrollview may change while in the meantime. Because it's using hidden API on android there is no good way to workaround this problem. We're working on an alternative implementation that would use native list view instead and should address this problem

brentvatne · 2015-09-26T23:55:50Z

Great, thanks for the update @kmagiera!

Sherlock92 · 2015-10-25T20:40:49Z

@kmagiera can this issue also manifest in IOS ?

brentvatne · 2015-10-25T22:18:04Z

@Sherlock92 - nope

mkonicek · 2015-10-26T23:13:56Z

@kmagiera Since RecyclerViewBackedScrollView fixes this should we use it everywhere by default on Android (whenever you use <ScrollView>) and close this?

kmagiera · 2015-10-27T20:55:47Z

We're still experimenting with performance there. This should be done this week. Then we can switch <ListView> over to it on android

mkonicek · 2015-10-28T00:42:41Z

👍

ghost · 2015-12-31T18:32:02Z

@brentvatne @kmagiera any updates on this

brentvatne · 2016-01-01T02:36:10Z

@Turg0n - there is a patched ScrollView for Android that fixes this, working on open sourcing it. cc @vjeux

kmagiera · 2016-01-04T17:55:45Z

@Turg0n RecyclerViewBackedScrollView landed a while ago and it's ready to be used. You can use
<RecyclerViewBackedScrollView> the same way as you use <ScrollView>. If you're using ListView component you can pass renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />} as a prop to the ListView component in order for it to use recycler view as a backend

brentvatne · 2016-01-22T21:19:01Z

RecyclerViewBackedScrollView doesn't fix this issue but it does help a lot with scrolling perf. I'll try to open source the BugFixScrollView soon!

AlexeyToksarov · 2016-02-18T09:33:58Z

Looks like RecyclerViewBackedScrollView fixes the same issue for me (at least on Android)

ramilushev · 2016-04-21T07:32:49Z

@brentvatne Any update on the BugFixScrollView?

saoasuna · 2016-04-23T04:23:52Z

also interested on the fix - my app has several long ListViews in it and i can't smoothly fling through them unless i initialize the list to be the whole thing right off the bat
Slightly unrelated, but RecyclerViewBackedScrollView doesn't seem to be working for me as well; it gives an "IndexOutOfBoundsException: Inconsistency detected. Invalid item position" error

ghost · 2016-06-07T09:53:23Z

+1

knowbody · 2016-07-16T08:17:45Z

Seems like I get similar errors on Android (RN 0.28), stack trace:

Fatal Exception: java.lang.IndexOutOfBoundsException: Invalid index 55, size is 41
       at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
       at java.util.ArrayList.get(ArrayList.java:308)
       at com.facebook.react.views.recyclerview.RecyclerViewBackedScrollView$ScrollOffsetTracker.getTopOffsetForItem(RecyclerViewBackedScrollView.java:169)
       at com.facebook.react.views.recyclerview.RecyclerViewBackedScrollView$ReactListAdapter.getTopOffsetForItem(RecyclerViewBackedScrollView.java:310)
       at com.facebook.react.views.recyclerview.RecyclerViewBackedScrollView.calculateAbsoluteOffset(RecyclerViewBackedScrollView.java:325)
       at com.facebook.react.views.recyclerview.RecyclerViewBackedScrollView.onScrollChanged(RecyclerViewBackedScrollView.java:344)

not sure if it's a bug or if I'm doing something wrong?

ide · 2016-08-01T19:18:28Z

Closing due to 36ca1a0

tlcheah2 · 2016-11-01T13:06:36Z

Is the IndexOutOfBoundsException issue resolved as well ? I still experiencing it with RN 0.35 in Android.

messense · 2017-01-10T09:04:43Z

Still experiencing IndexOutOfBoundsException with RN 0.39 on Android.

01-10 17:02:06.862  1633  1633 E AndroidRuntime: java.lang.IndexOutOfBoundsException: index=14 count=13
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.addInArray(ViewGroup.java:4559)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.addViewInner(ViewGroup.java:4476)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.addViewInLayout(ViewGroup.java:4430)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.updateSubviewClipStatus(ReactViewGroup.java:312)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.updateClippingToRect(ReactViewGroup.java:285)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.updateClippingRect(ReactViewGroup.java:278)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.scroll.ReactScrollView.updateClippingRect(ReactScrollView.java:220)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.scroll.ReactScrollView.onScrollChanged(ReactScrollView.java:152)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.View.scrollTo(View.java:13272)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.widget.ScrollView.onOverScrolled(ScrollView.java:822)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.scroll.ReactScrollView.onOverScrolled(ReactScrollView.java:342)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.View.overScrollBy(View.java:20915)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.widget.ScrollView.onTouchEvent(ScrollView.java:682)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.facebook.react.views.scroll.ReactScrollView.onTouchEvent(ReactScrollView.java:192)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.View.dispatchTouchEvent(View.java:9939)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2344)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2358)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:411)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1810)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.app.Activity.dispatchTouchEvent(Activity.java:3061)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.support.v7.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:67)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:373)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.View.dispatchPointerEvent(View.java:10159)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4434)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4302)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3902)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3868)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:3995)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3876)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4052)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3902)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3868)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3876)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6210)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6184)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6145)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6313)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.InputEventReceiver.nativeConsumeBatchedInputEvents(Native Method)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.InputEventReceiver.consumeBatchedInputEvents(InputEventReceiver.java:176)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl.doConsumeBatchedInput(ViewRootImpl.java:6284)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.ViewRootImpl$ConsumeBatchedInputRunnable.run(ViewRootImpl.java:6336)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:871)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.Choreographer.doCallbacks(Choreographer.java:683)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.Choreographer.doFrame(Choreographer.java:613)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:857)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:751)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:95)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:154)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6077)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
01-10 17:02:06.862  1633  1633 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)

guiherzog · 2017-02-22T05:40:14Z

Still experiencing IndexOutOfBoundsException with RN 0.40 on Android.

awitherow · 2017-03-01T15:09:27Z

Still experiencing this with "react-native": "0.41.2". Wanted to implement the

renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}

as recommended in the documentation, but apparently this is deprecated.

awitherow · 2017-03-01T15:16:04Z

Currently solution for my team is just to pass in the initialListSize to equal the listItems.length. Luckily our list is only around 50 items long with no graphics.

bhanuprakashsharma · 2018-05-04T07:16:18Z

What is the solution of this bug can any body please tell me about this

brentvatne added the Android label Sep 25, 2015

kmagiera self-assigned this Sep 26, 2015

brentvatne changed the title ~~[Android] [ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up~~ [ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up Oct 1, 2015

ide closed this as completed Aug 1, 2016

radko93 mentioned this issue Feb 24, 2017

Android ListView IndexOutOfBoundsException #11825

Closed

bhanuprakashsharma unassigned kmagiera May 4, 2018

facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up #3042

[ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up #3042

brentvatne commented Sep 25, 2015

brentvatne commented Sep 25, 2015

satya164 commented Sep 26, 2015

kmagiera commented Sep 26, 2015

brentvatne commented Sep 26, 2015

Sherlock92 commented Oct 25, 2015

brentvatne commented Oct 25, 2015

mkonicek commented Oct 26, 2015

kmagiera commented Oct 27, 2015

mkonicek commented Oct 28, 2015

ghost commented Dec 31, 2015

brentvatne commented Jan 1, 2016

kmagiera commented Jan 4, 2016

brentvatne commented Jan 22, 2016

AlexeyToksarov commented Feb 18, 2016

ramilushev commented Apr 21, 2016

saoasuna commented Apr 23, 2016

ghost commented Jun 7, 2016

knowbody commented Jul 16, 2016

ide commented Aug 1, 2016

tlcheah2 commented Nov 1, 2016

messense commented Jan 10, 2017 •

edited

Loading

guiherzog commented Feb 22, 2017

awitherow commented Mar 1, 2017 •

edited

Loading

awitherow commented Mar 1, 2017

bhanuprakashsharma commented May 4, 2018

[ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up #3042

[ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up #3042

Comments

brentvatne commented Sep 25, 2015

brentvatne commented Sep 25, 2015

satya164 commented Sep 26, 2015

kmagiera commented Sep 26, 2015

brentvatne commented Sep 26, 2015

Sherlock92 commented Oct 25, 2015

brentvatne commented Oct 25, 2015

mkonicek commented Oct 26, 2015

kmagiera commented Oct 27, 2015

mkonicek commented Oct 28, 2015

ghost commented Dec 31, 2015

brentvatne commented Jan 1, 2016

kmagiera commented Jan 4, 2016

brentvatne commented Jan 22, 2016

AlexeyToksarov commented Feb 18, 2016

ramilushev commented Apr 21, 2016

saoasuna commented Apr 23, 2016

ghost commented Jun 7, 2016

knowbody commented Jul 16, 2016

ide commented Aug 1, 2016

tlcheah2 commented Nov 1, 2016

messense commented Jan 10, 2017 • edited Loading

guiherzog commented Feb 22, 2017

awitherow commented Mar 1, 2017 • edited Loading

awitherow commented Mar 1, 2017

bhanuprakashsharma commented May 4, 2018

messense commented Jan 10, 2017 •

edited

Loading

awitherow commented Mar 1, 2017 •

edited

Loading