GetStream · khushal87 · May 15, 2024 · May 14, 2024 · May 14, 2024 · May 14, 2024
diff --git a/...tnative/common-content/ui-components/channel/props/message-edited-timestamp.mdx b/...tnative/common-content/ui-components/channel/props/message-edited-timestamp.mdx
@@ -0,0 +1,5 @@
+Component to render message edited label in message when the message is clicked, within [`MessageList`](../../../../ui-components/message-list.mdx). This component is only rendered for messages from other users.
+
+| Type          | Default                                                                                                                                                                |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageEditedTimestamp`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageEditedTimestamp.tsx) |
diff --git a/docusaurus/docs/reactnative/contexts/messages-context.mdx b/docusaurus/docs/reactnative/contexts/messages-context.mdx
@@ -47,6 +47,7 @@ import MessageContent from '../common-content/ui-components/channel/props/messag
 import MessageActions from '../common-content/ui-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/ui-components/channel/props/message_content_order.mdx';
 import MessageDeleted from '../common-content/ui-components/channel/props/message-deleted.mdx';
+import MessageEditedTimestamp from '../common-content/ui-components/channel/props/message-edited-timestamp.mdx';
 import MessageError from '../common-content/ui-components/channel/props/message-error.mdx';
 import MessageFooter from '../common-content/ui-components/channel/props/message-footer.mdx';
 import MessageHeader from '../common-content/ui-components/channel/props/message-header.mdx';
@@ -337,6 +338,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <MessageDeleted />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageeditedtimestamp)_ props</div> MessageEditedTimestamp {#messageeditedtimestamp}
+
+<MessageEditedTimestamp />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageerror)_ props</div> MessageError {#messageerror}
 
 <MessageError />

diff --git a/docusaurus/docs/reactnative/core-components/channel.mdx b/docusaurus/docs/reactnative/core-components/channel.mdx
@@ -104,6 +104,7 @@ import MessageContent from '../common-content/ui-components/channel/props/messag
 import MessageActions from '../common-content/ui-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/ui-components/channel/props/message_content_order.mdx';
 import MessageDeleted from '../common-content/ui-components/channel/props/message-deleted.mdx';
+import MessageEditedTimestamp from '../common-content/ui-components/channel/props/message-edited-timestamp.mdx';
 import MessageError from '../common-content/ui-components/channel/props/message-error.mdx';
 import MessageFooter from '../common-content/ui-components/channel/props/message-footer.mdx';
 import MessageHeader from '../common-content/ui-components/channel/props/message-header.mdx';
@@ -900,6 +901,10 @@ Component to render full screen error indicator, when channel fails to load.
 
 <MessageDeleted />
 
+### MessageEditedTimestamp
+
+<MessageEditedTimestamp />
+
 ### MessageError
 
 <MessageError />

diff --git a/docusaurus/docs/reactnative/guides/custom-message.mdx b/docusaurus/docs/reactnative/guides/custom-message.mdx
@@ -71,6 +71,8 @@ If you want to customize only a specific part of `MessageSimple` component, you
 - [MessageFooter](../../core-components/channel#messagefooter)
 - [MessageAvatar](../../core-components/channel#messageavatar)
 - [MessageBounce](../../core-components/channel#messagebounce)
+- [MessageDeleted](../../core-components/channel#messagedeleted)
+- [MessageEditedTimestamp](../../core-components/channel#messageeditedtimestamp)
 - [MessageStatus](../../core-components/channel#messagestatus)
 - [MessageText](../../core-components/channel#messagetext)
 - [MessageSystem](../../core-components/channel#messagesystem)

diff --git a/docusaurus/docs/reactnative/ui-components/message-deleted.mdx b/docusaurus/docs/reactnative/ui-components/message-deleted.mdx
@@ -11,7 +11,7 @@ This is the default component provided to the prop [`MessageDeleted`](../../core
 
 ## Props
 
-### <div class="label description required">required</div> `formattedDate`
+### <div class="label description required">required</div> `date`
 
 DateTime stamp to be shown in footer for deleted message.
 

diff --git a/docusaurus/docs/reactnative/ui-components/message-edited-timestamp.mdx b/docusaurus/docs/reactnative/ui-components/message-edited-timestamp.mdx
@@ -0,0 +1,48 @@
+---
+id: message-edited-timestamp
+title: MessageEditedTimestamp
+---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+
+Component to render message edited label in message when the message is clicked, within [`MessageList`](./message-list.mdx).
+
+This is the default component provided to the prop [`MessageEditedTimestamp`](../../core-components/channel#messageeditedtimestamp) on the `Channel` component.
+
+## Props
+
+### <div class="label description">_overrides the value from [MessageContext](../../contexts/message-context#message)_</div> `message` {#message}
+
+<MessageProp />
+
+### `calendar`
+
+Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
+
+| Type                   | Default     |
+| ---------------------- | ----------- |
+| `Boolean`\|`undefined` | `undefined` |
+
+### `format`
+
+Format of the date.
+
+| Type                  | Default     |
+| --------------------- | ----------- |
+| `String`\|`undefined` | `undefined` |
+
+### `formatDate`
+
+Function to format the date.
+
+| Type                    | Default     |
+| ----------------------- | ----------- |
+| `Function`\|`undefined` | `undefined` |
+
+### `timestamp`
+
+The date to be shown after formatting.
+
+| Type                          | Default     |
+| ----------------------------- | ----------- |
+| `String`\|`Date`\|`undefined` | `undefined` |
diff --git a/docusaurus/sidebars-react-native.json b/docusaurus/sidebars-react-native.json
@@ -79,6 +79,7 @@
           "ui-components/message-bounce",
           "ui-components/message-content",
           "ui-components/message-deleted",
+          "ui-components/message-edited-timestamp",
           "ui-components/message-error",
           "ui-components/message-footer",
           "ui-components/message-pinned-header",

diff --git a/package/expo-package/yarn.lock b/package/expo-package/yarn.lock
@@ -2929,10 +2929,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-stream-chat-react-native-core@5.28.1:
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.1.tgz#9bde6c2af43a24e8a5c9d4ca35da19ccef95cb34"
-  integrity sha512-+vsLbqFmxm6Xyt4U3f2zfNvTTB9cXWTk8gyyw4b2RJ2qMZ/8wuN/luS5xwKdNbBZZCuaDlwuJpWE/x5/ERbpWg==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"

diff --git a/package/native-package/yarn.lock b/package/native-package/yarn.lock
@@ -4237,10 +4237,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.28.1:
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.1.tgz#9bde6c2af43a24e8a5c9d4ca35da19ccef95cb34"
-  integrity sha512-+vsLbqFmxm6Xyt4U3f2zfNvTTB9cXWTk8gyyw4b2RJ2qMZ/8wuN/luS5xwKdNbBZZCuaDlwuJpWE/x5/ERbpWg==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"

diff --git a/package/package.json b/package/package.json
@@ -78,7 +78,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.17.0"
+    "stream-chat": "8.21.0"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",

diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -118,6 +118,7 @@ import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
 import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
 import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
+import { MessageEditedTimestamp as MessageEditedTimestampDefault } from '../Message/MessageSimple/MessageEditedTimestamp';
 import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
 import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
@@ -262,7 +263,6 @@ export type ChannelPropsWithContext<
       | 'FileAttachmentGroup'
       | 'FlatList'
       | 'forceAlignMessages'
-      | 'formatDate'
       | 'Gallery'
       | 'getMessagesGroupStyles'
       | 'Giphy'
@@ -292,6 +292,7 @@ export type ChannelPropsWithContext<
       | 'MessageContent'
       | 'messageContentOrder'
       | 'MessageDeleted'
+      | 'MessageEditedTimestamp'
       | 'MessageError'
       | 'MessageFooter'
       | 'MessageHeader'
@@ -469,7 +470,6 @@ const ChannelWithContext = <
     FileUploadPreview = FileUploadPreviewDefault,
     FlatList = FlatListDefault,
     forceAlignMessages,
-    formatDate,
     Gallery = GalleryDefault,
     getMessagesGroupStyles,
     Giphy = GiphyDefault,
@@ -527,6 +527,7 @@ const ChannelWithContext = <
     MessageContent = MessageContentDefault,
     messageContentOrder = ['quoted_reply', 'gallery', 'files', 'text', 'attachments'],
     MessageDeleted = MessageDeletedDefault,
+    MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
     MessageFooter = MessageFooterDefault,
     MessageHeader,
@@ -2295,7 +2296,6 @@ const ChannelWithContext = <
     FileAttachmentIcon,
     FlatList,
     forceAlignMessages,
-    formatDate,
     Gallery,
     getMessagesGroupStyles,
     Giphy,
@@ -2326,6 +2326,7 @@ const ChannelWithContext = <
     MessageContent,
     messageContentOrder,
     MessageDeleted,
+    MessageEditedTimestamp,
     MessageError,
     MessageFooter,
     MessageHeader,

diff --git a/package/src/components/Channel/hooks/useCreateMessagesContext.ts b/package/src/components/Channel/hooks/useCreateMessagesContext.ts
@@ -27,7 +27,6 @@ export const useCreateMessagesContext = <
   FileAttachmentIcon,
   FlatList,
   forceAlignMessages,
-  formatDate,
   Gallery,
   getMessagesGroupStyles,
   Giphy,
@@ -58,6 +57,7 @@ export const useCreateMessagesContext = <
   MessageContent,
   messageContentOrder,
   MessageDeleted,
+  MessageEditedTimestamp,
   MessageError,
   MessageFooter,
   MessageHeader,
@@ -123,7 +123,6 @@ export const useCreateMessagesContext = <
       FileAttachmentIcon,
       FlatList,
       forceAlignMessages,
-      formatDate,
       Gallery,
       getMessagesGroupStyles,
       Giphy,
@@ -154,6 +153,7 @@ export const useCreateMessagesContext = <
       MessageContent,
       messageContentOrder,
       MessageDeleted,
+      MessageEditedTimestamp,
       MessageError,
       MessageFooter,
       MessageHeader,

diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -4,14 +4,11 @@ import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-nati
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import {
-  isDayOrMoment,
-  TDateTimeParserOutput,
-  useTranslationContext,
-} from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { getDateString } from '../../../utils/getDateString';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -101,32 +98,7 @@ export const ImageGalleryHeader = <
   const { t, tDateTimeParser } = useTranslationContext();
   const { setOverlay } = useOverlayContext();
 
-  const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
-
-  /**
-   * .calendar and .fromNow can be initialized after the first render,
-   * and attempting to access them at that time will cause an error
-   * to be thrown.
-   *
-   * This falls back to null if neither exist.
-   */
-  const getDateObject = (date: TDateTimeParserOutput | null) => {
-    if (date === null || !isDayOrMoment(date)) {
-      return null;
-    }
-
-    if (date.calendar) {
-      return date.calendar();
-    }
-
-    if (date.fromNow) {
-      return date.fromNow();
-    }
-
-    return null;
-  };
-
-  const date = getDateObject(parsedDate);
+  const date = getDateString({ calendar: true, date: photo?.created_at, tDateTimeParser });
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -48,6 +48,7 @@ import {
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
+  isEditedMessage,
   MessageStatusTypes,
 } from '../../utils/utils';
 
@@ -233,6 +234,7 @@ const MessageWithContext = <
   props: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
+  const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
   const isMessageTypeDeleted = props.message.type === 'deleted';
 
   const {
@@ -334,6 +336,9 @@ const MessageWithContext = <
     if (dismissKeyboardOnMessageTouch) {
       Keyboard.dismiss();
     }
+    if (isEditedMessage(message)) {
+      setIsEditedMessageOpen((prevState) => !prevState);
+    }
     const quotedMessage = message.quoted_message as MessageType<StreamChatGenerics>;
     if (error) {
       /**
@@ -677,6 +682,7 @@ const MessageWithContext = <
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
+    isEditedMessageOpen,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     lastReceivedId,
@@ -727,6 +733,7 @@ const MessageWithContext = <
     otherAttachments: attachments.other,
     preventPress,
     reactions,
+    setIsEditedMessageOpen,
     showAvatar,
     showMessageOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,