Skip to content

Commit 29d9d68

Browse files
fixes time showing incorrectly on messages. now it displays date and time in the user's timezone, in the style "April 16, 2025 12:39 PM". This is a bit clunky but we'll soon simplify it with the introduction of floating date markers on mobile. (#2798)
1 parent 9e726d7 commit 29d9d68

1 file changed

Lines changed: 16 additions & 1 deletion

File tree

packages/mobile/src/components/Message/Message.component.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Markdown, { MarkdownIt, ASTNode } from '@ronradtke/react-native-markdown-
1414
import { defaultTheme } from '../../styles/themes/default.theme'
1515
import UserLabel from '../UserLabel/UserLabel.component'
1616
import { UserLabelType } from '../UserLabel/UserLabel.types'
17+
import { DateTime } from 'luxon'
1718

1819
const MessageProfilePhoto: React.FC<{ message: DisplayableMessage }> = ({ message }) => {
1920
const imgStyle = {
@@ -115,6 +116,20 @@ export const Message: FC<MessageProps & FileActionsProps> = ({
115116

116117
const representativeMessage = data[0]
117118

119+
const formatDateTime = (createdAt: number): string => {
120+
// get timezone offset from native Date, for correct local timezone
121+
const tzOffsetHours = -new Date().getTimezoneOffset() / 60
122+
const formattedOffset = `UTC${tzOffsetHours >= 0 ? '+' : ''}${tzOffsetHours}`
123+
124+
const messageTime = DateTime.fromSeconds(createdAt).setZone(formattedOffset)
125+
const now = DateTime.now().setZone(formattedOffset)
126+
127+
// Use DateTime.DATETIME_MED to properly respect locale settings including 12h/24h preference
128+
return messageTime.toLocaleString(DateTime.DATETIME_MED)
129+
}
130+
131+
const representativeMessageDateTime = formatDateTime(representativeMessage.createdAt)
132+
118133
const info = representativeMessage.type === MessageType.Info
119134
const pending: boolean = pendingMessages?.[representativeMessage.id] !== undefined
120135

@@ -177,7 +192,7 @@ export const Message: FC<MessageProps & FileActionsProps> = ({
177192
}}
178193
>
179194
<Typography fontSize={14} color={'subtitle'}>
180-
{representativeMessage.date}
195+
{representativeMessageDateTime}
181196
</Typography>
182197
</View>
183198
</View>

0 commit comments

Comments
 (0)