stream-chat-react-native-core 9.0.0-beta.32 → 9.0.0-beta.34

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

@@ -147,6 +147,31 @@ describe('Giphy', () => {
     });
   });
 
+  it('uses the outgoing bubble background for ephemeral giphy previews', async () => {
+    render(
+      getAttachmentComponent(
+        {
+          attachment: {
+            ...attachment,
+            actions,
+          },
+        },
+        { isMyMessage: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-action-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgOutgoing,
+          }),
+        ]),
+      );
+    });
+  });
+
   it('"giphy" attachment size should be customisable', async () => {
     attachment.giphy = giphy;
     render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));

package/src/components/Channel/Channel.tsx

@@ -235,7 +235,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       MessagesContextValue,
       | 'additionalPressableProps'
       | 'customMessageSwipeAction'
-      | 'deletedMessagesVisibilityType'
       | 'disableTypingIndicator'
       | 'dismissKeyboardOnMessageTouch'
       | 'enableSwipeToReply'
@@ -405,7 +404,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     compressImageQuality,
     createPollOptionGap,
     customMessageSwipeAction,
-    deletedMessagesVisibilityType = 'always',
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -1635,7 +1633,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     additionalPressableProps,
     channelId,
     customMessageSwipeAction,
-    deletedMessagesVisibilityType,
     deleteMessage,
     deleteReaction,
     disableTypingIndicator,

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

