stream-chat-react-native-core 9.0.0-beta.10 → 9.0.0-beta.12

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { NewClose } from '../../../../icons/NewClose';
+import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
 type AttachmentRemoveControlProps = PressableProps;

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx

@@ -4,8 +4,8 @@ import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-nati
 import { LocalAttachmentUploadMetadata } from 'stream-chat';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ExclamationCircle } from '../../../../icons/ExclamationCircle';
-import { Warning } from '../../../../icons/Warning';
+import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
+import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 

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

@@ -14,12 +14,12 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { ChevronLeft } from '../../../../icons/ChevronLeft';
-import { Mic } from '../../../../icons/Mic';
-import { Stop } from '../../../../icons/Stop';
-import { Tick } from '../../../../icons/Tick';
-import { Trash } from '../../../../icons/Trash';
+import { Tick } from '../../../../icons/checkmark';
+import { ChevronLeft } from '../../../../icons/chevron-left';
+import { Delete } from '../../../../icons/delete';
+import { Stop } from '../../../../icons/stop-fill';
 import { IconProps } from '../../../../icons/utils/base';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -109,7 +109,7 @@ const DeleteRecording = ({
       size='sm'
       iconOnly
       onPress={onDeleteVoiceRecording}
-      LeadingIcon={Trash}
+      LeadingIcon={Delete}
     />
   );
 };

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

@@ -19,7 +19,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';

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

@@ -9,7 +9,7 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 

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

@@ -4,9 +4,9 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronTop } from '../../../../icons/ChevronTop';
-import { Lock } from '../../../../icons/Lock';
-import { Unlock } from '../../../../icons/Unlock';
+import { ChevronTop } from '../../../../icons/chevron-down';
+import { Lock } from '../../../../icons/lock';
+import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
@@ -9,17 +9,27 @@ import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Pause } from '../../../../icons/Pause';
-import { Play } from '../../../../icons/Play';
-import { NativeHandlers } from '../../../../native';
+import { Pause } from '../../../../icons/pause-fill';
+import { Play } from '../../../../icons/play-fill';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { StableDurationLabel } from '../../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
 
 const ONE_SECOND_IN_MILLISECONDS = 1000;
 const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
 
