From d70956dbc08a566956a5f4b5087777e5d9a3c92f Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 13:49:34 +0200
Subject: [PATCH 1/8] fix: poll modal close button

---
 .../Poll/components/CreatePollHeader.tsx      |   7 +-
 .../Poll/components/PollModalHeader.tsx       |   6 +-
 .../__tests__/CreatePollHeader.test.tsx       |  94 +++++++++++++
 .../__tests__/PollModalHeader.test.tsx        | 126 ++++++++++++++++++
 package/src/icons/arrow-left.tsx              |  23 ++++
 5 files changed, 250 insertions(+), 6 deletions(-)
 create mode 100644 package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
 create mode 100644 package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
 create mode 100644 package/src/icons/arrow-left.tsx

diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index 2877ad668f..33c91a4e5e 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { Cross } from '../../../icons/xmark-1';
+import { ArrowLeft } from '../../../icons/arrow-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
@@ -54,8 +54,9 @@ export const CreatePollHeader = ({
         accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
-        type='solid'
-        LeadingIcon={Cross}
+        type='ghost'
+        size='md'
+        LeadingIcon={ArrowLeft}
         iconOnly
       />
 
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 85a07b78ec..ed4d57e54a 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Cross } from '../../../icons/xmark-1';
+import { ArrowLeft } from '../../../icons/arrow-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 
@@ -27,10 +27,10 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
         <Button
           accessibilityLabelKey='a11y/Close poll'
           variant='secondary'
-          type='solid'
+          type='ghost'
           size='md'
           iconOnly
-          LeadingIcon={Cross}
+          LeadingIcon={ArrowLeft}
           onPress={onPress}
           testID='poll-results-close-button'
         />
diff --git a/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx b/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
new file mode 100644
index 0000000000..ebb8459fa6
--- /dev/null
+++ b/package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts';
+import { CreatePollHeader } from '../CreatePollHeader';
+
+jest.mock('../../hooks/useCanCreatePoll', () => ({
+  useCanCreatePoll: jest.fn(() => true),
+}));
+
+const getCloseButtonWrapperStyle = () => {
+  const closeButton = screen.getAllByRole('button')[0];
+  let node = closeButton;
+
+  while (node.parent) {
+    const style = StyleSheet.flatten(node.parent.props.style as StyleProp<ViewStyle>);
+    if (style?.height === 40 && style.width === 40) {
+      return style;
+    }
+    node = node.parent;
+  }
+
+  throw new Error('Create poll header close button wrapper not found');
+};
+
+const collectPathData = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectPathData(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { d?: unknown };
+  };
+
+  return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
+};
+
+const collectTransforms = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { style?: StyleProp<ViewStyle> };
+  };
+  const style = StyleSheet.flatten(props?.style);
+  const styleTransforms = Array.isArray(style?.transform)
+    ? style.transform.flatMap((transform) => {
+        if (
+          transform &&
+          typeof transform === 'object' &&
+          'rotate' in transform &&
+          typeof transform.rotate === 'string'
+        ) {
+          return [transform.rotate];
+        }
+        return [];
+      })
+    : [];
+
+  return [...styleTransforms, ...collectTransforms(children)];
+};
+
+describe('CreatePollHeader', () => {
+  it('renders a secondary ghost arrow-left close button', () => {
+    render(
+      <ThemeProvider>
+        <CreatePollHeader onBackPressHandler={jest.fn()} onCreatePollPressHandler={jest.fn()} />
+      </ThemeProvider>,
+    );
+
+    const style = getCloseButtonWrapperStyle();
+    expect(style.backgroundColor).toBeUndefined();
+    expect(style.borderWidth).toBeUndefined();
+    expect(style.borderColor).toBeUndefined();
+    expect(collectPathData(screen.toJSON())).toContain(
+      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+    );
+    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
+  });
+});
diff --git a/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx b/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
new file mode 100644
index 0000000000..3f0a6d3178
--- /dev/null
+++ b/package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+
+import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts';
+import { PollModalHeader } from '../PollModalHeader';
+
+const originalPlatform = Platform.OS;
+
+const setPlatform = (os: typeof Platform.OS) => {
+  Object.defineProperty(Platform, 'OS', {
+    configurable: true,
+    get: () => os,
+  });
+};
+
+const getCloseButtonWrapperStyle = () => {
+  let node = screen.getByTestId('poll-results-close-button');
+
+  while (node.parent) {
+    const style = StyleSheet.flatten(node.parent.props.style as StyleProp<ViewStyle>);
+    if (style?.height === 40 && style.width === 40) {
+      return style;
+    }
+    node = node.parent;
+  }
+
+  throw new Error('Poll modal header close button wrapper not found');
+};
+
+const collectPathData = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectPathData(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { d?: unknown };
+  };
+
+  return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
+};
+
+const collectTransforms = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { style?: StyleProp<ViewStyle>; transform?: unknown };
+  };
+  const style = StyleSheet.flatten(props?.style);
+  const styleTransforms = Array.isArray(style?.transform)
+    ? style.transform.flatMap((transform) => {
+        if (
+          transform &&
+          typeof transform === 'object' &&
+          'rotate' in transform &&
+          typeof transform.rotate === 'string'
+        ) {
+          return [transform.rotate];
+        }
+        return [];
+      })
+    : [];
+
+  return [
+    ...(typeof props?.transform === 'string' ? [props.transform] : []),
+    ...styleTransforms,
+    ...collectTransforms(children),
+  ];
+};
+
+const renderPollModalHeader = () =>
+  render(
+    <ThemeProvider>
+      <PollModalHeader onPress={jest.fn()} title='Poll Results' />
+    </ThemeProvider>,
+  );
+
+describe('PollModalHeader', () => {
+  afterEach(() => {
+    setPlatform(originalPlatform);
+  });
+
+  it('renders a secondary ghost arrow-left button outside Android', () => {
+    setPlatform('ios');
+
+    renderPollModalHeader();
+
+    const style = getCloseButtonWrapperStyle();
+    expect(style.backgroundColor).toBeUndefined();
+    expect(style.borderWidth).toBeUndefined();
+    expect(style.borderColor).toBeUndefined();
+    expect(collectPathData(screen.toJSON())).toContain(
+      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+    );
+    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
+  });
+
+  it('renders a secondary ghost arrow-left button on Android', () => {
+    setPlatform('android');
+
+    renderPollModalHeader();
+
+    const style = getCloseButtonWrapperStyle();
+    expect(style.backgroundColor).toBeUndefined();
+    expect(style.borderWidth).toBeUndefined();
+    expect(style.borderColor).toBeUndefined();
+    expect(collectPathData(screen.toJSON())).toContain(
+      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+    );
+    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
+  });
+});
diff --git a/package/src/icons/arrow-left.tsx b/package/src/icons/arrow-left.tsx
new file mode 100644
index 0000000000..e39d201a97
--- /dev/null
+++ b/package/src/icons/arrow-left.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { I18nManager } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ArrowLeft = ({ height, size, style, width, ...rest }: IconProps) => (
+  <Svg
+    fill='none'
+    height={height ?? size}
+    style={[style, { transform: [{ rotate: I18nManager.isRTL ? '90deg' : '-90deg' }] }]}
+    viewBox='0 0 20 20'
+    width={width ?? size}
+  >
+    <Path
+      d='M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      {...rest}
+    />
+  </Svg>
+);

