6

I have a flatList view, I want it to scrollToEnd or scrollToIndex when the data has updated(fetch data from server), I do it in comoponentDidUpdate but it doesn't work.Now when the render is completed, the listView always scrolls to top and I cann't see the latest loaded data.So is there a way to capture the event when the render is completed.

code:

...
fetchData(){
    fetch(url)
    .then((res)=>{
        this.setData({data:[...this.state.data, res.data]})
    })
}
componentDidUpdate(){
    this.refs.listView.scrollToEnd({animated:true})
}
render(){
    return <FlatList ref='listView' data={this.state.data} onEndReached={()=>this.fetchData()}.../>
}
Prasun
  • 4,943
  • 2
  • 21
  • 23
cityvoice
  • 2,409
  • 4
  • 14
  • 25
  • Have you tried concatenate the array while setting data. It will stay in the same scroll position and provide keyExtractor prop for FlatList. – Ashwin Mothilal Oct 19 '18 at 03:44
  • 3
    Take a look at the https://stackoverflow.com/questions/42313308/react-native-listview-scrolltoend-it-doesnt-work, `onContentSizeChange` seems to be a good solution. – Prasun Oct 19 '18 at 04:27
  • thanks, @Ashwin Mothilal,you mean [latest data].concat([old data]),I have tried this method but it looks strange.@Prasun, I will try onContentSizeChange. – cityvoice Oct 22 '18 at 01:38
  • Can you see the latest data while scrolling down? If yes, then the FlatList parent or itself may re-render the whole one. By general it won't re-render if you give proper key. – Ashwin Mothilal Oct 22 '18 at 05:03

0 Answers0