React-native: [FlatList] scrollToOffset always scrolls to top

[ignatevdev]

Is this a bug report?

Yes

Have you read the Bugs section of the How to Contribute guide?

Yes

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.46.4
2. node -v:
   v8.1.3
3. npm -v:
   5.3.0

Then, specify:

• Target Platform: iOS

• Development Operating System: OS X Sierra

• Build tools: Xcode

Steps to Reproduce

1. Create a normal FlatList with data and header
2. Add a ref to <FlatList />, in order to have access to scrollToOffset function
3. Add an onScrollEndDrag callback, which listens to scroll end, then gets the final scroll y offset, evaluates it and calls scrollToOffset() function with y > 0

Expected Behavior

Content of the FlatList should be scrolled to provided y position

Actual Behavior

Content of the FlatList is always scrolled to y = 0

Reproducible Demo

Try to scroll to the header and then let go. this.onScrollEnd should scroll back to y = 100, but instead the content is scrolled to y = 0

https://snack.expo.io/Sy9NcgrLb

[DriesVS]

It's not a bug - you need to use the offset key, not y.
FlatList infers it to either x or y based on the horizontal prop.

Fix based on your example:

this.flatList.scrollToOffset({
   offset: headerHeight,
   animated: true
})

http://facebook.github.io/react-native/releases/0.46/docs/virtualizedlist.html#scrolltooffset

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[sujitpk-perennial]

@DriesVS I used same code but it getting error as this.flatList.scrollToOffset is not a function. Am I missing something ?

this.flatList.scrollToOffset({
   offset: headerHeight,
   animated: true
})

I gave refs also in the AnimatedFlatList