How to scroll to bottom of React Native ListView

Question

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.

Leave a Comment Cancel reply