1 files changed, 37 insertions, 2 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index b21315b8..6a25797e 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,7 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext, useEffect} from 'react';
-import {StyleSheet} from 'react-native';
+import React, {useContext, useEffect, useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
   Channel,
@@ -12,6 +12,7 @@ import {
   useAttachmentPickerContext,
   Theme,
 } from 'stream-chat-react-native';
+import moment from 'moment';
 import {ChatContext} from '../../App';
 import {
   ChatHeader,
@@ -109,6 +110,34 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
+  const DateHeader = ({dateString}) => {
+    var dateMoment = moment(dateString);
+    var printDate = '';
+
+    const TODAY = moment();
+    const YESTERDAY = moment().subtract(1, 'day');
+    const LAST_6_DAYS = moment().subtract(6, 'day');
+
+    if (TODAY === dateMoment) {
+      printDate = 'Today';
+    } else if (YESTERDAY === dateMoment) {
+      printDate = 'Yesterday';
+    } else if (dateMoment.isBetween(LAST_6_DAYS, YESTERDAY)) {
+      printDate = dateMoment.format('dddd');
+    } else {
+      if (dateMoment.get('year') === 2000) {
+        printDate = dateMoment.format('MMMM D') + 'th';
+      } else {
+        printDate = dateMoment.format('MMMM D, YYYY') + 'th';
+      }
+    }
+    return (
+      <View style={{backgroundColor: 'transparent'}}>
+        <Text style={styles.dateHeader}>{printDate}</Text>
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -126,6 +155,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             copyMessage,
             deleteMessage,
           ]}
+          DateHeader={DateHeader}
           TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}
           MessageAvatar={MessageAvatar}>
@@ -144,6 +174,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
+  dateHeader: {
+    color: '#7A7A7A',
+    fontWeight: '600',
+    fontSize: normalize(11),
+  },
 });
 
 export default ChatScreen;