React-native: [ListView] Rendering new rows while scrolling can cause the underlying ScrollView to scroll back up
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
All 25 comments
cc @mkonicek @kmagiera
brentvatne
on 25 Sep 2015
It also happens when I scroll very fast and it hasn't finished rendering the rows yet.
satya164
on 26 Sep 2015
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
kmagiera
on 26 Sep 2015
Great, thanks for the update @kmagiera!
brentvatne
on 27 Sep 2015
@kmagiera can this issue also manifest in IOS ?
Sherlock92
on 25 Oct 2015
@Sherlock92 - nope
brentvatne
on 25 Oct 2015
@kmagiera Since RecyclerViewBackedScrollView fixes this should we use it everywhere by default on Android (whenever you use <ScrollView>) and close this?
mkonicek
on 27 Oct 2015
We're still experimenting with performance there. This should be done this week. Then we can switch <ListView> over to it on android
kmagiera
on 27 Oct 2015
:+1:
mkonicek
on 28 Oct 2015
@brentvatne @kmagiera any updates on this
ghost
on 31 Dec 2015
@tUrG0n - there is a patched ScrollView for Android that fixes this, working on open sourcing it. cc @vjeux
brentvatne
on 1 Jan 2016
@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
kmagiera
on 4 Jan 2016
RecyclerViewBackedScrollView doesn't fix this issue but it does help a lot with scrolling perf. I'll try to open source the BugFixScrollView soon!
brentvatne
on 22 Jan 2016
Looks like RecyclerViewBackedScrollView fixes the same issue for me (at least on Android)
AlexeyToksarov
on 18 Feb 2016
@brentvatne Any update on the BugFixScrollView?
ramilushev
on 21 Apr 2016
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
saoasuna
on 23 Apr 2016
+1
ghost
on 7 Jun 2016
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?
knowbody
on 16 Jul 2016
Closing due to https://github.com/facebook/react-native/commit/36ca1a078acbaba770c196847254e7a6e80c6918
ide
on 1 Aug 2016
Is the IndexOutOfBoundsException issue resolved as well ? I still experiencing it with RN 0.35 in Android.
tlcheah2
on 1 Nov 2016
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)
messense
on 10 Jan 2017
Still experiencing IndexOutOfBoundsException with RN 0.40 on Android.
guiherzog
on 22 Feb 2017
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
on 1 Mar 2017
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.
awitherow
on 1 Mar 2017
What is the solution of this bug can any body please tell me about this
bhanuprakashsharma
on 4 May 2018
Related issues
WG-Com
路
3Comments
lazywei
路
3Comments
aniss
路
3Comments
madwed
路
3Comments
upbit
路
3Comments
Most helpful comment
Still experiencing
IndexOutOfBoundsExceptionwith RN 0.39 on Android.