Chats are not showing in timeline format

Issue Description

I've implemented this module everything seems to work fine but there is one problem that whenever I close the chat and open again then messages are grouped by the user id as shown in the image. I'm not sure why this is happening. it's happening both ios and android. I want to show messages on a timeline basis. can someone please guide me through this issue ??

Steps to Reproduce / Code Snippets

below is my Chatscreen component.

import React from 'react' import { TouchableOpacity, Platform } from 'react-native'; import { GiftedChat, Bubble, InputToolbar, Send} from 'react-native-gifted-chat'; import Icon from 'react-native-vector-icons/Ionicons'; import io from 'socket.io-client'; import axios from 'axios';

import API from '../API'; import Utils from '../Utils';

const APP_CONN = Utils.GET_APP_CONNECTION(Platform.OS) const CHAT_CONN = Utils.GET_CHAT_CONNECTION(Platform.OS)

class ChatScreen extends React.Component { constructor(props) { super(props);

this.state = {
  messages: [],
  sender: this.props.sender || "",
  reciever: this.props.reciever || "",
  senderProfileImage: this.props.senderProfileImage || Utils.LOGO_URI,
  recieverProfileImage: this.props.recieverProfileImage || Utils.LOGO_URI
}

}

//styling chat bubbles renderBubble = props => { return ( <Bubble {...props} textStyle={{ right: { color: '#fff', }, }} wrapperStyle={{ right: { backgroundColor: '#46CF76', }, left: { backfroundColor: '#aaa', }, }} /> ); };

//syling input bar renderInputToolbar = props => { return ( <> <InputToolbar {...props} containerStyle={{ backgroundColor: '#111', borderTopWidth: 0, marginHorizontal: 10, marginLeft: '12%', borderRadius: 80, }} textInputProps={{ style: { color: '#fff', flex: 1, alignItems: 'center', paddingHorizontal: 20, }, multiline: false, returnKeyType: 'go', onSubmitEditing: () => { if (props.text && props.onSend) { let text = props.text; props.onSend({text: text.trim()}, true); } }, }} /> <TouchableOpacity style={{ position: 'absolute', marginLeft: '4%', marginBottom: '1%', bottom: 0, }} onPress={this.handleChoosePhoto}> <Icon name="ios-analytics" style={{ color: '#46CF76', }} size={32} /> </> ); };

//styling send button renderSend = props => { return ( <> <Send {...props}> <Icon name="ios-arrow-dropright-circle" style={{ color: '#46CF76', marginRight: '0%', marginBottom: '30%', }} size={32} /> </> ); };

getMessages = async() => { let headers = await Utils.GET_DEFAULT_HEADERS(); await axios.get(APP_CONN + API.GET_CHATS + "?sender=" + this.state.sender + "&reciever=" + this.state.reciever +"&username=" + this.state.sender, { 'headers': headers }) .then (response => { let chats = response.data if (chats.length !== 0){ this.setState({messages: GiftedChat.append([], chats)}) } }) .catch(error => { alert (error) }) }

componentWillMount= () => { this.getMessages()

this.socket = io(CHAT_CONN)
this.socket.connect()
this.socket.emit("join", {username: this.state.sender})

}

componentDidMount = () => { this.socket.on("outputMsg", msg => { this._storeMessages(msg) }); }

_storeMessages = async(msg) => { await this.setState(previousState => ({ messages: GiftedChat.append(previousState.messages, msg), })) }

async onSend(messages = []) { this._storeMessages(messages) let messagePaylod = { 'reciever': this.state.reciever, 'message': messages, 'messageType': "Text", 'avatar': this.state.recieverProfileImage } this.socket.emit("inputMsg", messagePaylod) }

render() { return ( <GiftedChat renderUsernameOnMessage alwaysShowSend={true} messages={this.state.messages} showAvatarForEveryMessage={true} onSend={messages => this.onSend(messages)} messageIdGenerator={Utils.UUID} user={{ _id: this.state.sender, name: this.state.sender, avatar: this.state.senderProfileImage, }} renderBubble={this.renderBubble} renderInputToolbar={this.renderInputToolbar} renderSend={this.renderSend} scrollToBottom infiniteScroll /> ) } }

Please, someone, help me to resolve this.

export default ChatScreen;

Expected Results

I want chats to be shown on a timeline basis.

Additional Information

Nodejs version: v10.16.0
React version: 16.9.0
React Native version: 0.61.5
react-native-gifted-chat version: ^0.16.1
Platform(s) (iOS, Android, or both?): both
TypeScript version: [FILL THIS OUT]

FaridSafi / react-native-gifted-chat