Inline date separator applied

3 files changed, 36 insertions, 19 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/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index c89e033d..8e27731a 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -12,6 +12,8 @@ import {
   useAttachmentPickerContext,
   Theme,
   useMessageContext,
+  isDayOrMoment,
+  useTranslationContext,
 } from 'stream-chat-react-native';
 import moment from 'moment';
 import {ChatContext} from '../../App';
@@ -129,7 +131,20 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
-  const DateHeader = ({dateString}) => {
+  const DateHeader = ({date}) => {
+    const {tDateTimeParser} = useTranslationContext();
+
+    if (!date) {
+      return null;
+    }
+
+    const dateFormat =
+      date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
+    const tDate = tDateTimeParser(date);
+    const dateString = isDayOrMoment(tDate)
+      ? tDate.format(dateFormat)
+      : new Date(tDate).toDateString();
+
     var dateMoment = moment(dateString);
     var printDate = '';
 
@@ -237,8 +252,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
               titleStyle: deleteMessage?.titleStyle, // StyleProp<TextStyle> | Optional
             },
           ]}
+          InlineDateSeparator={DateHeader}
           MessageFooter={MessageFooter}
-          DateHeader={DateHeader}
           TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}
           MessageAvatar={MessageAvatar}>
@@ -261,6 +276,8 @@ const styles = StyleSheet.create({
     color: '#7A7A7A',
     fontWeight: '600',
     fontSize: normalize(11),
+    textAlign: 'center',
+    marginVertical: '5%',
   },
 });
 
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"