Messages displayed on one side only- react-native-gifted-chat - firebase

Question

If 2 user is using the app, messages are being displayed on the left side of the screen. cannot differentiate between them
here my full code below
import React, { Component } from 'react';
import { Platform, StyleSheet, KeyboardAvoidingView, SafeAreaView, View, YellowBox, LogBox, AsyncStorage } from 'react-native';
import { GiftedChat, InputToolbar } from 'react-native-gifted-chat';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import AnimatedLoader from "react-native-animated-loader";
import firebaseSDK from "../../firebaseSDK";
import firebase from 'firebase';
LogBox.ignoreLogs(['Setting a timer']);
const customtInputToolbar = props => {
return (
<InputToolbar
{...props}
containerStyle={{
backgroundColor: "white",
borderTopColor: "#E8E8E8",
borderTopWidth: 1,
//padding: 8
}}
/>
);
};
export default class Chat extends Component {
constructor(props) {
super(props);
this.state = {
messages: [],
chatgenidres: '',
}
this.init()
this.checkAuth()
}
init = () => {
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "apiKey",
authDomain: "authDomain",
databaseURL: "databaseURL",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appId",
measurementId: "measurementId"
})
}
};
checkAuth = () => {
firebase.auth().onAuthStateChanged(user => {
if (!user) {
firebase.auth().signInAnonymously();
}
})
}
send = messages => {
console.log(messages);
messages.forEach(item => {
const message = {
text: item.text,
timestamp: firebase.database.ServerValue.TIMESTAMP,
user: item.user
};
this.db.push(message);
});
};
parse = message => {
const { user, text, timestamp } = message.val();
const { key: _id } = message;
const createdAt = new Date(timestamp);
return {
_id,
createdAt,
text,
user
};
};
get = callback => {
this.db.on("child_added", snapshot => callback(this.parse(snapshot)));
};
off() {
this.db.off();
}
get db() {
console.log(this.state.chatgenidres)
return firebase.database().ref(this.state.chatgenidres)
};
get uid() {
return (firebase.auth().currentUser || {}).uid;
}
get user() {
return {
_id: this.uid,
chatfromusername: this.props.navigation.state.params.chatFromName,
chatfromuserid: this.props.navigation.state.params.chatFromId,
chattouserid: this.props.navigation.state.params.chatToId,
chattousername: this.props.navigation.state.params.chatToName,
}
}
componentDidMount() {
let genId = this.props.navigation.state.params.chatFromId + 'connectedto' + this.props.navigation.state.params.chatToId;
//AsyncStorage.setItem('chatgenid', genId);
AsyncStorage.getItem('chatgenid', (err, chatgenidres) => {
console.log(chatgenidres, 'from chat.js');
this.setState({ chatgenidres: chatgenidres });
this.get(message =>
this.setState(previous => ({
messages: GiftedChat.append(previous.messages, message)
}))
);
});
}
componentWillUnmount() {
this.off();
}
render() {
const chat = <GiftedChat
messages={this.state.messages}
onSend={this.send}
user={this.user}
style={styles.messageContainer}
renderInputToolbar={props => customtInputToolbar(props)}
/>;
if (Platform.OS === 'android') {
return (
<View style={styles.container} behavior="padding" keyboardVerticalOffset={30} enabled>
<View style={{ flexDirection: 'row', padding: 13, justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.1)' }}>
<FontAwesomeIcon name="arrow-left" size={20} onPress={() => { this.props.navigation.goBack() }} color="#FFF" />
</View>
{chat}
</View>
)
}
return <SafeAreaView style={{ flex: 1 }}>{chat}</SafeAreaView>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#5e5e5e'
},
messageContainer: {
color: 'red'
}
})
But when send one new message at that time message will display separately sender and receiver format. how to differentiate those messages. I use react-native-gifted-chat. but not working properly. I am using react-native-gifted-chat and firebase.