CODEWITHSUNDEEP
react-nativereact-native-flatlist
ThinkAndCode
ThinkAndCode

Reputation: 1657

Flatlist is not Scrolling to desired offset when scrollToOffset is used

here is my FlatList code

 <FlatList
    ref={ref => this.flatListRef = ref}
    data={this.state.data}
    renderItem={({ item, index }) => this.renderItems(item, index)}
    onScroll={(e) => this.handleScroll(e)}
/>

here is handleScroll method where i get the ScrollPosition

handleScroll(event) {
    this.props.updateAppState('scrollPosition', event.nativeEvent.contentOffset.y);
}

And finally in componentDidMount ScrollToOffset is called

componentDidMount() {
    this.flatListRef.scrollToOffset({ animated: false, offset: this.props.app.scrollPosition});
}

FlatList never Scrolls it's list. I am really helpless now. Can anybody let me know what can i do to make it scroll to the desired offset?. Thank You.

Upvotes: 0

Views: 6088

Answers (3)

Stanjhae
Stanjhae

Reputation: 284

Using setTimeout and InteractionManager.runAfterInteractions still has some weird behaviour for me.

Instead I triggered scrollToOffset in the onLayout prop of the FlatList.

onLayout={() => this.flatListRef.scrollToOffset({ offset: this.props.app.scrollPosition, animated: false })}

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12215

Glad you found out the solution, the thing is even i faced this problem to find out that using setTimeout actually works.

That reminded me of the basics of javascript. What happens is an event loop. When your page load , it calls every method inside an event loop.

Without setTimeout , the code actually gets executed even before all the components are actually rendered for the first time hence you see no effect. But with setTimeout even with 0ms as time, it gets added in the eventloop at last. And after every async function, that setTimeout is again brought back and executed. HEnce you see the difference.

hope it helps feel free for doubts

Upvotes: 3

ThinkAndCode
ThinkAndCode

Reputation: 1657

After number of attempts i found the solution with this stack overflow answer that time delay makes it work.

setTimeout(() => {
  this.flatListRef.scrollToOffset({ offset: this.props.app.scrollPosition, animated: false })
}, 0)

But I didn't really understand why this time delay is required. In official documents itself nothing has been mentioned about time delay. Though problem has been resolved for now I would like to know the reason behind this time delay.

Can anybody help me to know the reason behind this time delay?. Thank you.

Upvotes: 8

Related Questions