How to scroll to an item on top ?

[arnaudambro]

Hi there,

I am just starting the implementation of this lib, I hope it will be as great as it looks to be.

Meanwhile, I try to setup what I had with a basic ScrollView, i.e. scrolling an item to the top of the scroll container.

To do that, on each View item I had in the ScrollView, I was getting the position through the onLayout prop : onLayout={(event) => setPosition(event.nativeEvent.layout.y)} and when I press an item inside this View, I could do a basic scrollViewRef.current.scrollTo({ y: position, animated: true }) and the job was done.

Now I try to do the same with the method await sectionsScrollViewRef.current.scrollToAsync(position), but the thing is the position of my View is always 0. I guess it's because the View is wrapped in the draggable element.

If it is the case, then how can I scroll to an element ?

Thanks !

[amazingmarvin]

Here's what I'm using to scroll to the end of the list. You could modify to scroll to top:

  scrollToEnd = () => {
    const items = this.getItems();
    const index = items.length - 1;
    if (index !== -1) {
      try {
        this.flatList.current._component.scrollToIndex({ animated: true, index });
      } catch (err) { } // eslint-disable-line
    }
  };

  onScrollFail = (info) => {
    setTimeout(() => {
      try {
        this.flatList.current._component.scrollToIndex({ animated: true, index: info.index });
      } catch (err) { } // eslint-disable-line
    }, 200);
  };

  render() {
    const items = this.getItems();
    return (
      <View style={styles.container}>
        <DraggableFlatlist
          onScrollToIndexFailed={this.onScrollFail}
          onRef={(flatList) => (this.flatList = flatList)}
          data={items}
          ...
        />
      </View>
    );

[ElicaInc]

this.flatList.current?._flatList.scrollToIndex({ animated: true, index: 0 });

the above works for me.