ScrollToEnd after update data for Flatlist

react-native react-native-flatlist
Tuan Nguyen Quoc picture Tuan Nguyen Quoc · Sep 19, 2017 · Viewed 11.2k times · Source

I'm making a chat box with Flatlist. I want to add a new item to data then scroll to bottom of list. I use scrollToEnd method but it did not work. How can I do this?

Answer

Ourabi picture Ourabi · Mar 8, 2019

I found a better solution,scrollToEnd() is not working because it is triggered before the change is made to the FlatList.
Since it inherits from ScrollView the best way here is to call scrollToEnd() in onContentSizeChange like so :

<FlatList
            ref = "flatList"
            onContentSizeChange={()=> this.refs.flatList.scrollToEnd()} />

Related questions

How to re-render flatlist?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it? My goal is to update the text value when user press button ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> …

Read More
React Native - Use a keyExtractor with FlatList

I have been getting the: "VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor" pretty confusing..., the array i am passing it has a key property defined in each …

Read More
Hide scrollbar in FlatList (React Native) in Android

I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been able to hide …

Read More