stream-chat-react-native-core 5.32.0-beta.1 → 5.32.0-beta.3

package/src/components/Chat/Chat.tsx

@@ -27,8 +27,8 @@ import { SDK } from '../../native';
 import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DBSyncManager } from '../../utils/DBSyncManager';
+import type { Streami18n } from '../../utils/i18n/Streami18n';
 import { StreamChatRN } from '../../utils/StreamChatRN';
-import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
 init();

package/src/components/Chat/__tests__/Chat.test.js

@@ -10,7 +10,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../Chat';
 
 const ChatContextConsumer = ({ fn }) => {

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
@@ -8,7 +8,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Close } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { getDateString } from '../../../utils/getDateString';
+import { getDateString } from '../../../utils/i18n/getDateString';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -70,6 +70,7 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
     opacity: Animated.SharedValue<number>;
     visible: Animated.SharedValue<number>;
     photo?: Photo<StreamChatGenerics>;
+    /* Lookup key in the language corresponding translations sheet to perform date formatting */
   };
 
 export const ImageGalleryHeader = <
@@ -98,7 +99,16 @@ export const ImageGalleryHeader = <
   const { t, tDateTimeParser } = useTranslationContext();
   const { setOverlay } = useOverlayContext();
 
-  const date = getDateString({ calendar: true, date: photo?.created_at, tDateTimeParser });
+  const date = useMemo(
+    () =>
+      getDateString({
+        date: photo?.created_at,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/ImageGalleryHeader',
+      }),
+    [photo?.created_at, t, tDateTimeParser],
+  );
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

package/src/components/Message/MessageSimple/MessageEditedTimestamp.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { MessageTimestamp, MessageTimestampProps } from './MessageTimestamp';
-
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
+import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { DefaultStreamChatGenerics } from '../../../types/types';
@@ -14,14 +13,15 @@ import { isEditedMessage } from '../../../utils/utils';
 
 export type MessageEditedTimestampProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>> & MessageTimestampProps;
+> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>> &
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'MessageTimestamp'>>;
 
 export const MessageEditedTimestamp = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: MessageEditedTimestampProps<StreamChatGenerics>,
 ) => {
-  const { message: propMessage, timestamp } = props;
+  const { message: propMessage, MessageTimestamp } = props;
   const {
     theme: {
       colors: { grey },
@@ -41,7 +41,12 @@ export const MessageEditedTimestamp = <
   return (
     <View style={[styles.container, editedTimestampContainer]}>
       <Text style={[styles.text, { color: grey }, editedLabel]}>{t<string>('Edited') + ' '}</Text>
-      <MessageTimestamp calendar={true} timestamp={timestamp} />
+      {MessageTimestamp && (
+        <MessageTimestamp
+          timestamp={message.message_text_updated_at}
+          timestampTranslationKey='timestamp/MessageEditedTimestamp'
+        />
+      )}
     </View>
   );
 };

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -5,8 +5,6 @@ import type { Attachment } from 'stream-chat';
 
 import type { MessageStatusProps } from './MessageStatus';
 
-import { MessageTimestamp } from './MessageTimestamp';
-
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import {
   Alignment,
@@ -46,7 +44,10 @@ type MessageFooterPropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'deletedMessagesVisibilityType' | 'MessageEditedTimestamp' | 'MessageStatus'
+    | 'deletedMessagesVisibilityType'
+    | 'MessageEditedTimestamp'
+    | 'MessageStatus'
+    | 'MessageTimestamp'
   > &
   MessageFooterComponentProps;
 
@@ -98,6 +99,7 @@ const MessageFooterWithContext = <
     message,
     MessageEditedTimestamp,
     MessageStatus,
+    MessageTimestamp,
     otherAttachments,
     showMessageStatus,
   } = props;
@@ -118,7 +120,7 @@ const MessageFooterWithContext = <
         {deletedMessagesVisibilityType === 'sender' && (
           <OnlyVisibleToYouComponent alignment={alignment} />
         )}
-        <MessageTimestamp format='LT' formattedDate={formattedDate} timestamp={date} />
+        <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
       </View>
     );
   }
