How to scroll to bottom of React Native ListView

Question

I'm writing an app using React Native. It has a ListView to show the list of items.

I'm appending new items at the bottom when there are new ones available. I'd like to scroll to bottom in the ListView to show the new items automatically. How can I do this?

question from:https://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-of-react-native-listview

Answer 1

As of React Native 0.41 both ListView and ScrollView have scrollToEnd() methods. ListView's is documented at https://facebook.github.io/react-native/docs/listview.html#scrolltoend

You'll need to use a ref to store a reference to your ListView when you render it:

<ListView
  dataSource={yourDataSource}
  renderRow={yourRenderingCallback}
  ref={listView => { this.listView = listView; }}
</ListView>

Then, you can just call this.listView.scrollToEnd() to scroll to the bottom of the list. If you'd like to do this every time the content of the ListView changes (for instance, when content is added), then do it from within the ListView's onContentSizeChange prop callback, just like with a ScrollView.