stream-chat-react-native-core 5.32.0-beta.2 → 5.32.0

package/lib/typescript/index.d.ts

@@ -1,3 +1,5 @@
+/** i18next polyfill to handle intl format for pluralization. For more info see https://www.i18next.com/misc/json-format#i-18-next-json-v4 */
+import 'intl-pluralrules';
 export * from './components';
 export * from './hooks';
 export { registerNativeHandlers, NetInfo, iOS14RefreshGallerySelection } from './native';
@@ -6,7 +8,7 @@ export * from './emoji-data';
 export * from './icons';
 export * from './types/types';
 export * from './utils/patchMessageTextCommand';
-export * from './utils/Streami18n';
+export * from './utils/i18n/Streami18n';
 export * from './utils/utils';
 export * from './utils/StreamChatRN';
 export { default as enTranslations } from './i18n/en.json';

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AACzF,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAE7B,cAAc,SAAS,CAAC;AAExB,cAAc,eAAe,CAAC;AAE9B,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,KAAK,gBAAgB,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,6IAA6I;AAC7I,OAAO,kBAAkB,CAAC;AAE1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AACzF,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAE7B,cAAc,SAAS,CAAC;AAExB,cAAc,eAAe,CAAC;AAE9B,cAAc,iCAAiC,CAAC;AAChD,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,KAAK,gBAAgB,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/lib/typescript/utils/{Streami18n.d.ts → i18n/Streami18n.d.ts}

@@ -1,8 +1,9 @@
 import Dayjs from 'dayjs';
 import { FallbackLng, TFunction } from 'i18next';
 import type moment from 'moment';
-import type { TDateTimeParser } from '../contexts/translationContext/TranslationContext';
-import enTranslations from '../i18n/en.json';
+import { CustomFormatters, PredefinedFormatters } from './predefinedFormatters';
+import type { TDateTimeParser } from '../../contexts/translationContext/TranslationContext';
+import enTranslations from '../../i18n/en.json';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/he';
@@ -20,12 +21,13 @@ import 'dayjs/locale/tr';
  * sure we don't mess up languages in other places in the app.
  */
 import 'dayjs/locale/en';