@@ -137,7 +139,7 @@ const MessageFooterWithContext = <
           <Text style={[styles.text, { color: grey }, messageUser]}>{message.user.name}</Text>
         ) : null}
         {showMessageStatus && <MessageStatus />}
-        <MessageTimestamp format='LT' formattedDate={formattedDate} timestamp={date} />
+        <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
 
         {isEditedMessage(message) && !isEditedMessageOpen && (
           <>
@@ -160,7 +162,7 @@ const MessageFooterWithContext = <
         )}
       </View>
       {isEditedMessageOpen && (
-        <MessageEditedTimestamp format='LT' timestamp={message.message_text_updated_at} />
+        <MessageEditedTimestamp message={message} MessageTimestamp={MessageTimestamp} />
       )}
     </>
   );
@@ -270,7 +272,7 @@ export const MessageFooter = <
     showMessageStatus,
   } = useMessageContext<StreamChatGenerics>();
 
-  const { deletedMessagesVisibilityType, MessageEditedTimestamp, MessageStatus } =
+  const { deletedMessagesVisibilityType, MessageEditedTimestamp, MessageStatus, MessageTimestamp } =
     useMessagesContext<StreamChatGenerics>();
 
   return (
@@ -284,6 +286,7 @@ export const MessageFooter = <
         message,
         MessageEditedTimestamp,
         MessageStatus,
+        MessageTimestamp,
         otherAttachments,
         showMessageStatus,
       }}

package/src/components/Message/MessageSimple/MessageTimestamp.tsx

@@ -1,27 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
-  TDateTimeParserInput,
   TranslationContextValue,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
-import { getDateString } from '../../../utils/getDateString';
+import { getDateString } from '../../../utils/i18n/getDateString';
 
 export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
-  /**
-   * Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
-   */
-  calendar?: boolean;
-  /**
-   * The format in which the date should be displayed.
-   */
-  format?: string;
-  /**
-   * A function to format the date.
-   */
-  formatDate?: (date: TDateTimeParserInput) => string;
   /**
    * Already Formatted date
    */
@@ -30,17 +17,21 @@ export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDate
    * The timestamp of the message.
    */
   timestamp?: string | Date;
+  /*
+   * Lookup key in the language corresponding translations sheet to perform date formatting
+   */
+  timestampTranslationKey?: string;
 };
 
 export const MessageTimestamp = (props: MessageTimestampProps) => {
   const {
-    calendar,
-    format,
-    formatDate,
     formattedDate,
     tDateTimeParser: propsTDateTimeParser,
     timestamp,
+    timestampTranslationKey = 'timestamp/MessageTimestamp',
   } = props;
+  const { t, tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+  const tDateTimeParser = propsTDateTimeParser || contextTDateTimeParser;
 
   const {
     theme: {
@@ -50,7 +41,17 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
       },
     },
   } = useTheme();
-  const { tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: timestamp,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [timestamp, t, tDateTimeParser, timestampTranslationKey],
+  );
 
   if (formattedDate) {
     return (
@@ -58,16 +59,6 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
     );
   }
 
-  if (!timestamp) return null;
-
-  const dateString = getDateString({
-    calendar,
-    date: timestamp,
-    format,
-    formatDate,
-    tDateTimeParser: propsTDateTimeParser || contextTDateTimeParser,
-  });
-
   if (!dateString) return null;
 
   return <Text style={[styles.text, { color: grey }, timestampText]}>{dateString.toString()}</Text>;

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -5,7 +5,7 @@ import { cleanup, render, waitFor } from '@testing-library/react-native';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import { Streami18n } from '../../../../utils/Streami18n';
+import { Streami18n } from '../../../../utils/i18n/Streami18n';
 import { Chat } from '../../../Chat/Chat';
 import { MessageStatus } from '../MessageStatus';
 

package/src/components/MessageList/DateHeader.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 });
 
 export type DateHeaderProps = {
-  dateString: string | number;
+  dateString?: string | number;
 };
 
 export const DateHeader = ({ dateString }: DateHeaderProps) => {

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { getDateString } from '../../utils/getDateString';
+import { getDateString } from '../../utils/i18n/getDateString';
 
 const styles = StyleSheet.create({
   container: {
@@ -22,7 +22,13 @@ const styles = StyleSheet.create({
   },
 });
 
+/**
+ * Props for the `InlineDateSeparator` component.
+ */
 export type InlineDateSeparatorProps = {
+  /**
+   * Date to be displayed.
+   */
   date?: Date;
 };
 
@@ -33,19 +39,18 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
       inlineDateSeparator: { container, text },
     },
   } = useTheme();
-  const { tDateTimeParser } = useTranslationContext();
-
-  if (!date) {
-    return null;
-  }
-
-  const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-
-  const dateString = getDateString({
-    date,
-    format: dateFormat,
-    tDateTimeParser,
-  });
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/InlineDateSeparator',
+      }),
+    [date, t, tDateTimeParser],
+  );
 
   return (
     <View

package/src/components/MessageList/MessageList.tsx

@@ -51,13 +51,8 @@ import {
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getDateString } from '../../utils/getDateString';
 
 const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -156,8 +151,7 @@ type MessageListPropsWithContext<
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> &
-  Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
+  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.
@@ -278,7 +272,6 @@ const MessageListWithContext = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    tDateTimeParser,
     thread,
     threadList = false,
     TypingIndicator,
@@ -1025,18 +1018,6 @@ const MessageListWithContext = <
     threadList,
   ]);
 
