From 5c1562af9566c4f5762fd9f12161dd7fc08c500b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 21:19:01 -0700 Subject: Inline date separator applied --- src/screens/chat/ChatScreen.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'src') 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 = () => { 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 = () => { titleStyle: deleteMessage?.titleStyle, // StyleProp | 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%', }, }); -- cgit v1.2.3-70-g09d2