stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

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

@@ -33,7 +33,7 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
     | 'asyncMessagesLockDistance'
-    | 'asyncMessagesMultiSendEnabled'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'CooldownTimer'
     | 'SendButton'
@@ -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} />
@@ -178,7 +178,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     CooldownTimer,
     SendButton,
     StopMessageStreamingButton,
@@ -192,7 +192,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
       {...{
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         asyncMessagesSlideToCancelDistance,
         audioRecordingEnabled,
         channel,

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { LocalVoiceRecordingAttachment } from 'stream-chat';
 
@@ -12,14 +12,11 @@ import { resampleWaveformData } from '../utils/audioSampling';
 
 /**
  * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
- *
- * FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
  */
 export const useAudioRecorder = ({
   audioRecorderManager,
   sendMessage,
 }: Pick<MessageInputContextValue, 'audioRecorderManager' | 'sendMessage'>) => {
-  const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
   const { attachmentManager } = useMessageComposer();
 
   /**
@@ -43,13 +40,6 @@ export const useAudioRecorder = ({
     [stopVoiceRecording],
   );
 
-  useEffect(() => {
-    if (isScheduledForSubmit) {
-      sendMessage();
-      setIsScheduleForSubmit(false);
-    }
-  }, [isScheduledForSubmit, sendMessage]);
-
   /**
    * Function to start voice recording. Will return whether access is granted
    * with regards to the microphone permission as that's how the underlying
@@ -68,10 +58,10 @@ export const useAudioRecorder = ({
 
   /**
    * Function to upload or send voice recording.
-   * @param multiSendEnabled boolean
+   * @param sendOnComplete boolean
    */
   const uploadVoiceRecording = useCallback(
-    async (multiSendEnabled: boolean) => {
+    async (sendOnComplete: boolean) => {
       try {
         const { recording, duration, waveformData } = audioRecorderManager.state.getLatestValue();
         await stopVoiceRecording();
@@ -112,18 +102,17 @@ export const useAudioRecorder = ({
 
         audioRecorderManager.reset();
 
-        if (multiSendEnabled) {
-          await attachmentManager.uploadAttachment(audioFile);
+        if (sendOnComplete) {
+          attachmentManager.upsertAttachments([audioFile]);
+          sendMessage();
         } else {
-          // FIXME: cannot call handleSubmit() directly as the function has stale reference to file uploads
           await attachmentManager.uploadAttachment(audioFile);
-          setIsScheduleForSubmit(true);
         }
       } catch (error) {
         console.log('Error uploading voice recording: ', error);
       }
     },
-    [audioRecorderManager, attachmentManager, stopVoiceRecording],
+    [audioRecorderManager, attachmentManager, sendMessage, stopVoiceRecording],
   );
 
   return {

package/src/components/MessageList/MessageFlashList.tsx

@@ -10,7 +10,7 @@ import {
 
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
-import { FlashListProps, FlashListRef, useFlashListContext } from '@shopify/flash-list';
+import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -53,14 +53,20 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
+import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
+type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
+
 let FlashList;
+let useFlashListContext: () => FlashListContextApi = () => undefined;
 
 try {
-  FlashList = require('@shopify/flash-list').FlashList;
+  const flashListModule = require('@shopify/flash-list');
+  FlashList = flashListModule.FlashList;
+  useFlashListContext = flashListModule.useFlashListContext;
 } catch {
   FlashList = undefined;
 }
@@ -996,6 +1002,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return;
     }
 
+    const closeCorrectionDeltaY = height - currentListHeightRef.current;
+    bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+
     const changedBy = currentListHeightRef.current - height;
     flashListRef.current?.getNativeScrollRef()?.setNativeProps({
       contentOffset: { x: 0, y: flashListRef.current?.getAbsoluteLastScrollOffset() + changedBy },
@@ -1132,7 +1141,7 @@ const FlashListFooterTypingAdapter = ({
   const typingUsersLengthRef = useRef<number>(typingUsers.length);
 
   useEffect(() => {
-    const listApi = api?.getRef();
+    const listApi = api?.getRef?.();
 
     if (!enabled || !listApi) {
       return;

package/src/components/MessageList/NetworkDownIndicator.tsx

@@ -52,7 +52,7 @@ const useStyles = () => {
         right: 0,
         top: 0,
         justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         ...errorNotification,
       },
       errorText: {

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

@@ -5,9 +5,9 @@ import { Pressable } from 'react-native-gesture-handler';
 import { emojis } from './emojis';
 
 import { useHasOwnReaction } from './hooks/useHasOwnReaction';
-import { toUnicodeScalarString } from './MessageReactionPicker';
+import { toUnicodeScalarString } from './utils/toUnicodeScalarString';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { StreamBottomSheetModalFlatList } from '../UIComponents';
@@ -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';
 
@@ -133,14 +133,6 @@ export const EmojiViewerButton = ({
   );
 };
 
-// TODO: V9: Move this to utils and also clean it up a bit.
-//  This was done quickly and in a bit of a hurry.
-export const toUnicodeScalarString = (emoji: string): string => {
-  const out: number[] = [];
-  for (const ch of emoji) out.push(ch.codePointAt(0)!);
-  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
-};
-
 /**
  * MessageReactionPicker - A high level component which implements all the logic required for a message overlay reaction list
  */

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,
@@ -128,12 +125,14 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
 
   const onSelectReaction = useStableCallback((reactionType: string) => {
-    setSelectedReaction(reactionType);
+    setSelectedReaction((currentReaction) =>
+      currentReaction === reactionType ? undefined : reactionType,
+    );
   });
 
   useEffect(() => {
     if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
-      setSelectedReaction(reactionTypes[0]);
+      setSelectedReaction(undefined);
     }
   }, [reactionTypes, selectedReaction]);
 
@@ -163,16 +162,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,
       });
     }
@@ -291,6 +290,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           </Text>
           <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
             <FlatList
+              showsHorizontalScrollIndicator={false}
               contentContainerStyle={[styles.contentContainer, contentContainer]}
               data={selectorReactions}
               getItemLayout={getItemLayout}
@@ -344,7 +344,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,33 +87,41 @@ 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');
   });
 
-  it('changes selected reaction when a reaction button is pressed', () => {
+  it('toggles the selected reaction when a reaction button is pressed twice', () => {
     const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    let reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
 
     fireEvent.press(reactionButtons[1]);
 
     expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+
+    fireEvent.press(reactionButtons[1]);
+
+    reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
   it('renders reactions list', () => {
     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/MessageMenu/utils/toUnicodeScalarString.ts

@@ -0,0 +1,5 @@
+export const toUnicodeScalarString = (emoji: string): string => {
+  const out: number[] = [];
+  for (const ch of emoji) out.push(ch.codePointAt(0)!);
+  return out.map((cp) => `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`).join('-');
+};

package/src/components/Poll/CreatePollContent.tsx

@@ -281,24 +281,32 @@ const useStyles = () => {
     return StyleSheet.create({
       scrollView: {
         flex: 1,
-        padding: primitives.spacingMd,
         backgroundColor: semantics.backgroundCoreElevation1,
       },
-      contentContainerStyle: { paddingBottom: 70 },
+      contentContainerStyle: {
+        alignItems: 'stretch',
+        padding: primitives.spacingMd,
+        paddingBottom: 70,
+        width: '100%',
+      },
       title: {
         color: semantics.textPrimary,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         flex: 1,

package/src/components/Poll/Poll.tsx

@@ -119,12 +119,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       headerTitle: {
         color: semantics.chatTextIncoming,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionsWrapper: {
         gap: primitives.spacingMd,