ScrollToBottom by default in react native-CodePudding

I am developing a chat application for my project. I'm using Scrollview to show all the conversation. Here is an issue. Whenever I open the chatRoom, conversations started scrolling from Top to Bottom. I have tried onContentSizeChange(), scrollToBottom() everything. But it taking some time to come to bottom.

Ex: If you take a chance to check the whatsapp chatRoom behavior, The chats won't scroll to Bottom. Conversations started from bottom by default.

Share your thoughts. Thanks in Advance!

CodePudding user response：

For integrate chat application data binding inside scrollview is not good option it create performance issue when large amount of data come in screen, to avoid performance issue bind your chat array data into Flatlist and add one props inverted it will behave like WhatsApp chatroom

<FlatList
    data={data}
    renderItem={renderItem}
    inverted
/>

UPDATE

<FlatList
    data={[...data].reverse()}
    renderItem={renderItem}
    inverted
/>

CodePudding user response：

Have you tried this

<ScrollView
    ref={ref => {this.scrollView = ref}}
    onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>