-  const stickyHeaderDateFormat =
-    stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-
-  const stickyHeaderDateString = useMemo(() => {
-    if (!stickyHeaderDate) return null;
-    return getDateString({
-      date: stickyHeaderDate,
-      format: stickyHeaderDateFormat,
-      tDateTimeParser,
-    });
-  }, [stickyHeaderDate, stickyHeaderDateFormat]);
-
   const dismissImagePicker = () => {
     if (!hasMoved && selectedPicker) {
       setSelectedPicker(undefined);
@@ -1092,13 +1073,6 @@ const MessageListWithContext = <
     [shouldApplyAndroidWorkaround, HeaderComponent],
   );
 
-  const StickyHeaderComponent = () => {
-    if (!stickyHeaderDateString) return null;
-    if (StickyHeader) return <StickyHeader dateString={stickyHeaderDateString} />;
-    if (messageListLengthAfterUpdate) return <DateHeader dateString={stickyHeaderDateString} />;
-    return null;
-  };
-
   // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
   let additionalFlatListPropsExcludingStyle:
     | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
@@ -1183,7 +1157,9 @@ const MessageListWithContext = <
       {!loading && (
         <>
           <View style={styles.stickyHeader}>
-            <StickyHeaderComponent />
+            {messageListLengthAfterUpdate && StickyHeader && (
+              <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+            )}
           </View>
           {!disableTypingIndicator && TypingIndicator && (
             <TypingIndicatorContainer>
@@ -1253,7 +1229,6 @@ export const MessageList = <
     usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
-  const { t, tDateTimeParser } = useTranslationContext();
 
   return (
     <MessageListWithContext
@@ -1295,9 +1270,7 @@ export const MessageList = <
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,
-        t,
         targetedMessage,
-        tDateTimeParser,
         thread,
         threadList,
         TypingIndicator,

package/src/components/MessageList/MessageSystem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import type { MessageType } from './hooks/useMessageList';
@@ -7,14 +7,20 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getDateString } from '../../utils/getDateString';
+import { getDateString } from '../../utils/i18n/getDateString';
 
 export type MessageSystemProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: MessageType<StreamChatGenerics>;
+  /**
+   * Additional styles for the system message container.
+   */
   style?: StyleProp<ViewStyle>;
+  /*
+   * Lookup key in the language corresponding translations sheet to perform date formatting
+   */
 };
 
 /**
@@ -37,14 +43,20 @@ export const MessageSystem = <
       },
     },
   } = useTheme();
-  const { tDateTimeParser } = useTranslationContext();
+  const { t, tDateTimeParser } = useTranslationContext();
 
   const createdAt = message.created_at;
-  const formattedDate = getDateString({
-    calendar: true,
-    date: createdAt,
-    tDateTimeParser,
-  });
+
+  const formattedDate = useMemo(
+    () =>
+      getDateString({
+        date: createdAt,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/MessageSystem',
+      }),
+    [createdAt, t, tDateTimeParser],
+  );
 
   return (
     <View style={[styles.container, style, container]} testID='message-system'>

package/src/components/MessageList/StickyHeader.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+
+import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { DefaultStreamChatGenerics } from '../../types/types';
+import { getDateString } from '../../utils/i18n/getDateString';
+
+/**
+ * Props for the StickyHeader component.
+ */
+export type StickyHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'DateHeader'> & {
+  /**
+   * Date to be displayed in the sticky header.
+   */
+  date?: Date;
+  /**
+   * The formatted date string to be displayed in the sticky header.
+   */
+  dateString?: string | number;
+};
+
+export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps) => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  const stickyHeaderDateString = useMemo(() => {
+    if (dateString) return dateString;
+
+    return getDateString({
+      date,
+      t,
+      tDateTimeParser,
+      timestampTranslationKey: 'timestamp/StickyHeader',
+    });
+  }, [date]);
+
+  if (!date) return null;
+
+  return <DateHeader dateString={stickyHeaderDateString} />;
+};

package/src/components/MessageList/__tests__/MessageSystem.test.js

@@ -8,14 +8,20 @@ import { TranslationProvider } from '../../../contexts/translationContext/Transl
 
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { MessageSystem } from '../MessageSystem';
 
 afterEach(cleanup);
 
+let i18nInstance;
+
 describe('MessageSystem', () => {
+  beforeAll(() => {
+    i18nInstance = new Streami18n();
+  });
+  afterEach(cleanup);
+
   it('should render the message system', async () => {
-    const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
     const message = generateMessage();
     const { queryByTestId } = render(
@@ -32,7 +38,6 @@ describe('MessageSystem', () => {
   });
 
   it('should match the snapshot for message system', async () => {
-    const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
     const user = generateStaticUser(0);
     const message = generateStaticMessage('Hello World', { user });

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -4,7 +4,7 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-nati
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
 
 afterEach(cleanup);

package/src/components/MessageList/__tests__/TypingIndicator.test.js

@@ -7,7 +7,7 @@ import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../../Chat/Chat';
 import { TypingIndicator } from '../TypingIndicator';
 

package/src/components/Thread/__tests__/Thread.test.js

@@ -15,7 +15,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { Thread } from '../Thread';

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1197,7 +1197,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   ]
                 }
               >
-                May 5, 2020
+                05/05/2020
               </Text>
             </View>
           </View>

package/src/components/index.ts

@@ -108,6 +108,7 @@ export * from './Message/MessageSimple/MessageRepliesAvatars';
 export * from './Message/MessageSimple/MessageSimple';
 export * from './Message/MessageSimple/MessageStatus';
 export * from './Message/MessageSimple/MessageTextContainer';
+export * from './Message/MessageSimple/MessageTimestamp';
 export * from './Message/MessageSimple/ReactionList';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';

package/src/contexts/channelContext/ChannelContext.tsx

@@ -4,6 +4,7 @@ import type { Channel, ChannelState } from 'stream-chat';
 
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
+import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -180,7 +181,7 @@ export type ChannelContextValue<
    *
    * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    */
-  StickyHeader?: React.ComponentType<{ dateString: string | number }>;
+  StickyHeader?: React.ComponentType<StickyHeaderProps>;
   /**
    * Id of message, around which Channel/MessageList gets loaded when opened.
    * You will see a highlighted background for targetted message, when opened.

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -33,6 +33,7 @@ import type { MessageRepliesAvatarsProps } from '../../components/Message/Messag
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
 import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
+import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
 import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
@@ -217,6 +218,11 @@ export type MessagesContextValue<
    * Defaults to: [MessageSystem](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-system/)
    */
   MessageSystem: React.ComponentType<MessageSystemProps<StreamChatGenerics>>;
+  /**
+   * UI component for MessageTimestamp
+   * Defaults to: [MessageTimestamp](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageTimestamp.tsx)
+   */
+  MessageTimestamp: React.ComponentType<MessageTimestampProps>;
   /**
    * UI component for OverlayReactionList
    */