1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import moment from 'moment';
import React from 'react';
import {normalize} from '../../utils';
import {useMessageContext} from 'stream-chat-react-native-core';
import {View, Text, Image, StyleSheet} from 'react-native';
const MessageFooter: React.FC = () => {
const message = useMessageContext();
if (message.message.type === 'deleted') {
return <></>;
} else {
const printTime = moment(message.message.created_at).format('h:mmA');
if (message.lastGroupMessage) {
return (
<View
style={[
message.isMyMessage ? styles.userMessage : styles.userXMessage,
styles.generalMessage,
]}>
{readReceipts(message)}
<Text style={styles.time}>{printTime}</Text>
</View>
);
} else {
return <></>;
}
}
};
const readReceipts = (message) => {
const readByLocal = message.message.readBy;
if (message.isMyMessage) {
if (readByLocal) {
return (
<Image
source={require('../../assets/icons/messages/read_icon.png')}
style={styles.icon}
/>
);
} else if (message.message.status === 'received') {
return (
<Image
source={require('../../assets/icons/messages/delivered_icon.png')}
style={styles.icon}
/>
);
} else if (message.message.status === 'sending') {
return (
<Image
source={require('../../assets/icons/messages/sent_icon.png')}
style={styles.icon}
/>
);
} else {
return <></>;
}
}
};
export const styles = StyleSheet.create({
time: {
fontSize: normalize(11),
color: '#7A7A7A',
lineHeight: normalize(13),
},
userMessage: {
marginRight: 5,
},
userXMessage: {marginLeft: 5},
generalMessage: {marginTop: 4, flexDirection: 'row'},
icon: {width: 15, height: 15},
});
export default MessageFooter;
|
