React Native ListView: Prebuilt Items

Question

Is it possible to add items to the React Native ListView in the onTopReached event, similar to how one adds items to the onEndReached event? Currently, when I add rows to the list, the ListView scrolls up.

Use case: I have an application with a feed that the user can scroll down. When you go from the feed and then go back to it, I want to show the last row seen above. Then the user should be able to scroll either up to see the previous lines that he has scrolled, and, of course, load new lines. Assuming I have already displayed a ListView, starting with the last visible row, a far-fetched example would look something like this:

  _onTopReached() { this._unshiftRows(); }, _unshiftRows() { var list = this.props.list; // The entire list var lastSeenRowIndex = this.props.lastSeenRowIndex; var prevRows = list.slice(0, i); this._rows = prevRows.concat(this._rows); this.setState({ dataSource: this.state.dataSource.cloneWithRows(this._rows) }); }, 

In the above example, I simply add the first part of the list to the already processed last part with _onTopReached shooting right away, because I'm already at the top. However, this causes the ListView to re-display the first row at the top of the screen, rather than retaining its previous position.

An alternative is to save the y offset of the last visible row and move to the ListView list at that position. However, this method requires that each line be displayed before the current one, which takes a lot of time. I also could not get the correct offset using scrollWithoutAnimationTo or setting contentOffSet . However, it performs the transition to the correct position if I use scrollTo or set a timeout before calling scrollWithoutAnimationTo and allow the first lines to be rendered in average time. But it is not very nice.

All help would be greatly appreciated. Thanks!

Answer 1

You must use a flatlist

Try adding new elements to the data source and use the scrolltoindex method.

Flatlist

scrollToIndex (params: object) Scrolls to the element at the specified index so that it is in scope, so viewPosition 0 places it at the top, 1 at the bottom and 0.5 centered in the middle. viewOffset - a fixed number of pixels to offset the final target position.