From 47f97f404b3de5ef6ea7e338db378e7175ec5ebc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 13:26:24 -0700 Subject: dateHeader added --- src/screens/chat/ChatScreen.tsx | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) (limited to 'src') 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 = () => { 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 ( + + {printDate} + + ); + }; + return ( = () => { 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; -- cgit v1.2.3-70-g09d2