stream-chat-react-native-core 9.0.0-beta.6 → 9.0.0-beta.8

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -4,7 +4,7 @@ import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
 import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
 
-import { isIosLimited, PhotoContentItemType } from './AttachmentMediaPicker';
+import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts

@@ -0,0 +1,10 @@
+import type { File } from '../../../../types/types';
+
+export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
+
+export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
+
+export type PhotoContentItemType = File | IosLimitedItemType;
+
+export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
+  'uri' in item && item.uri === IOS_LIMITED_DEEPLINK;

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -7,6 +7,11 @@ import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
 
 import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
 
+import {
+  AttachmentPickerGenericContent,
+  type AttachmentPickerContentProps,
+} from './AttachmentPickerGenericContent';
+
 import {
   useAttachmentPickerContext,
   useBottomSheetContext,
@@ -16,90 +21,9 @@ import {
 } from '../../../contexts';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, IconProps, PollThumbnail, Recorder } from '../../../icons';
+import { Camera, FilePickerIcon, PollThumbnail, Recorder } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
-import { Button } from '../../ui';
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: semantics.backgroundCoreElevation1,
-          paddingHorizontal: primitives.spacing2xl,
-          paddingBottom: primitives.spacing3xl,
-        },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-        text: {
-          fontSize: primitives.typographyFontSizeMd,
-          color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
-          textAlign: 'center',
-          maxWidth: 200,
-        },
-      }),
-    [semantics.backgroundCoreElevation1, semantics.textSecondary],
-  );
-};
-
-export type AttachmentPickerGenericContentProps = {
-  Icon: React.ComponentType<IconProps>;
-  onPress: () => void;
-  height?: number;
-  buttonText?: string;
-  description?: string;
-};
-
-export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
-  const { height, buttonText, Icon, description, onPress } = props;
-  const styles = useStyles();
-
-  const {
-    theme: {
-      semantics,
-      attachmentPicker: {
-        content: { container, text, infoContainer },
-      },
-    },
-  } = useTheme();
-
-  const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
-    [Icon, semantics.textTertiary],
-  );
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          height,
-        },
-        container,
-      ]}
-    >
-      <View style={[styles.infoContainer, infoContainer]}>
-        <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
-      </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
 
 const keyExtractor = (item: { id: string }) => item.id;
 
@@ -298,7 +222,7 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   );
 };
 
-export type AttachmentPickerContentProps = Pick<AttachmentPickerGenericContentProps, 'height'>;
+export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
 
 export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
   const { height } = props;

package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../../icons';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: semantics.backgroundCoreElevation1,
+          paddingHorizontal: primitives.spacing2xl,
+          paddingBottom: primitives.spacing3xl,
+        },
+        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        text: {
+          fontSize: primitives.typographyFontSizeMd,
+          color: semantics.textSecondary,
+          marginTop: 8,
+          marginHorizontal: 24,
+          textAlign: 'center',
+          maxWidth: 200,
+        },
+      }),
+    [semantics.backgroundCoreElevation1, semantics.textSecondary],
+  );
+};
+
+export type AttachmentPickerContentProps = {
+  height?: number;
+};
+
+export type AttachmentPickerGenericContentProps = AttachmentPickerContentProps & {
+  Icon: React.ComponentType<IconProps>;
+  onPress: () => void;
+  buttonText?: string;
+  description?: string;
+};
+
+export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
+  const { height, buttonText, Icon, description, onPress } = props;
+  const styles = useStyles();
+
+  const {
+    theme: {
+      semantics,
+      attachmentPicker: {
+        content: { container, text, infoContainer },
+      },
+    },
+  } = useTheme();
+
+  const ThemedIcon = useCallback(
+    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    [Icon, semantics.textTertiary],
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+        },
+        container,
+      ]}
+    >
+      <View style={[styles.infoContainer, infoContainer]}>
+        <ThemedIcon />
+        <Text style={[styles.text, text]}>{description}</Text>
+      </View>
+      <Button
+        variant={'secondary'}
+        type={'outline'}
+        size={'lg'}
+        label={buttonText}
+        onPress={onPress}
+      />
+    </View>
+  );
+};

package/src/components/Channel/Channel.tsx

@@ -215,13 +215,11 @@ import { emojis } from '../MessageMenu/emojis';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import {
-  MessageReactionPicker as MessageReactionPickerDefault,
-  toUnicodeScalarString,
-} from '../MessageMenu/MessageReactionPicker';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
 import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
+import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 export type MarkReadFunctionOptions = {

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

@@ -20,6 +20,7 @@ import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDel
 import dispatchChannelHiddenEvent from '../../../mock-builders/event/channelHidden';
 import dispatchChannelTruncatedEvent from '../../../mock-builders/event/channelTruncated';
 import dispatchChannelUpdatedEvent from '../../../mock-builders/event/channelUpdated';
+import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchNotificationAddedToChannelEvent from '../../../mock-builders/event/notificationAddedToChannel';
@@ -75,6 +76,11 @@ const ChannelListSwipeActionsProbe = () => {
   return <Text testID='swipe-actions-enabled'>{`${swipeActionsEnabled}`}</Text>;
 };
 
+const ChannelListRefreshingProbe = () => {
+  const { refreshing } = useChannelsContext();
+  return <Text testID='refreshing'>{`${refreshing}`}</Text>;
+};
+
 const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
 
 const ChannelListWithChannelPreview = () => {
@@ -805,6 +811,43 @@ describe('ChannelList', () => {
       });
     });
 
