Prevent scrolling Flatlist when adding new items

Question

When adding data to a Flatlist (such as a subscription), it scrolls down, which leads to a very bad UX. Any idea on how this can be resolved?

Answer 1

In fact, this should be handled at its own level, but I think that it is not handled, I solve my problem with the scroll offset and set it again after reloading the data as follows:

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 fix my problem so far