@@ -6,7 +6,6 @@ export const useCreateMessagesContext = ({
   additionalPressableProps,
   channelId,
   customMessageSwipeAction,
-  deletedMessagesVisibilityType,
   deleteMessage,
   deleteReaction,
   disableTypingIndicator,
@@ -70,7 +69,6 @@ export const useCreateMessagesContext = ({
     () => ({
       additionalPressableProps,
       customMessageSwipeAction,
-      deletedMessagesVisibilityType,
       deleteMessage,
       deleteReaction,
       disableTypingIndicator,

package/src/components/ChannelList/ChannelListView.tsx

@@ -26,7 +26,8 @@ const StatusIndicator = () => {
   const { isOnline } = useChatContext();
   const styles = useStyles();
   const { error, loadingChannels, refreshList } = useChannelsContext();
-  const { HeaderErrorIndicator, HeaderNetworkDownIndicator } = useComponentsContext();
+  const { ChannelListHeaderErrorIndicator, ChannelListHeaderNetworkDownIndicator } =
+    useComponentsContext();
 
   if (loadingChannels) {
     return null;
@@ -35,13 +36,13 @@ const StatusIndicator = () => {
   if (!isOnline) {
     return (
       <View style={styles.statusIndicator}>
-        <HeaderNetworkDownIndicator />
+        <ChannelListHeaderNetworkDownIndicator />
       </View>
     );
   } else if (error) {
     return (
       <View style={styles.statusIndicator}>
-        <HeaderErrorIndicator onPress={refreshList} />
+        <ChannelListHeaderErrorIndicator onPress={refreshList} />
       </View>
     );
   }
@@ -72,7 +73,7 @@ const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
   } = props;
   const {
     EmptyStateIndicator,
-    FooterLoadingIndicator,
+    ChannelListFooterLoadingIndicator,
     ListHeaderComponent,
     LoadingErrorIndicator,
     ChannelListLoadingIndicator: LoadingIndicator,
@@ -138,7 +139,7 @@ const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
         ListEmptyComponent={
           loading ? <LoadingIndicator /> : <EmptyStateIndicator listType='channel' />
         }
-        ListFooterComponent={loadingNextPage ? <FooterLoadingIndicator /> : undefined}
+        ListFooterComponent={loadingNextPage ? <ChannelListFooterLoadingIndicator /> : undefined}
         ListHeaderComponent={ListHeaderComponent}
         onEndReached={onEndReached}
         onEndReachedThreshold={loadMoreThreshold}

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

@@ -46,7 +46,7 @@ jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({
 }));
 
 /**
- * Custom Preview component used via WithComponents to verify channel rendering.
+ * Custom ChannelPreview component used via WithComponents to verify channel rendering.
  * Receives { channel, muted, unread, lastMessage } from ChannelPreview.
  */
 const ChannelPreviewComponent = ({ channel }) => (
@@ -58,7 +58,7 @@ const ChannelPreviewComponent = ({ channel }) => (
 
 /**
  * Probe that reads swipeActionsEnabled from ChannelsContext.
- * Used as a Preview override to inspect context values.
+ * Used as a ChannelPreview override to inspect context values.
  */
 const SwipeActionsProbe = () => {
   const { swipeActionsEnabled } = useChannelsContext();
@@ -119,7 +119,7 @@ describe('ChannelList', () => {
 
     const { getByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} />
         </WithComponents>
       </Chat>,
@@ -133,7 +133,7 @@ describe('ChannelList', () => {
 
     const { getByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} />
         </WithComponents>
       </Chat>,
@@ -147,7 +147,7 @@ describe('ChannelList', () => {
 
     render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} />
         </WithComponents>
       </Chat>,
@@ -162,7 +162,7 @@ describe('ChannelList', () => {
 
     screen.rerender(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} filters={{ dummyFilter: true }} />
         </WithComponents>
       </Chat>,
@@ -204,7 +204,7 @@ describe('ChannelList', () => {
 
     const { rerender, queryByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} filters={staleFilter} />
         </WithComponents>
       </Chat>,
@@ -224,7 +224,7 @@ describe('ChannelList', () => {
 
     rerender(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} filters={freshFilter} />
         </WithComponents>
       </Chat>,
@@ -254,7 +254,7 @@ describe('ChannelList', () => {
 
     render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
           <ChannelList {...props} onSelect={setActiveChannel} />
         </WithComponents>
       </Chat>,
@@ -276,7 +276,7 @@ describe('ChannelList', () => {
 
     const { getByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: SwipeActionsProbe }}>
+        <WithComponents overrides={{ ChannelPreview: SwipeActionsProbe }}>
           <ChannelList {...props} swipeActionsEnabled={false} />
         </WithComponents>
       </Chat>,
@@ -291,7 +291,7 @@ describe('ChannelList', () => {
 
     const { getByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: SwipeActionsProbe }}>
+        <WithComponents overrides={{ ChannelPreview: SwipeActionsProbe }}>
           <ChannelList {...props} />
         </WithComponents>
       </Chat>,
@@ -306,7 +306,7 @@ describe('ChannelList', () => {
 
     const { getByTestId, queryByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewContent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewContent }}>
           <ChannelList {...props} swipeActionsEnabled={false} />
         </WithComponents>
       </Chat>,
@@ -323,7 +323,7 @@ describe('ChannelList', () => {
 
     const { getByTestId } = render(
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewContent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewContent }}>
           <ChannelList {...props} swipeActionsEnabled={true} />
         </WithComponents>
       </Chat>,
@@ -344,7 +344,7 @@ describe('ChannelList', () => {
         <WithComponents
           overrides={{
             ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
-            Preview: ChannelDetailsBottomSheetProbe,
+            ChannelPreview: ChannelDetailsBottomSheetProbe,
           }}
         >
           <ChannelList {...props} />
@@ -366,7 +366,7 @@ describe('ChannelList', () => {
         <WithComponents
           overrides={{
             ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
-            Preview: ChannelDetailsBottomSheetProbe,
+            ChannelPreview: ChannelDetailsBottomSheetProbe,
           }}
         >
           <ChannelList {...props} />
@@ -395,7 +395,7 @@ describe('ChannelList', () => {
       it('should move channel to top of the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -419,7 +419,7 @@ describe('ChannelList', () => {
       it('should add channel to top if channel is hidden from the list', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -449,7 +449,7 @@ describe('ChannelList', () => {
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList lockChannelOrder={true} />
             </WithComponents>
           </Chat>,
@@ -475,7 +475,7 @@ describe('ChannelList', () => {
         const onNewMessage = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onNewMessage={onNewMessage} />
             </WithComponents>
           </Chat>,
@@ -504,7 +504,7 @@ describe('ChannelList', () => {
       it('should move a channel to top of the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -528,7 +528,7 @@ describe('ChannelList', () => {
         const onNewMessage = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onNewMessage={onNewMessage} />
             </WithComponents>
           </Chat>,
@@ -549,7 +549,7 @@ describe('ChannelList', () => {
         const onNewMessageNotification = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onNewMessageNotification={onNewMessageNotification} />
             </WithComponents>
           </Chat>,
@@ -578,7 +578,7 @@ describe('ChannelList', () => {
       it('should move a channel to top of the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -605,7 +605,7 @@ describe('ChannelList', () => {
         const onAddedToChannel = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onAddedToChannel={onAddedToChannel} />
             </WithComponents>
           </Chat>,
@@ -631,7 +631,7 @@ describe('ChannelList', () => {
       it('should remove the channel from list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -658,7 +658,7 @@ describe('ChannelList', () => {
         const onRemovedFromChannel = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onRemovedFromChannel={onRemovedFromChannel} />
             </WithComponents>
           </Chat>,
@@ -684,7 +684,7 @@ describe('ChannelList', () => {
       it('should update a channel in the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -710,7 +710,7 @@ describe('ChannelList', () => {
         const onChannelUpdated = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onChannelUpdated={onChannelUpdated} />
             </WithComponents>
           </Chat>,
@@ -741,7 +741,7 @@ describe('ChannelList', () => {
       it('should remove a channel from the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -768,7 +768,7 @@ describe('ChannelList', () => {
         const onChannelDeleted = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onChannelDeleted={onChannelDeleted} />
             </WithComponents>
           </Chat>,
@@ -794,7 +794,7 @@ describe('ChannelList', () => {
       it('should hide a channel from the list by default', async () => {
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -821,7 +821,7 @@ describe('ChannelList', () => {
         const onChannelHidden = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onChannelHidden={onChannelHidden} />
             </WithComponents>
           </Chat>,
@@ -846,7 +846,7 @@ describe('ChannelList', () => {
 
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -874,7 +874,7 @@ describe('ChannelList', () => {
 
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: RefreshingProbe }}>
+            <WithComponents overrides={{ ChannelPreview: RefreshingProbe }}>
               <ChannelList {...props} />
             </WithComponents>
           </Chat>,
@@ -909,7 +909,7 @@ describe('ChannelList', () => {
         const onChannelTruncated = jest.fn();
         render(
           <Chat client={chatClient}>
-            <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
               <ChannelList {...props} onChannelTruncated={onChannelTruncated} />
             </WithComponents>
           </Chat>,

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -26,7 +26,7 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   const { client: contextClient } = useChatContext();
   const { getChannelActionItems, swipeActionsEnabled } = useChannelsContext();
-  const { Preview } = useComponentsContext();
+  const { ChannelPreview } = useComponentsContext();
 
   const client = propClient || contextClient;
 
@@ -37,12 +37,12 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   const message = translatedLastMessage ? translatedLastMessage : lastMessage;
 
   if (!swipeActionsEnabled) {
-    return <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
+    return <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
   }
 
   return (
     <ChannelSwipableWrapper channel={channel} getChannelActionItems={getChannelActionItems}>
-      <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />
+      <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />
     </ChannelSwipableWrapper>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -26,8 +26,11 @@ export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> &
 
 export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   const { channel, lastMessage } = props;
-  const { PreviewTypingIndicator, PreviewMessageDeliveryStatus, PreviewLastMessage } =
-    useComponentsContext();
+  const {
+    ChannelPreviewTypingIndicator,
+    ChannelPreviewMessageDeliveryStatus,
+    ChannelPreviewLastMessage,
+  } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -53,14 +56,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   const showMessageDeliveryStatus = !isMessageDeleted;
 
   if (usersTyping.length > 0) {
-    return <PreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
+    return <ChannelPreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
   }
 
   if (draftMessage) {
     return (
       <View style={styles.container}>
         <Text style={styles.draftText}>{t('Draft')}:</Text>
-        <PreviewLastMessage message={draftMessage} />
+        <ChannelPreviewLastMessage message={draftMessage} />
       </View>
     );
   }
@@ -98,18 +101,18 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         {showMessageDeliveryStatus ? (
-          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+          <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         ) : null}
-        <PreviewLastMessage message={lastMessage} />
+        <ChannelPreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
         {showMessageDeliveryStatus ? (
-          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+          <ChannelPreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         ) : null}
-        <PreviewLastMessage message={lastMessage} />
+        <ChannelPreviewLastMessage message={lastMessage} />
       </View>
     );
   }

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -46,12 +46,12 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
     lastMessage,
   } = props;
   const {
-    PreviewAvatar,
-    PreviewMessage,
-    PreviewMutedStatus,
-    PreviewStatus,
-    PreviewTitle,
-    PreviewUnreadCount,
+    ChannelPreviewAvatar,
+    ChannelPreviewMessage,
+    ChannelPreviewMutedStatus,
+    ChannelPreviewStatus,
+    ChannelPreviewTitle,
+    ChannelPreviewUnreadCount,
   } = useComponentsContext();
 
   const {
@@ -97,24 +97,26 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
         ]}
         testID='channel-preview-button'
       >
-        <PreviewAvatar channel={channel} size='xl' />
+        <ChannelPreviewAvatar channel={channel} size='xl' />
         <View
           style={[styles.contentContainer, contentContainer]}
           testID={`channel-preview-content-${channel.id}`}
         >
           <View style={[styles.upperRow, upperRow]}>
             <View style={[styles.titleContainer, titleContainer]}>
-              <PreviewTitle channel={channel} />
-              {muted && mutedStatusPosition === 'inlineTitle' ? <PreviewMutedStatus /> : null}
+              <ChannelPreviewTitle channel={channel} />
+              {muted && mutedStatusPosition === 'inlineTitle' ? (
+                <ChannelPreviewMutedStatus />
+              ) : null}
             </View>
 
             <View style={[styles.statusContainer, statusContainer]}>
-              <PreviewStatus
+              <ChannelPreviewStatus
                 channel={channel}
                 formatLatestMessageDate={formatLatestMessageDate}
                 lastMessage={lastMessage}
               />
-              <PreviewUnreadCount
+              <ChannelPreviewUnreadCount
                 channel={channel}
                 maxUnreadCount={maxUnreadCount}
                 unread={unread}
@@ -123,8 +125,10 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
           </View>
 
           <View style={[styles.lowerRow, lowerRow]}>
-            <PreviewMessage channel={channel} lastMessage={lastMessage} />
-            {muted && mutedStatusPosition === 'trailingBottom' ? <PreviewMutedStatus /> : null}
+            <ChannelPreviewMessage channel={channel} lastMessage={lastMessage} />
+            {muted && mutedStatusPosition === 'trailingBottom' ? (
+              <ChannelPreviewMutedStatus />
+            ) : null}
           </View>
         </View>
       </Pressable>

package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx

@@ -84,7 +84,7 @@ describe('ChannelPreview', () => {
 
     return (
       <Chat client={chatClient}>
-        <WithComponents overrides={{ Preview: ChannelPreviewUIComponent }}>
+        <WithComponents overrides={{ ChannelPreview: ChannelPreviewUIComponent }}>
           <ChannelPreview {...props} channel={channel} client={chatClient} />
         </WithComponents>
       </Chat>
@@ -437,7 +437,7 @@ describe('ChannelPreview', () => {
           <WithComponents
             overrides={{
               ChannelDetailsBottomSheet: channelDetailsBottomSheet,
-              Preview: SwipePreview,
+              ChannelPreview: SwipePreview,
             }}
           >
             <ChannelsProvider

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

@@ -99,10 +99,12 @@ const useStyles = ({
           ...bubbleReactionListTopContainer,
         },
         bubbleWrapper: {
+          zIndex: 1,
           ...bubbleWrapper,
         },
         repliesContainer: {
           marginTop: -primitives.spacingXxs, // Reducing the margin to account the gap added in the content container
+          zIndex: 0,
           ...repliesContainer,
         },
         leftAlignItems: {