From 03d18dabb51d36a70e4ee660fd1da74f9f81f90c Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 14:18:22 +0200
Subject: [PATCH 2/8] fix: lone audio recording style

---
 .../src/components/Attachment/Attachment.tsx  |  11 +-
 .../Attachment/__tests__/Attachment.test.tsx  | 104 +++++++++++++++++-
 2 files changed, 108 insertions(+), 7 deletions(-)

diff --git a/package/src/components/Attachment/Attachment.tsx b/package/src/components/Attachment/Attachment.tsx
index 8232065edc..3ea96757ba 100644
--- a/package/src/components/Attachment/Attachment.tsx
+++ b/package/src/components/Attachment/Attachment.tsx
@@ -219,9 +219,14 @@ const useAudioAttachmentStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { isMyMessage, messageHasOnlySingleAttachment } = useMessageContext();
-
-  const showBackgroundTransparent = messageHasOnlySingleAttachment;
+  const { isMyMessage, message, messageHasOnlySingleAttachment } = useMessageContext();
+
+  const messageHasSingleAttachment = message.attachments?.length === 1;
+  const messageHasCaption = !!message.text?.trim();
+  const messageIsQuotedReply = !!(message.quoted_message || message.quoted_message_id);
+  const showBackgroundTransparent =
+    messageHasOnlySingleAttachment ||
+    (messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption);
 
   return useMemo(() => {
     return StyleSheet.create({
diff --git a/package/src/components/Attachment/__tests__/Attachment.test.tsx b/package/src/components/Attachment/__tests__/Attachment.test.tsx
index ba8869acac..d4d1c88ae4 100644
--- a/package/src/components/Attachment/__tests__/Attachment.test.tsx
+++ b/package/src/components/Attachment/__tests__/Attachment.test.tsx
@@ -11,7 +11,7 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAudioAttachment,
   generateFileAttachment,
@@ -19,6 +19,7 @@ import {
   generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import { FileTypes } from '../../../types/types';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
@@ -48,8 +49,11 @@ jest.mock('../../../hooks/usePendingAttachmentUpload', () => ({
   })),
 }));
 
-const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
-  const message = generateMessage();
+const getAttachmentComponent = (
+  props: ComponentProps<typeof Attachment>,
+  messageContextValue: Partial<MessageContextValue> = {},
+) => {
+  const message = messageContextValue.message ?? generateMessage();
   return (
     <ThemeProvider>
       <AudioPlayerProvider value={{ allowConcurrentAudioPlayback: false }}>
@@ -63,7 +67,9 @@ const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
             } as unknown as MessagesContextValue
           }
         >
-          <MessageProvider value={{ message } as unknown as MessageContextValue}>
+          <MessageProvider
+            value={{ message, ...messageContextValue } as unknown as MessageContextValue}
+          >
             <Attachment {...props} />
           </MessageProvider>
         </MessagesProvider>
@@ -79,6 +85,8 @@ const getWaveformBarCount = (root: ReactTestInstance) =>
   }).length;
 
 describe('Attachment', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   it('should render File component for "audio" type attachment', async () => {
     const attachment = generateAudioAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
@@ -122,6 +130,94 @@ describe('Attachment', () => {
     isSoundPackageAvailable.mockReturnValue(false);
   });
 
+  it('uses a transparent audio player background for quoted replies without captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: '',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe('transparent');
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
+  it('keeps the audio player background for quoted replies with captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      type: FileTypes.VoiceRecording,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: 'caption',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe(lightTheme.semantics.chatBgAttachmentIncoming);
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
+  it('keeps the audio player background for quoted replies with multiple attachments and no captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment, generateAudioAttachment()],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: '',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe(lightTheme.semantics.chatBgAttachmentIncoming);
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),

From dce5dceb4c9a0b2ea53d79d1abfe2c298c210313 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:12:45 +0200
Subject: [PATCH 3/8] fix: border colors

---
 examples/SampleApp/src/components/BottomTabs.tsx            | 6 ++++--
 .../ImageGallery/components/ImageGalleryFooter.tsx          | 2 +-
 .../ImageGallery/components/ImageGalleryHeader.tsx          | 2 +-
 package/src/components/MessageInput/MessageComposer.tsx     | 2 +-
 .../MessageInput/SendMessageDisallowedIndicator.tsx         | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/examples/SampleApp/src/components/BottomTabs.tsx b/examples/SampleApp/src/components/BottomTabs.tsx
index 684a1ea694..3369406bca 100644
--- a/examples/SampleApp/src/components/BottomTabs.tsx
+++ b/examples/SampleApp/src/components/BottomTabs.tsx
@@ -27,7 +27,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
   },
   tabListContainer: {
-    borderTopColor: 'rgba(0, 0, 0, 0.0677)',
     borderTopWidth: 1,
     flexDirection: 'row',
   },
@@ -128,7 +127,9 @@ const Tab = (props: TabProps) => {
 
 export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
   const { navigation, state } = props;
-  useTheme();
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { white } = useLegacyColors();
   const { bottom } = useSafeAreaInsets();
 
@@ -138,6 +139,7 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
         styles.tabListContainer,
         {
           backgroundColor: white,
+          borderTopColor: semantics.borderCoreSubtle,
           paddingBottom: bottom,
         },
       ]}
diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
index bbd37cf0e8..5f645d4978 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -200,7 +200,7 @@ const useStyles = () => {
         container: {
           backgroundColor: semantics.backgroundCoreElevation1,
           borderTopWidth: 1,
-          borderTopColor: semantics.borderCoreDefault,
+          borderTopColor: semantics.borderCoreSubtle,
           ...footer.container,
         },
         centerContainer: {
diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
index 1778c71750..a3dd6b8cbc 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -131,7 +131,7 @@ const useStyles = () => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           borderBottomWidth: 1,
-          borderBottomColor: semantics.borderCoreDefault,
+          borderBottomColor: semantics.borderCoreSubtle,
           ...header.innerContainer,
         },
         rightContainer: {
diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx
index d8b3d16171..4e74adab7f 100644
--- a/package/src/components/MessageInput/MessageComposer.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -376,7 +376,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                     {
                       borderTopWidth: 1,
                       backgroundColor: semantics.backgroundCoreElevation1,
-                      borderColor: semantics.borderCoreDefault,
+                      borderTopColor: semantics.borderCoreSubtle,
                       // paddingBottom: BOTTOM_OFFSET,
                       paddingBottom:
                         selectedPicker && !isKeyboardVisible
diff --git a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
index e32ff582ff..5a95f877e5 100644
--- a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
+++ b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
@@ -30,7 +30,7 @@ const useStyles = () => {
     return StyleSheet.create({
       container: {
         backgroundColor: semantics.backgroundCoreApp,
-        borderTopColor: semantics.borderCoreDefault,
+        borderTopColor: semantics.borderCoreSubtle,
         height: 48,
         ...container,
       },

From 2d6fafebdd47303515a9d151aa40726148d1e742 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:15:23 +0200
Subject: [PATCH 4/8] fix: footer spacing

---
 .../src/components/Message/MessageItemView/MessageFooter.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package/src/components/Message/MessageItemView/MessageFooter.tsx b/package/src/components/Message/MessageItemView/MessageFooter.tsx
index 779f553e1f..c9b4653aaa 100644
--- a/package/src/components/Message/MessageItemView/MessageFooter.tsx
+++ b/package/src/components/Message/MessageItemView/MessageFooter.tsx
@@ -198,7 +198,7 @@ const useStyles = () => {
         flexDirection: 'row',
         justifyContent: 'center',
         paddingVertical: primitives.spacingXxs,
-        gap: primitives.spacingXs,
+        gap: primitives.spacingXxs,
       },
       name: {
         flexShrink: 1,

From bac9d6b49912c37e5a20b2a1692b757bb69fd014 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:21:58 +0200
Subject: [PATCH 5/8] fix: sample app bottom tab color

---
 examples/SampleApp/src/components/BottomTabs.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/SampleApp/src/components/BottomTabs.tsx b/examples/SampleApp/src/components/BottomTabs.tsx
index 3369406bca..197899782c 100644
--- a/examples/SampleApp/src/components/BottomTabs.tsx
+++ b/examples/SampleApp/src/components/BottomTabs.tsx
@@ -130,7 +130,6 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { white } = useLegacyColors();
   const { bottom } = useSafeAreaInsets();
 
   return (
@@ -138,7 +137,7 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
       style={[
         styles.tabListContainer,
         {
-          backgroundColor: white,
+          backgroundColor: semantics.backgroundCoreElevation1,
           borderTopColor: semantics.borderCoreSubtle,
           paddingBottom: bottom,
         },

From ad23d2bcc374ed4064bfee9cb0b20070df98f404 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:41:15 +0200
Subject: [PATCH 6/8] fix: missing borders in avatar stack

---
 .../src/components/ui/Avatar/AvatarStack.tsx  | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index e3c11f19c3..ffdd1c6fd1 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -7,6 +7,8 @@ import { avatarSizes } from './constants';
 
 import { UserAvatar } from './UserAvatar';
 
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
 import { BadgeCount } from '../Badge';
 
 export type AvatarStackProps = {
@@ -85,12 +87,21 @@ export const UserAvatarStack = ({
   overlap,
   users,
 }: UserAvatarStackProps) => {
+  const styles = useUserAvatarStackStyles();
   const items = useMemo(
     () =>
       users.map((user) => {
-        return <UserAvatar key={user.id} user={user} size={avatarSize} showBorder />;
+        return (
+          <UserAvatar
+            key={user.id}
+            style={styles.userAvatarWrapper}
+            user={user}
+            size={avatarSize}
+            showBorder
+          />
+        );
       }),
-    [avatarSize, users],
+    [avatarSize, styles.userAvatarWrapper, users],
   );
 
   return (
@@ -98,6 +109,24 @@ export const UserAvatarStack = ({
   );
 };
 
+const useUserAvatarStackStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        userAvatarWrapper: {
+          borderWidth: 2,
+          borderColor: semantics.borderCoreInverse,
+          borderRadius: primitives.radiusMax,
+        },
+      }),
+    [semantics.borderCoreInverse],
+  );
+};
+
 const useStyles = () => {
   return useMemo(
     () =>

From 4e652d0cf40f3c8b61091ca91e4afd9dee6a5b37 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:46:40 +0200
Subject: [PATCH 7/8] fix: add theming compatibility

---
 package/src/components/ui/Avatar/AvatarStack.tsx | 5 +++--
 package/src/contexts/themeContext/utils/theme.ts | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index ffdd1c6fd1..69e0dd61d1 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -111,7 +111,7 @@ export const UserAvatarStack = ({
 
 const useUserAvatarStackStyles = () => {
   const {
-    theme: { semantics },
+    theme: { avatarStack, semantics },
   } = useTheme();
 
   return useMemo(
@@ -121,9 +121,10 @@ const useUserAvatarStackStyles = () => {
           borderWidth: 2,
           borderColor: semantics.borderCoreInverse,
           borderRadius: primitives.radiusMax,
+          ...avatarStack.userAvatarWrapper,
         },
       }),
-    [semantics.borderCoreInverse],
+    [avatarStack.userAvatarWrapper, semantics.borderCoreInverse],
   );
 };
 
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index bf2bee724e..9a9fdb936d 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -145,6 +145,9 @@ export type Theme = {
     presenceIndicator: CircleProps;
     presenceIndicatorContainer: ViewStyle;
   };
+  avatarStack: {
+    userAvatarWrapper: ViewStyle;
+  };
   bottomSheetModal: {
     container: ViewStyle;
     contentContainer: ViewStyle;
@@ -1095,6 +1098,9 @@ export const defaultTheme: Theme = {
     },
     presenceIndicatorContainer: {},
   },
+  avatarStack: {
+    userAvatarWrapper: {},
+  },
   bottomSheetModal: {
     container: {},
     contentContainer: {},

From b2e7c5a2fd3dc88e1743809b04b15d56b97af1aa Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 14 May 2026 19:54:13 +0200
Subject: [PATCH 8/8] fix: snapshots

---
 .../__snapshots__/TypingIndicator.test.tsx.snap      | 12 ++++++++++--
 .../__tests__/__snapshots__/Thread.test.tsx.snap     | 10 +++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap
index cd955f96fe..77cbf9e71d 100644
--- a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap
+++ b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap
@@ -81,7 +81,11 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
-                  undefined,
+                  {
+                    "borderColor": "#ffffff",
+                    "borderRadius": 9999,
+                    "borderWidth": 2,
+                  },
                 ]
               }
               testID="avatar-image"
@@ -143,7 +147,11 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
-                  undefined,
+                  {
+                    "borderColor": "#ffffff",
+                    "borderRadius": 9999,
+                    "borderWidth": 2,
+                  },
                 ]
               }
               testID="avatar-image"
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap
index a2a3b6e58f..a40eb0ce5e 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap
@@ -603,7 +603,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -946,7 +946,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -1322,7 +1322,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -1656,7 +1656,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "gap": 8,
+                                  "gap": 4,
                                   "justifyContent": "center",
                                   "maxWidth": "100%",
                                   "paddingVertical": 4,
@@ -1768,7 +1768,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 },
                 {
                   "backgroundColor": "#ffffff",
-                  "borderColor": "#d5dbe1",
+                  "borderTopColor": "#ebeef1",
                   "borderTopWidth": 1,
                   "paddingBottom": 16,
                 },