show message info on press

src/components/dms/MessageItem.tsx

@@ -1,5 +1,11 @@
-import React, {useCallback, useMemo, useRef} from 'react'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
-import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
+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,6 +91,10 @@ export let MessageItem = ({
   return (
     <View>
       <ActionsWrapper isFromSelf={isFromSelf} message={item}>
+        <Pressable
+          accessibilityRole="none"
+          accessibilityHint="Show message info"
+          onPress={handlePress}>
           <View
             style={[
               a.py_sm,
@@ -97,6 +124,7 @@ export let MessageItem = ({
               {item.text}
             </Text>
           </View>
+        </Pressable>
       </ActionsWrapper>
       <MessageItemMetadata
         message={item}