Prevent Flatlist from scrolling when new items are added

Question

When adding data to the Flatlist (e.g. subscriptions) it scrolls down leading to a very bad UX. Any idea on how this could be solved?

Answer 1

Actually, I think this must be handled in native level, but not handled yet, I solve my problem by saving scroll offset and set it again after reloading data like this:

reloadData(flatListData){

   this.setState({
       flatListData: flatListData
   });

   requestAnimationFrame(() => {
         this.flatList.scrollToOffset({
                       animated: false,
                       offset: this.flatListLastOffset
             });
   });
}

...

<FlatList
     data={this.state.flatListData}
     ref={ref => this.flatList = ref}
     onScroll={(event: Object) => {
           this.flatListLastOffset = event.nativeEvent.contentOffset.y;
           }}
     horizontal={false}
     scrollEventThrottle={16}
 />

this is not the best solution, but can fix my problem for now