-import type { DefaultStreamChatGenerics } from '../types/types';
-type Options = {
+import type { DefaultStreamChatGenerics } from '../../types/types';
+type Streami18nOptions = {
     DateTimeParser?: typeof Dayjs | typeof moment;
     dayjsLocaleConfigForLanguage?: Partial<ILocale>;
     debug?: boolean;
     disableDateTimeTranslations?: boolean;
+    formatters?: Partial<PredefinedFormatters> & CustomFormatters;
     language?: string;
     logger?: (msg?: string) => void;
     translationsForLanguage?: Partial<typeof enTranslations>;
@@ -35,6 +37,7 @@ type I18NextConfig = {
     fallbackLng: false | FallbackLng;
     interpolation: {
         escapeValue: boolean;
+        formatSeparator: string;
     };
     keySeparator: false | string;
     lng: string;
@@ -71,6 +74,7 @@ export declare class Streami18n {
     logger: (msg?: string) => void;
     currentLanguage: string;
     DateTimeParser: typeof Dayjs | typeof moment;
+    formatters: PredefinedFormatters & CustomFormatters;
     isCustomDateTimeParser: boolean;
     i18nextConfig: I18NextConfig;
     /**
@@ -99,7 +103,7 @@ export declare class Streami18n {
      *
      * @param {*} options
      */
-    constructor(options?: Options, i18nextConfig?: Partial<I18NextConfig>);
+    constructor(options?: Streami18nOptions, i18nextConfig?: Partial<I18NextConfig>);
     /**
      * Initializes the i18next instance with configuration (which enables natural language as default keys)
      */
@@ -189,6 +193,13 @@ export declare class Streami18n {
                 Video: string;
                 You: string;
                 "You can't send messages in this channel": string;
+                "timestamp/ChannelPreviewStatus": string;
+                "timestamp/ImageGalleryHeader": string;
+                "timestamp/InlineDateSeparator": string;
+                "timestamp/MessageEditedTimestamp": string;
+                "timestamp/MessageSystem": string;
+                "timestamp/MessageTimestamp": string;
+                "timestamp/StickyHeader": string;
                 "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": string;
                 "{{ index }} of {{ photoLength }}": string;
                 "{{ replyCount }} Replies": string;

package/lib/typescript/utils/i18n/Streami18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Streami18n.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/Streami18n.ts"],"names":[],"mappings":"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"}

package/lib/typescript/utils/i18n/calendarFormats.d.ts

@@ -0,0 +1,14 @@
+type CalendarFormats = {
+    lastDay: string;
+    lastWeek: string;
+    nextDay: string;
+    nextWeek: string;
+    sameDay: string;
+    sameElse: string;
+};
+/**
+ * Calendar formats for different languages.
+ */
+export declare const calendarFormats: Record<string, CalendarFormats>;
+export {};
+//# sourceMappingURL=calendarFormats.d.ts.map

package/lib/typescript/utils/i18n/calendarFormats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendarFormats.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/calendarFormats.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAiG3D,CAAC"}

package/lib/typescript/utils/i18n/getDateString.d.ts

@@ -0,0 +1,16 @@
+import type { TimestampFormatterOptions } from './predefinedFormatters';
+import { TranslatorFunctions } from '../../contexts/translationContext/TranslationContext';
+type DateFormatterOptions = TimestampFormatterOptions & Partial<TranslatorFunctions> & {
+    /**
+     * The timestamp to be formatted.
+     */
+    date?: string | Date;
+    timestampTranslationKey?: string;
+};
+export declare const noParsingFunctionWarning = "MessageTimestamp was called but there is no datetime parsing function available";
+/**
+ * Utility function to format the date string.
+ */
+export declare function getDateString({ calendar, calendarFormats, date, format, t, tDateTimeParser, timestampTranslationKey, }: DateFormatterOptions): string | number | undefined;
+export {};
+//# sourceMappingURL=getDateString.d.ts.map

package/lib/typescript/utils/i18n/getDateString.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDateString.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/getDateString.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAEL,mBAAmB,EACpB,MAAM,sDAAsD,CAAC;AAE9D,KAAK,oBAAoB,GAAG,yBAAyB,GACnD,OAAO,CAAC,mBAAmB,CAAC,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAIrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEJ,eAAO,MAAM,wBAAwB,oFAC8C,CAAC;AAEpF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,MAAM,EACN,CAAC,EACD,eAAe,EACf,uBAAuB,GACxB,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CA0CpD"}

package/lib/typescript/utils/i18n/predefinedFormatters.d.ts

@@ -0,0 +1,13 @@
+import { Streami18n } from './Streami18n';
+export type TimestampFormatterOptions = {
+    calendar?: boolean | null;
+    calendarFormats?: Record<string, string>;
+    format?: string;
+};
+export type FormatterFactory<V> = (streamI18n: Streami18n) => (value: V, lng: string | undefined, options: Record<string, unknown>) => string;
+export type CustomFormatters = Record<string, FormatterFactory<any>>;
+export type PredefinedFormatters = {
+    timestampFormatter: FormatterFactory<string | Date>;
+};
+export declare const predefinedFormatters: PredefinedFormatters;
+//# sourceMappingURL=predefinedFormatters.d.ts.map

package/lib/typescript/utils/i18n/predefinedFormatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"predefinedFormatters.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/predefinedFormatters.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,MAAM,yBAAyB,GAAG;IAEtC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,UAAU,EAAE,UAAU,KACnB,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAKrF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,oBAAoB,GAAG;IACjC,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBAqClC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.32.0-beta.2",
+  "version": "5.32.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -70,7 +70,8 @@
     "@gorhom/bottom-sheet": "4.4.8",
     "dayjs": "1.10.5",
     "emoji-regex": "^10.3.0",
-    "i18next": "20.2.4",
+    "i18next": "^21.6.14",
+    "intl-pluralrules": "^2.0.1",
     "linkifyjs": "^4.1.1",
     "lodash-es": "4.17.21",
     "mime-types": "^2.1.34",

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -23,7 +23,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Channel } from '../../Channel/Channel';

package/src/components/Channel/Channel.tsx

@@ -127,6 +127,7 @@ import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimpl
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
+import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
@@ -156,6 +157,7 @@ import { MessageList as MessageListDefault } from '../MessageList/MessageList';
 import { MessageSystem as MessageSystemDefault } from '../MessageList/MessageSystem';
 import { NetworkDownIndicator as NetworkDownIndicatorDefault } from '../MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageList/ScrollToBottomButton';
+import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
 import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
@@ -305,6 +307,7 @@ export type ChannelPropsWithContext<
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
+      | 'MessageTimestamp'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
@@ -542,6 +545,7 @@ const ChannelWithContext = <
     MessageStatus = MessageStatusDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
+    MessageTimestamp = MessageTimestampDefault,
     MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
@@ -573,7 +577,7 @@ const ChannelWithContext = <
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
     StartAudioRecordingButton = AudioRecordingButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
-    StickyHeader,
+    StickyHeader = StickyHeaderDefault,
     supportedReactions = reactionData,
     t,
     thread: threadProps,
@@ -2328,6 +2332,7 @@ const ChannelWithContext = <
     MessageStatus,
     MessageSystem,
     MessageText,
+    MessageTimestamp,
     myMessageTheme,
     onLongPressMessage,
     onPressInMessage,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -69,6 +69,7 @@ export const useCreateMessagesContext = <
   MessageStatus,
   MessageSystem,
   MessageText,
+  MessageTimestamp,
   myMessageTheme,
   onLongPressMessage,
   onPressInMessage,
@@ -165,6 +166,7 @@ export const useCreateMessagesContext = <
       MessageStatus,
       MessageSystem,
       MessageText,
+      MessageTimestamp,
       myMessageTheme,
       onLongPressMessage,
       onPressInMessage,

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { ChannelPreviewProps } from './ChannelPreview';
@@ -6,9 +6,11 @@ import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMe
 import { MessageReadStatus } from './hooks/useLatestMessagePreview';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Check, CheckAll } from '../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getDateString } from '../../utils/i18n/getDateString';
 
 const styles = StyleSheet.create({
   date: {
@@ -35,6 +37,7 @@ export const ChannelPreviewStatus = <
   props: ChannelPreviewStatusProps<StreamChatGenerics>,
 ) => {
   const { formatLatestMessageDate, latestMessagePreview } = props;
+  const { t, tDateTimeParser } = useTranslationContext();
   const {
     theme: {
       channelPreview: { checkAllIcon, checkIcon, date },
@@ -44,6 +47,17 @@ export const ChannelPreviewStatus = <
 
   const created_at = latestMessagePreview.messageObject?.created_at;
   const latestMessageDate = created_at ? new Date(created_at) : new Date();
+
+  const formattedDate = useMemo(
+    () =>
+      getDateString({
+        date: created_at,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/ChannelPreviewStatus',
+      }),
+    [created_at, t, tDateTimeParser],
+  );
   const status = latestMessagePreview.status;
 
   return (
@@ -56,7 +70,7 @@ export const ChannelPreviewStatus = <
       <Text style={[styles.date, { color: grey }, date]}>
         {formatLatestMessageDate && latestMessageDate
           ? formatLatestMessageDate(latestMessageDate).toString()
-          : latestMessagePreview.created_at.toString()}
+          : formattedDate}
       </Text>
     </View>
   );

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -1,13 +1,10 @@
 import { useEffect, useState } from 'react';
 
+import { TFunction } from 'i18next';
 import type { Channel, ChannelState, MessageResponse, StreamChat, UserResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import {
-  isDayOrMoment,
-  TDateTimeParser,
-  useTranslationContext,
-} from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -21,13 +18,13 @@ type LatestMessage<
 export type LatestMessagePreview<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  created_at: string | number | Date;
   messageObject: LatestMessage<StreamChatGenerics> | undefined;
   previews: {
     bold: boolean;
     text: string;
   }[];
   status: number;
+  created_at?: string | Date;
 };
 
 const getMessageSenderName = <
@@ -131,22 +128,6 @@ const getLatestMessageDisplayText = <
   ];
 };
 
-const getLatestMessageDisplayDate = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: LatestMessage<StreamChatGenerics> | undefined,
-  tDateTimeParser: TDateTimeParser,
-) => {
-  const parserOutput = tDateTimeParser(message?.created_at);
-  if (isDayOrMoment(parserOutput)) {
-    if (parserOutput.isSame(new Date(), 'day')) {
-      return parserOutput.format('LT');
-    }
-    return parserOutput.format('L');
-  }
-  return parserOutput;
-};
-
 export enum MessageReadStatus {
   NOT_SENT_BY_CURRENT_USER = 0,
   UNREAD = 1,
@@ -190,13 +171,12 @@ const getLatestMessagePreview = <
   channel: Channel<StreamChatGenerics>;
   client: StreamChat<StreamChatGenerics>;
   readEvents: boolean;
-  t: (key: string) => string;
-  tDateTimeParser: TDateTimeParser;
+  t: TFunction;
   lastMessage?:
     | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
     | MessageResponse<StreamChatGenerics>;
 }) => {
-  const { channel, client, lastMessage, readEvents, t, tDateTimeParser } = params;
+  const { channel, client, lastMessage, readEvents, t } = params;
 
   const messages = channel.state.messages;
 
@@ -219,7 +199,7 @@ const getLatestMessagePreview = <
   const message = lastMessage !== undefined ? lastMessage : channelStateLastMessage;
 
   return {
-    created_at: getLatestMessageDisplayDate(message, tDateTimeParser),
+    created_at: message?.created_at,
     messageObject: message,
     previews: getLatestMessageDisplayText(channel, client, message, t),
     status: getLatestMessageReadStatus(channel, client, message, readEvents),
@@ -240,7 +220,7 @@ export const useLatestMessagePreview = <
   forceUpdate: number,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
-  const { t, tDateTimeParser } = useTranslationContext();
+  const { t } = useTranslationContext();
 
   const channelConfigExists = typeof channel?.getConfig === 'function';
 
@@ -286,7 +266,6 @@ export const useLatestMessagePreview = <
           lastMessage: translatedLastMessage,
           readEvents,
           t,
-          tDateTimeParser,
         }),
       ),
     [channelLastMessageString, forceUpdate, readEvents, readStatus],

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,
       }}