+    describe('connection.changed', () => {
+      it('should keep background reconnection refreshes debounced and out of pull-to-refresh UI', async () => {
+        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+        const deferredPromise = new DeferredPromise();
+        const dateNowSpy = jest.spyOn(Date, 'now');
+        dateNowSpy.mockReturnValueOnce(0);
+        dateNowSpy.mockReturnValue(6000);
+
+        render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} List={ChannelListRefreshingProbe} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+        });
+
+        chatClient.queryChannels = jest.fn(() => deferredPromise.promise);
+
+        act(() => dispatchConnectionChangedEvent(chatClient, false));
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        await waitFor(() => {
+          expect(chatClient.queryChannels).toHaveBeenCalled();
+        });
+
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        expect(chatClient.queryChannels).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+
+        deferredPromise.resolve([testChannel1]);
+        dateNowSpy.mockRestore();
+      });
+    });
+
     describe('channel.truncated', () => {
       it('should call the `onChannelTruncated` function prop, if provided', async () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -24,7 +24,7 @@ type Parameters = {
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
@@ -68,6 +68,7 @@ export const usePaginatedChannels = ({
     const hasUpdatedData =
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
+      queryType === 'backgroundRefresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),
@@ -129,7 +130,7 @@ export const usePaginatedChannels = ({
     setActiveQueryType(null);
   };
 
-  const refreshList = async () => {
+  const refreshList = async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
     if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
@@ -137,7 +138,7 @@ export const usePaginatedChannels = ({
     }
 
     lastRefresh.current = Date.now();
-    await queryChannels('refresh');
+    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
   };
 
   const reloadList = async () => {
@@ -167,7 +168,9 @@ export const usePaginatedChannels = ({
       'connection.changed',
       async (event) => {
         if (event.online) {
-          await refreshList();
+          // Reconnection refreshes should stay silent, but still share the same debounce
+          // path as pull-to-refresh.
+          await refreshList({ isBackground: true });
         }
       },
     );
@@ -195,7 +198,7 @@ export const usePaginatedChannels = ({
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',
-    refreshList,
+    refreshList: () => refreshList(),
     reloadList,
     staticChannelsActive,
   };

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,16 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,

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

@@ -2,14 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -11,7 +13,7 @@ import type {
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +53,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });

package/src/components/ImageGallery/components/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};

package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;

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

@@ -37,7 +37,7 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus'> &
+  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -50,6 +50,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     members,
     message,
     MessageStatus,
+    MessageTimestamp,
     showMessageStatus,
   } = props;
   const styles = useStyles();
@@ -77,9 +78,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   return (
     <View style={[styles.container, container]} testID='message-status-time'>
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[styles.name, name]}>{message.user.name}</Text>
+        <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
+          {message.user.name}
+        </Text>
       ) : null}
-      {showMessageStatus && <MessageStatus formattedDate={formattedDate} timestamp={date} />}
+      {showMessageStatus ? <MessageStatus /> : null}
+      <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
       {isEdited ? <Text style={[styles.editedText, editedText]}>{t('Edited')}</Text> : null}
     </View>
   );
@@ -201,6 +205,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
+        maxWidth: '100%',
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'center',
@@ -208,6 +213,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       name: {
+        flexShrink: 1,
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -6,10 +6,6 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
@@ -21,14 +17,10 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageStatusPropsWithContext = Pick<
   MessageContextValue,
   'deliveredToCount' | 'message' | 'readBy'
-> &
-  Pick<MessagesContextValue, 'MessageTimestamp'> & {
-    formattedDate?: string | Date;
-    timestamp?: string | Date;
-  };
+>;
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
+  const { deliveredToCount, message, readBy } = props;
 
   const styles = useStyles();
 
@@ -92,7 +84,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           {...checkIcon}
         />
       ) : null}
-      <MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
     </View>
   );
 };
@@ -101,20 +92,8 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const {
-    deliveredToCount: prevDeliveredBy,
-    message: prevMessage,
-    readBy: prevReadBy,
-    formattedDate: prevFormattedDate,
-    timestamp: prevTimestamp,
-  } = prevProps;
-  const {
-    deliveredToCount: nextDeliveredBy,
-    message: nextMessage,
-    readBy: nextReadBy,
-    formattedDate: nextFormattedDate,
-    timestamp: nextTimestamp,
-  } = nextProps;
+  const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
+  const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;
 
   const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
   if (!deliveredByEqual) {
@@ -132,16 +111,6 @@ const areEqual = (
     return false;
   }
 
-  const timestampEqual = prevTimestamp === nextTimestamp;
-  if (!timestampEqual) {
-    return false;
-  }
-
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) {
-    return false;
-  }
-
   return true;
 };
 
@@ -155,7 +124,6 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { channel } = useChannelContext();
   const { deliveredToCount, message, readBy } = useMessageContext();
-  const { MessageTimestamp } = useMessagesContext();
 
   const channelMembersCount = Object.keys(channel?.state.members).length;
 
@@ -167,7 +135,6 @@ export const MessageStatus = (props: MessageStatusProps) => {
         deliveredToCount,
         message,
         readBy,
-        MessageTimestamp,
       }}
       {...props}
     />

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -108,7 +108,6 @@ export const AudioRecordingPreview = () => {
   const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   });
 
   return (