FlatList scrollToIndex scrolls to wrong place when used for the first time

[amcvitty]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

When using a FlatList to display a small number of Buttons, the first time I call scrollToIndex, it miscalculates the position to put things on screen relative to the viewPosition specified.

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 9.8.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1
react-native: 0.55.2

Steps to Reproduce

Load this snack: https://snack.expo.io/@amcvitty/flatlist-scroll-bug

This app simply scrolls the appropriate red box in the FlatList at the top to the center of the view when you click the corresponding button in the list below.

• Click the "D2" button. Note that the D2 box scrolls to the extreme left ignoring the viewPosition specified (this is incorrect)
• Click the "D2" button again. Note that the D2 box now scrolls to the center, respecting the viewposition
• Further clicks on D2 will continue to leave the box in the middle correctly.

Expected Behavior

The first click should take the D2 box to the center

Actual Behavior

The first click ignores the viewPosition, unless the user does an actual scroll before the first call to scrollToIndex.

My debugging

I did a bit of debugging and the reason seems to be that this._scrollMetrics.visibleLength in VirtualizedList has been incorrectly set to 0 in a call to onScroll that happens after onLayout (when it is set correctly), but before any user interaction. The list receives a scroll event with all zeros, and specifically on this line:

VirtualizedList.js:1267: let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement);

the layoutMeasurement is 0.

Since the visibleLength is used in onScrollToIndex to calculate the appropriate scroll offset, the calculation is incorrect.

Scroll events triggered by user action have real event content and so the layoutMeasurement is reset correctly (to 375 on my iphone 7).

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[amcvitty]

Replying to stale bot - The issue has not been fixed. The snack looks the same and our app still suffers from this bug.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[amcvitty]

Still a bug

[orta]

I think this is fixed in the latest release, at least I can't reproduce it in the latest version of the snack using those steps - @amcvitty any chance you can give it a re-run?

[amcvitty]

@orta Thanks for taking a look. I just reran the snack and I still see the same behavior. The first click scrolls D2 to the left of the screen, subsequent clicks scroll it to the center as expected

Here's me running it with expo 32.0.0:
http://recordit.co/w1vfrsGHpa

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

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.