Flatlist scrollToIndex scrolls item all the way to the top of the list and produces whitespace

[velevtzvetlin]

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

I am rendering a flatlist and on iOS, when scrolltoindex is called on a item that is close to the bottom of the list, it is pushed to the top and leaves whitespace below it. When you touch the list, it snaps back down. On android it works perfectly. I would like to add that get item layout is implemented.

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 7.10.1
Yarn: Not Found
npm: 4.2.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.0 => 0.52.0

Steps to Reproduce

Expected Behavior

Expected behavior is what happens on android, it will only scroll a item far enough to leave whatever is below it without any whitespace under the last item.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[velevtzvetlin]

upgraded still same issue. There are items above the index that is scrolled to

[scottmas]

Can confirm this is happening on React Native 55.4. And similar to the post, it only happens on ios.

I have to do some janky logic to offset the scroll position by the max number of rows that can be rendered at a time. Like

//Scroll to last item
let scrollIndex = data.length - 1; 

//Correct for the bug
const maxNumRows = Math.floor(windowHeight / ROW_HEIGHT);
if (data.length - scrollIndex < maxNumRows) {
  const diff = maxNumRows - (data.length - scrollIndex) - 2;
  scrollIndex = scrollIndex - diff;
}

[elicwhite]

Is this related to this PR? #22769

[scottmas]

Yes, that PR appears as though it would fix it.

[elicwhite]

Can you test it on your problem and verify?

[scottmas]

I think so. Is the RN build process complicated or can I just point my package.json at his forked repo?

[elicwhite]

https://facebook.github.io/react-native/docs/building-from-source

[bartolkaruza]

@scottmas Were you able to verify that the PR fixed your issue? You don't actually have to worry about building from source for iOS (that's Android specific), so you can just npm/yarn add the github link to that branch to test your change.

"react-native": "cabelitos/react-native#scrollFix"

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