aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json8
-rw-r--r--src/assets/icons/messages/delivered_icon.pngbin0 -> 65998 bytes
-rw-r--r--src/assets/icons/messages/read_icon.pngbin0 -> 65884 bytes
-rw-r--r--src/assets/icons/messages/sent_icon.pngbin0 -> 56234 bytes
-rw-r--r--src/components/messages/DateHeader.tsx28
-rw-r--r--src/components/messages/MessageFooter.tsx75
-rw-r--r--src/components/messages/index.ts2
-rw-r--r--src/screens/chat/ChatScreen.tsx27
-rw-r--r--src/utils/messages.ts25
-rw-r--r--yarn.lock26
10 files changed, 174 insertions, 17 deletions
diff --git a/package.json b/package.json
index 07407eff..b9362818 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"@react-navigation/native": "^5.6.1",
"@react-navigation/stack": "^5.6.2",
"@reduxjs/toolkit": "^1.4.0",
- "@stream-io/flat-list-mvcp": "^0.0.9",
+ "@stream-io/flat-list-mvcp": "^0.10.1",
"@types/react-native-vector-icons": "^6.4.5",
"moment": "^2.29.1",
"react": "16.13.1",
@@ -58,8 +58,8 @@
"react-redux": "^7.2.2",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"rn-fetch-blob": "^0.12.0",
- "stream-chat-react-native": "^3.2.0",
- "stream-chat-react-native-core": "^3.2.0"
+ "stream-chat-react-native": "^3.3.3",
+ "stream-chat-react-native-core": "^3.3.3"
},
"devDependencies": {
"@babel/core": "^7.6.2",
@@ -99,4 +99,4 @@
"./node_modules/react-native-gesture-handler/jestSetup.js"
]
}
-} \ No newline at end of file
+}
diff --git a/src/assets/icons/messages/delivered_icon.png b/src/assets/icons/messages/delivered_icon.png
new file mode 100644
index 00000000..0afa7e90
--- /dev/null
+++ b/src/assets/icons/messages/delivered_icon.png
Binary files differ
diff --git a/src/assets/icons/messages/read_icon.png b/src/assets/icons/messages/read_icon.png
new file mode 100644
index 00000000..a82b705d
--- /dev/null
+++ b/src/assets/icons/messages/read_icon.png
Binary files differ
diff --git a/src/assets/icons/messages/sent_icon.png b/src/assets/icons/messages/sent_icon.png
new file mode 100644
index 00000000..55988c78
--- /dev/null
+++ b/src/assets/icons/messages/sent_icon.png
Binary files differ
diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx
new file mode 100644
index 00000000..cc7dce2c
--- /dev/null
+++ b/src/components/messages/DateHeader.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {getFormatedDate, normalize} from '../../utils';
+
+interface DateHeaderProps {
+ date: object;
+}
+
+const DateHeader: React.FC<DateHeaderProps> = ({date}) => {
+ return (
+ <View style={styles.dateContainer}>
+ <Text style={styles.dateHeader}>{getFormatedDate(date)}</Text>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ dateHeader: {
+ color: '#7A7A7A',
+ fontWeight: '600',
+ fontSize: normalize(11),
+ textAlign: 'center',
+ marginVertical: '5%',
+ },
+ dateContainer: {backgroundColor: 'transparent'},
+});
+
+export default DateHeader;
diff --git a/src/components/messages/MessageFooter.tsx b/src/components/messages/MessageFooter.tsx
new file mode 100644
index 00000000..2ed8c6ed
--- /dev/null
+++ b/src/components/messages/MessageFooter.tsx
@@ -0,0 +1,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;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index d08e9454..b19067ca 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -5,3 +5,5 @@ export {default as ChatHeader} from './ChatHeader';
export {default as ChatInputSubmit} from './ChatInputSubmit';
export {default as MessageAvatar} from './MessageAvatar';
export {default as TypingIndicator} from './TypingIndicator';
+export {default as MessageFooter} from './MessageFooter';
+export {default as DateHeader} from './DateHeader';
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 656c1c47..57f2232e 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -16,7 +16,9 @@ import {ChatContext} from '../../App';
import {
ChatHeader,
ChatInput,
+ DateHeader,
MessageAvatar,
+ MessageFooter,
TabsGradient,
TypingIndicator,
} from '../../components';
@@ -37,6 +39,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
const {setTopInset} = useAttachmentPickerContext();
const insets = useSafeAreaInsets();
const chatTheme: DeepPartial<Theme> = {
+ colors: {
+ accent_blue: '#6EE7E7',
+ },
messageList: {
container: {
backgroundColor: 'white',
@@ -70,6 +75,24 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
flexDirection: 'row',
},
content: {
+ deletedContainer: {},
+ deletedContainerInner: {
+ borderColor: 'transparent',
+ borderBottomLeftRadius: 10,
+ borderTopLeftRadius: 10,
+ borderBottomRightRadius: 10,
+ borderTopRightRadius: 10,
+ },
+ deletedMetaText: {
+ paddingHorizontal: 10,
+ },
+ deletedText: {
+ em: {
+ fontSize: 15,
+ fontStyle: 'italic',
+ fontWeight: '400',
+ },
+ },
metaContainer: {
marginLeft: 5,
},
@@ -123,6 +146,10 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
copyMessage,
deleteMessage,
]}
+ InlineDateSeparator={DateHeader}
+ StickyHeader={() => null}
+ ScrollToBottomButton={() => null}
+ MessageFooter={MessageFooter}
TypingIndicator={TypingIndicator}
myMessageTheme={loggedInUsersMessageTheme}
MessageAvatar={MessageAvatar}>
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index f4215bf0..0e73f639 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -137,3 +137,28 @@ export const createChannel = async (
throw error;
}
};
+
+export const getFormatedDate = (date: object) => {
+ const dateMoment = moment(date).startOf('day');
+ let dateToRender = '';
+
+ const TODAY = moment().startOf('day');
+ const YESTERDAY = moment().subtract(1, 'day').startOf('day');
+ const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day');
+
+ if (TODAY.isSame(dateMoment)) {
+ dateToRender = 'Today';
+ } else if (YESTERDAY.isSame(dateMoment)) {
+ dateToRender = 'Yesterday';
+ } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) {
+ dateToRender = dateMoment.format('dddd');
+ } else {
+ if (dateMoment.get('year') === TODAY.get('year')) {
+ dateToRender = dateMoment.format('MMMM D') + 'th';
+ } else {
+ dateToRender =
+ dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year');
+ }
+ }
+ return dateToRender;
+};
diff --git a/yarn.lock b/yarn.lock
index ce906f2f..d129ab5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1110,10 +1110,10 @@
redux-thunk "^2.3.0"
reselect "^4.0.0"
-"@stream-io/flat-list-mvcp@^0.0.9":
- version "0.0.9"
- resolved "https://registry.yarnpkg.com/@stream-io/flat-list-mvcp/-/flat-list-mvcp-0.0.9.tgz#8dad59a93766376a7745deb4a45e50cf0c012a65"
- integrity sha512-tj9Y7bDlFqdiy4girVlvo1Euc0uiYHCQ2vhOjo1B+ChfGC3b5DBDu51OMJDKJyD+U9NP5F/XnV7tcr3k4aDjgg==
+"@stream-io/flat-list-mvcp@^0.10.1":
+ version "0.10.1"
+ resolved "https://registry.yarnpkg.com/@stream-io/flat-list-mvcp/-/flat-list-mvcp-0.10.1.tgz#ee7058c247729556959b19a281ae9e74e20f3e65"
+ integrity sha512-/snvyGqEO/7WKrcFOUxh1s1GPfYaUOwr7wyWgZogOUrGXE75zzEvOe39mooMoCJ8G92govZoAO5LCkftXQUoAQ==
dependencies:
lodash.debounce "^4.0.8"
@@ -7228,10 +7228,10 @@ stream-buffers@~2.2.0:
resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
-stream-chat-react-native-core@^3.2.0, stream-chat-react-native-core@v3.2.0:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-3.2.0.tgz#5b96c99a8f3f9819525d23cfb7ca8396d40f3b71"
- integrity sha512-Ud13eP/4GWALQeP9lm6UO4a1i1kkCEPXdzq6U0WB3z5Yqof/5AGzhuwv3gmNM2x8ruFQ6JZ3FOLRnFustczF4w==
+stream-chat-react-native-core@^3.3.3, stream-chat-react-native-core@v3.3.3:
+ version "3.3.3"
+ resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-3.3.3.tgz#751013e44ae401576091cd7ae793ccb3dae09cdb"
+ integrity sha512-zp9MlSx2a1ZotLfeEWxcQFRjqoBaD/J9yD6mYxcqaavltuYVv6GINal1/FAc0WkGC2Mq1x615yU/VNmg5HIY+Q==
dependencies:
"@babel/runtime" "7.12.13"
"@gorhom/bottom-sheet" "3.0.0-alpha.0"
@@ -7247,13 +7247,13 @@ stream-chat-react-native-core@^3.2.0, stream-chat-react-native-core@v3.2.0:
react-native-markdown-package "1.8.1"
stream-chat "3.6.2"
-stream-chat-react-native@^3.2.0:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/stream-chat-react-native/-/stream-chat-react-native-3.2.0.tgz#dfa898c9aeb512abfaccbd641d3ed6e7617983bc"
- integrity sha512-jYux/RmSQhXJ3q2YeNW2U1rXBtHWeub4F2GxH1TCNMSTrcKYO1LTYma5LXYLV2FzNnFsPD9jGQTSQ+fslUQeCA==
+stream-chat-react-native@^3.3.3:
+ version "3.3.3"
+ resolved "https://registry.yarnpkg.com/stream-chat-react-native/-/stream-chat-react-native-3.3.3.tgz#3c824ba85e60f9b330f9457b14fed000c1bb8cb9"
+ integrity sha512-ZfiYOalZSVYKF83JFGztUrWCU/vqqQPb1jEkC58yT/G4i8443NN7/nTjSnYmZF5nS3OwelasiIdgidLSy42y5A==
dependencies:
es6-symbol "^3.1.3"
- stream-chat-react-native-core v3.2.0
+ stream-chat-react-native-core v3.3.3
stream-chat@3.6.2:
version "3.6.2"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:14:38 +0000