Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll to bottom of React Native ListView

Tags:

react-native

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?

like image 272
iwongu Avatar asked Apr 23 '15 16:04

iwongu


People also ask

How do I use a scroll to end in FlatList React Native?

To scroll to end of FlatList after displaying the keyboard with React Native, we can set the onLayour prop to a function that calls scrollToEnd on the FlatList's ref. to set onLayout to a function that calls flatListRef. current. scrollToEnd to scroll the FlatList to the end.

How do I scroll to top in React Native?

To scroll to top of the ScrollView with React Native, we assign a ref to the ScrollView and call scrollTo on the ref's value. to create a ref with useRef and set that as the value of the ref prop of the ScrollView . Then we add a Button that calls ref. current.

How do I scroll screen in React Native?

In the ScrollView, we can scroll the components in both direction vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).


1 Answers

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.

like image 125
jonasb Avatar answered Oct 01 '22 21:10

jonasb