+const getAudioDurationLabel = (durationInMilliseconds: number) => {
+  if (!durationInMilliseconds) {
+    return '00:00';
+  }
+
+  return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1
+    ? dayjs.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss')
+    : dayjs.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
+};
+
 const audioPlayerSelector = (state: AudioPlayerState) => ({
   duration: state.duration,
   isPlaying: state.isPlaying,
@@ -52,8 +62,8 @@ export const AudioRecordingPreview = () => {
   const audioPlayer = useAudioPlayer({
     duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
     mimeType: 'audio/aac',
-    // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
-    previewVoiceRecording: !(NativeHandlers.SDK === 'stream-chat-expo'),
+    // The preview still uses the recorder-backed player until both playback paths are unified.
+    previewVoiceRecording: false,
     type: 'voiceRecording',
     uri,
   });
@@ -91,13 +101,10 @@ export const AudioRecordingPreview = () => {
     audioPlayer.toggle();
   };
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
   const progressDuration = useMemo(
-    () =>
-      position
-        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
-          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
-          : dayjs.duration(position, 'milliseconds').format('mm:ss')
-        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
+    () => getAudioDurationLabel(position || duration),
     [duration, position],
   );
 
@@ -121,15 +128,15 @@ export const AudioRecordingPreview = () => {
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
-        <Text
-          style={[
-            styles.durationText,
-            currentTime,
-            { color: isPlaying ? semantics.accentPrimary : semantics.textPrimary },
-          ]}
-        >
-          {progressDuration}
-        </Text>
+        <StableDurationLabel
+          accessibilityLabel='Progress Duration'
+          reserveLabel={maxDurationLabel}
+          label={progressDuration}
+          style={[styles.durationText, currentTime]}
+          visibleStyle={{
+            color: isPlaying ? semantics.accentPrimary : semantics.textPrimary,
+          }}
+        />
       </View>
       <View style={[styles.progressBar, progressBar]}>
         {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
@@ -159,6 +166,7 @@ const useStyles = () => {
           gap: primitives.spacingMd,
         },
         durationText: {
+          fontVariant: ['tabular-nums'],
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -10,7 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
-import { Plus } from '../../../../icons/Plus';
+import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -10,7 +10,7 @@ import { LinkPreviewsManager } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
 import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
 

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/Tick';
+import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/SendRight';
+import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -90,7 +90,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
       <Animated.View
         entering={ZoomIn.duration(200)}
         exiting={ZoomOut.duration(200)}
-        key='cooldown-timer'
+        key='edit-button'
         style={editButtonContainer}
       >
         <EditButton disabled={messageComposer.compositionIsEmpty} />

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Down } from '../../icons/Down';
+import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -8,8 +8,8 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { ArrowUp } from '../../icons/ArrowUp';
-import { NewClose } from '../../icons/NewClose';
+import { ArrowUp } from '../../icons/arrow-up';
+import { NewClose } from '../../icons/xmark';
 import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';

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

@@ -144,13 +144,23 @@ exports[`ScrollToBottomButton should render the message notification and match s
             strokeWidth={1.5}
           >
             <RNSVGPath
-              d="M15.2084 11.6667L10.0001 16.875L4.79175 11.6667M10.0001 16.25V3.125"
+              d="M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75"
               fill={
                 {
                   "payload": 4278190080,
                   "type": 0,
                 }
               }
+              matrix={
+                [
+                  -1,
+                  1.2246467991473532e-16,
+                  -1.2246467991473532e-16,
+                  -1,
+                  20,
+                  20,
+                ]
+              }
               propList={
                 [
                   "stroke",

package/src/components/MessageMenu/EmojiPickerList.tsx

@@ -98,7 +98,7 @@ const useStyles = () => {
           width: '100%',
           height: 54,
         },
-        bottomSheetContentContainer: { paddingVertical: 16 },
+        bottomSheetContentContainer: { paddingBottom: 16 },
         emojiContainer: {
           alignItems: 'center',
           justifyContent: 'center',

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -15,7 +15,7 @@ import {
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
-import { Plus } from '../../icons/Plus';
+import { Plus } from '../../icons/plus';
 import { NativeHandlers } from '../../native';
 import { scheduleActionOnClose } from '../../state-store';
 

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -23,7 +23,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
 import { IconProps } from '../../icons';
-import { MoreEmojis } from '../../icons/MoreEmojis';
+import { MoreEmojis } from '../../icons/emoji-add-1';
 import { primitives } from '../../theme';
 import { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
@@ -93,7 +93,7 @@ const renderSelectorItem = ({ index, item }: { index: number; item: ReactionSele
   />
 );
 
-const reactionsKeyExtractor = (item: Reaction) => item.id;
+const reactionsKeyExtractor = (item: Reaction) => `${item.id}-${item.type}`;
 const reactionSelectorKeyExtractor = (item: ReactionSelectorItemType) => item.type;
 
 export const MessageUserReactions = (props: MessageUserReactionsProps) => {
@@ -104,7 +104,6 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
     MessageUserReactionsItem: propMessageUserReactionsItem,
     reactions: propReactions,
-    selectedReaction: propSelectedReaction,
     supportedReactions: propSupportedReactions,
   } = props;
   const selectorListRef = useRef<FlatList>(null);
@@ -113,9 +112,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     () => Object.keys(message?.reaction_groups ?? {}),
     [message?.reaction_groups],
   );
-  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(
-    propSelectedReaction ?? reactionTypes[0],
-  );
+  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const {
     MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
     MessageUserReactionsItem: contextMessageUserReactionsItem,
@@ -133,7 +130,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 
   useEffect(() => {
     if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
-      setSelectedReaction(reactionTypes[0]);
+      setSelectedReaction(undefined);
     }
   }, [reactionTypes, selectedReaction]);
 
@@ -163,16 +160,16 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   );
 
   const selectedIndex = useMemo(() => {
-    if (!propSelectedReaction) {
+    if (!selectedReaction) {
       return -1;
     }
-    return selectorReactions.findIndex((reaction) => reaction.type === propSelectedReaction);
-  }, [propSelectedReaction, selectorReactions]);
+    return selectorReactions.findIndex((reaction) => reaction.type === selectedReaction);
+  }, [selectedReaction, selectorReactions]);
 
   useEffect(() => {
     if (selectedIndex !== -1 && selectorListRef.current) {
       selectorListRef.current?.scrollToIndex({
-        index: selectedIndex + 1, // +1 to account for the show more reactions button
+        index: selectedIndex,
         animated: true,
       });
     }
@@ -345,7 +342,7 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightSemiBold,
           color: semantics.textPrimary,
-          paddingBottom: primitives.spacingXxs,
+          paddingVertical: primitives.spacingSm,
           textAlign: 'center',
         },
         showMoreReactionsButton: { paddingHorizontal: primitives.spacingXs },

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -64,10 +64,10 @@ export const MessageUserReactionsItem = ({
       style={[styles.avatarContainer, avatarContainer]}
       onPress={onPress}
     >
-      <MessageUserReactionsAvatar reaction={reaction} size={'lg'} />
+      <MessageUserReactionsAvatar reaction={reaction} size={'md'} />
       <View style={[styles.avatarNameContainer, avatarNameContainer]}>
         <Text numberOfLines={1} style={[styles.avatarName, avatarName]}>
-          {name}
+          {isOwnReaction ? t('You') : name}
         </Text>
         {isOwnReaction ? (
           <Text numberOfLines={1} style={[styles.avatarSubtitle, null]}>
@@ -105,7 +105,7 @@ const useStyles = () => {
           textAlign: 'left',
         },
         avatarSubtitle: {
-          fontSize: primitives.typographyFontSizeSm,
+          fontSize: primitives.typographyFontSizeXs,
           color: semantics.textTertiary,
         },
         avatarNameContainer: {

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -87,16 +87,16 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
 
   it('renders reaction buttons', () => {
     const { getByLabelText } = renderComponent();
-    const likeReactionButton = getByLabelText('reaction-button-like-selected');
+    const likeReactionButton = getByLabelText('reaction-button-like-unselected');
     expect(likeReactionButton).toBeDefined();
     const loveReactionButton = getByLabelText('reaction-button-love-unselected');
     expect(loveReactionButton).toBeDefined();
   });
 
-  it('selects the first reaction by default', () => {
+  it('starts with no reaction filter selected by default', () => {
     const { getAllByLabelText } = renderComponent();
     const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
@@ -114,6 +114,7 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
     const { getByText } = renderComponent();
     const reactionItems = getByText('1 like');
     expect(reactionItems).toBeDefined();
+    expect(getByText('2 love')).toBeDefined();
   });
 
   it('uses provided reactions when passed as a prop', () => {

package/src/components/MessageMenu/hooks/__tests__/useFetchReactions.test.ts

@@ -0,0 +1,56 @@
+import { ReactionResponse } from 'stream-chat';
+
+import {
+  reconcileUpdatedReactionInList,
+  removeReactionFromList,
+  upsertReactionInList,
+} from '../useFetchReactions';
+
+const makeReaction = (
+  params: Partial<ReactionResponse> & Pick<ReactionResponse, 'type' | 'user_id'>,
+) =>
+  ({
+    type: params.type,
+    user_id: params.user_id,
+    user: params.user ?? { id: params.user_id, name: params.user_id },
+  }) as ReactionResponse;
+
+describe('useFetchReactions helpers', () => {
+  it('upserts reactions in the unfiltered list without duplicating the same user/type pair', () => {
+    const existing = makeReaction({ type: 'like', user_id: 'user-1' });
+    const updated = makeReaction({ type: 'like', user_id: 'user-1' });
+
+    const result = upsertReactionInList({
+      prevReactions: [existing],
+      reaction: updated,
+    });
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toBe(updated);
+  });
+
+  it('removes only the matching user/type pair in the unfiltered list', () => {
+    const likeReaction = makeReaction({ type: 'like', user_id: 'user-1' });
+    const loveReaction = makeReaction({ type: 'love', user_id: 'user-1' });
+
+    const result = removeReactionFromList({
+      prevReactions: [likeReaction, loveReaction],
+      reaction: likeReaction,
+    });
+
+    expect(result).toEqual([loveReaction]);
+  });
+
+  it('removes the previous filtered reaction when an updated event moves that user to another type', () => {
+    const existing = makeReaction({ type: 'like', user_id: 'user-1' });
+    const updated = makeReaction({ type: 'love', user_id: 'user-1' });
+
+    const result = reconcileUpdatedReactionInList({
+      prevReactions: [existing],
+      reaction: updated,
+      reactionType: 'like',
+    });
+
+    expect(result).toEqual([]);
+  });
+});

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -11,6 +11,81 @@ export type UseFetchReactionParams = {
   sort?: ReactionSort;
 };
 
+const isSameReaction = (left: ReactionResponse, right: ReactionResponse) =>
+  left.user_id === right.user_id && left.type === right.type;
+
+export const upsertReactionInList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return [
+      reaction,
+      ...prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction)),
+    ];
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions;
+  }
+
+  return [
+    reaction,
+    ...prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id),
+  ];
+};
+
+export const reconcileUpdatedReactionInList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return [
+      reaction,
+      ...prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction)),
+    ];
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id);
+  }
+
+  return [
+    reaction,
+    ...prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id),
+  ];
+};
+
+export const removeReactionFromList = ({
+  prevReactions,
+  reaction,
+  reactionType,
+}: {
+  prevReactions: ReactionResponse[];
+  reaction: ReactionResponse;
+  reactionType?: string;
+}) => {
+  if (!reactionType) {
+    return prevReactions.filter((currentReaction) => !isSameReaction(currentReaction, reaction));
+  }
+
+  if (reaction.type !== reactionType) {
+    return prevReactions;
+  }
+
+  return prevReactions.filter((currentReaction) => currentReaction.user_id !== reaction.user_id);
+};
+
 export const useFetchReactions = ({
   limit = 25,
   message,
@@ -82,8 +157,14 @@ export const useFetchReactions = ({
       client.on('reaction.new', (event) => {
         const { reaction } = event;
 
-        if (reaction && reaction.type === reactionType) {
-          setReactions((prevReactions) => [reaction, ...prevReactions]);
+        if (reaction) {
+          setReactions((prevReactions) =>
+            upsertReactionInList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
+          );
         }
       }),
     );
@@ -93,13 +174,13 @@ export const useFetchReactions = ({
         const { reaction } = event;
 
         if (reaction) {
-          if (reaction.type === reactionType) {
-            setReactions((prevReactions) => [reaction, ...prevReactions]);
-          } else {
-            setReactions((prevReactions) =>
-              prevReactions.filter((r) => r.user_id !== reaction.user_id),
-            );
-          }
+          setReactions((prevReactions) =>
+            reconcileUpdatedReactionInList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
+          );
         }
       }),
     );
@@ -108,9 +189,13 @@ export const useFetchReactions = ({
       client.on('reaction.deleted', (event) => {
         const { reaction } = event;
 
-        if (reaction && reaction.type === reactionType) {
+        if (reaction) {
           setReactions((prevReactions) =>
-            prevReactions.filter((r) => r.user_id !== reaction.user_id),
+            removeReactionFromList({
+              prevReactions,
+              reaction,
+              reactionType,
+            }),
           );
         }
       }),

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/Cross';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -19,9 +19,9 @@ import { PollComposerOption, PollComposerState } from 'stream-chat';
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { CircleMinus } from '../../../icons/CircleMinus';
-import { DotGrid } from '../../../icons/DotGrid';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { InfoTooltip } from '../../../icons/info';
+import { CircleMinus } from '../../../icons/minus-circle';
+import { DotGrid } from '../../../icons/reorder';
 import { primitives } from '../../../theme';
 
 export type CurrentOptionPositionsCache = {