Inline date separator applied

1 files changed, 19 insertions, 2 deletions

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%',
   },
 });