diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index f8f5197ca4..066e20eb6a 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -1,5 +1,11 @@
-import React, {useCallback, useMemo, useRef} from 'react'
-import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
+import {
+ LayoutAnimation,
+ Pressable,
+ StyleProp,
+ TextStyle,
+ View,
+} from 'react-native'
import {ChatBskyConvoDefs} from '@atproto-labs/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -24,14 +30,24 @@ export let MessageItem = ({
}): React.ReactNode => {
const t = useTheme()
const {currentAccount} = useSession()
+ const [hasBeenPressed, setHasBeenPressed] = useState(false)
const isFromSelf = item.sender?.did === currentAccount?.did
+ const handlePress = useCallback(() => {
+ setHasBeenPressed(p => !p)
+ }, [])
+
const isNextFromSelf =
ChatBskyConvoDefs.isMessageView(next) &&
next.sender?.did === currentAccount?.did
const isLastInGroup = useMemo(() => {
+ // override showing date if the message has been pressed
+ if (hasBeenPressed) {
+ return true
+ }
+
// TODO this means it's a placeholder. Let's figure out the right way to do this though!
if (item.id.length > 13) {
return false
@@ -54,7 +70,14 @@ export let MessageItem = ({
}
return true
- }, [item, next, isFromSelf, isNextFromSelf])
+ }, [
+ hasBeenPressed,
+ item.id.length,
+ item.sentAt,
+ isFromSelf,
+ isNextFromSelf,
+ next,
+ ])
const lastInGroupRef = useRef(isLastInGroup)
if (lastInGroupRef.current !== isLastInGroup) {
@@ -68,35 +91,40 @@ export let MessageItem = ({
return (
-
-
+
- {item.text}
-
-
+
+ {item.text}
+
+
+