stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

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

@@ -92,7 +92,7 @@ describe('MessageList', () => {
     });
   });
 
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to default(always)', async () => {
+  it('should render deleted message in the list', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -124,135 +124,6 @@ describe('MessageList', () => {
     });
   });
 
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to sender', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ type: 'deleted', user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='sender'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('message-deleted')).toBeTruthy();
-    });
-  });
-
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to receiver', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ type: 'deleted', user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { getByTestId, queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='receiver'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-deleted')).toBeTruthy();
-      expect(queryByTestId('only-visible-to-you')).toBeNull();
-    });
-  });
-
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to never', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ type: 'deleted', user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='never'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('message-deleted')).toBeNull();
-      expect(queryByTestId('only-visible-to-you')).toBeNull();
-    });
-  });
-
-  it('should render deleted message in the list', async () => {
-    const user1 = generateUser();
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ type: 'deleted', user: user1 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { getByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-deleted')).toBeTruthy();
-    });
-  });
-
   it('should render the typing indicator when typing object is non empty', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({

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/MessageList/hooks/useMessageList.ts

@@ -2,11 +2,6 @@ import { useMemo } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import {
-  DeletedMessagesVisibilityType,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
@@ -27,35 +22,8 @@ export type MessageGroupStyles = {
   [key: string]: string[];
 };
 
-export const shouldIncludeMessageInList = (
-  message: LocalMessage,
-  options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
-) => {
-  const { deletedMessagesVisibilityType, userId } = options;
-  const isMessageTypeDeleted = message.type === 'deleted';
-  const isSender = message.user?.id === userId;
-
-  if (!isMessageTypeDeleted) {
-    return true;
-  }
-
-  switch (deletedMessagesVisibilityType) {
-    case 'always':
-      return true;
-    case 'sender':
-      return isSender;
-    case 'receiver':
-      return !isSender;
-    case 'never':
-    default:
-      return false;
-  }
-};
-
 export const useMessageList = (params: UseMessageListParams) => {
   const { threadList, isLiveStreaming, isFlashList = false } = params;
-  const { client } = useChatContext();
-  const { deletedMessagesVisibilityType } = useMessagesContext();
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
@@ -63,14 +31,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
     for (const message of messageList) {
-      if (
-        !shouldIncludeMessageInList(message, {
-          deletedMessagesVisibilityType,
-          userId: client.userID,
-        })
-      ) {
-        continue;
-      }
       if (isFlashList) {
         newMessageList.push(message);
       } else {
@@ -78,7 +38,7 @@ export const useMessageList = (params: UseMessageListParams) => {
       }
     }
     return newMessageList;
-  }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
+  }, [messageList, isFlashList]);
 
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 

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/MessageActionList.tsx

@@ -5,11 +5,11 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
-export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionListItem'> & {
+export type MessageActionListProps = {
   /**
    * Function to close the message actions bottom sheet
    * @returns void
@@ -22,7 +22,8 @@ export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionLi
 };
 
 export const MessageActionList = (props: MessageActionListProps) => {
-  const { MessageActionListItem, messageActions } = props;
+  const { messageActions } = props;
+  const { MessageActionListItem } = useComponentsContext();
   const {
     theme: {
       messageMenu: {

package/src/components/MessageMenu/MessageMenu.tsx

@@ -5,58 +5,46 @@ import { useWindowDimensions } from 'react-native';
 import { MessageActionType } from './MessageActionListItem';
 
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 
 export type MessageMenuProps = PropsWithChildren<
-  Partial<
-    Pick<
-      MessagesContextValue,
-      | 'MessageActionList'
-      | 'MessageActionListItem'
-      | 'MessageReactionPicker'
-      | 'MessageUserReactions'
-      | 'MessageUserReactionsAvatar'
-      | 'MessageUserReactionsItem'
-    >
-  > &
-    Partial<Pick<MessageContextValue, 'message'>> & {
-      /**
-       * Function to close the message actions bottom sheet
-       * @returns void
-       */
-      dismissOverlay: () => void;
-      /**
-       * An array of message actions to render
-       */
-      messageActions: MessageActionType[];
-      /**
-       * Boolean to determine if there are message actions
-       */
-      showMessageReactions: boolean;
-      /**
-       * Boolean to determine if the overlay is visible.
-       */
-      visible: boolean;
-      /**
-       * Function to handle reaction on press
-       * @param reactionType
-       * @returns
-       */
-      handleReaction?: (reactionType: string) => Promise<void>;
-      /**
-       * The selected reaction
-       */
-      selectedReaction?: string;
+  Partial<Pick<MessageContextValue, 'message'>> & {
+    /**
+     * Function to close the message actions bottom sheet
+     * @returns void
+     */
+    dismissOverlay: () => void;
+    /**
+     * An array of message actions to render
+     */
+    messageActions: MessageActionType[];
+    /**
+     * Boolean to determine if there are message actions
+     */
+    showMessageReactions: boolean;
+    /**
+     * Boolean to determine if the overlay is visible.
+     */
+    visible: boolean;
+    /**
+     * Function to handle reaction on press
+     * @param reactionType
+     * @returns
+     */
+    handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
 
-      layout: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-      };
-    }
+    layout: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+  }
 >;
 
 // TODO: V9: Either remove this or refactor it so that it's useful again, as its logic

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

@@ -11,6 +11,7 @@ import { useFetchReactions } from './hooks/useFetchReactions';
 import { ReactionButton } from './ReactionButton';
 
 import { useBottomSheetContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -23,7 +24,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';
@@ -39,12 +40,7 @@ const getItemLayout = (_, index: number) => ({
   index,
 });
 
-export type MessageUserReactionsProps = Partial<
-  Pick<
-    MessagesContextValue,
-    'MessageUserReactionsAvatar' | 'MessageUserReactionsItem' | 'supportedReactions'
-  >
-> &
+export type MessageUserReactionsProps = Partial<Pick<MessagesContextValue, 'supportedReactions'>> &
   Partial<Pick<MessageContextValue, 'message'>> & {
     /**
      * An array of reactions
@@ -93,47 +89,34 @@ 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) => {
   const styles = useStyles();
   const [showMoreReactions, setShowMoreReactions] = useState(false);
-  const {
-    message,
-    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
-    MessageUserReactionsItem: propMessageUserReactionsItem,
-    reactions: propReactions,
-    selectedReaction: propSelectedReaction,
-    supportedReactions: propSupportedReactions,
-  } = props;
+  const { message, reactions: propReactions, supportedReactions: propSupportedReactions } = props;
   const selectorListRef = useRef<FlatList>(null);
   const { close } = useBottomSheetContext();
   const reactionTypes = useMemo(
     () => Object.keys(message?.reaction_groups ?? {}),
     [message?.reaction_groups],
   );
-  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(
-    propSelectedReaction ?? reactionTypes[0],
-  );
-  const {
-    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
-    MessageUserReactionsItem: contextMessageUserReactionsItem,
-    supportedReactions: contextSupportedReactions,
-  } = useMessagesContext();
+  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const { MessageUserReactionsItem } = useComponentsContext();
   const { handleReaction } = useMessageContext();
   const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
-  const MessageUserReactionsAvatar =
-    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
-  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 +146,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,
       });
     }
@@ -226,13 +209,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 
   const renderItem = useCallback(
     ({ item }: { item: Reaction }) => (
-      <MessageUserReactionsItem
-        MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-        reaction={item}
-        supportedReactions={supportedReactions ?? []}
-      />
+      <MessageUserReactionsItem reaction={item} supportedReactions={supportedReactions ?? []} />
     ),
-    [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
+    [MessageUserReactionsItem, supportedReactions],
   );
 
   const handleSelectReaction = useStableCallback((emoji: string) => {
@@ -281,11 +260,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           <EmojiPickerList onSelectReaction={handleSelectReaction} renderFullInitially={false} />
         </Animated.View>
       ) : (
-        <Animated.View
-          key={'reaction-details'}
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-        >
+        <Animated.View key={'reaction-details'} exiting={FadeOut.duration(200)}>
           <Text style={[styles.reactionsText, reactionsText]}>
             {t('{{count}} Reactions', { count: totalReactionCount })}
           </Text>
@@ -345,7 +320,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

@@ -4,7 +4,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useMessageContext } from '../../contexts';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
@@ -14,10 +14,7 @@ import { primitives } from '../../theme';
 import type { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 
-export type MessageUserReactionsItemProps = Pick<
-  MessagesContextValue,
-  'MessageUserReactionsAvatar'
-> & {
+export type MessageUserReactionsItemProps = {
   /**
    * The reaction object
    */
@@ -29,10 +26,10 @@ export type MessageUserReactionsItemProps = Pick<
 };
 
 export const MessageUserReactionsItem = ({
-  MessageUserReactionsAvatar,
   reaction,
   supportedReactions,
 }: MessageUserReactionsItemProps) => {
+  const { MessageUserReactionsAvatar } = useComponentsContext();
   const { id, name, type } = reaction;
   const {
     theme: {
@@ -64,10 +61,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 +102,7 @@ const useStyles = () => {
           textAlign: 'left',
         },
         avatarSubtitle: {
-          fontSize: primitives.typographyFontSizeSm,
+          fontSize: primitives.typographyFontSizeXs,
           color: semantics.textTertiary,
         },
         avatarNameContainer: {

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

@@ -6,6 +6,7 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import { LocalMessage, ReactionResponse } from 'stream-chat';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessagesContextValue,
   MessagesProvider,
@@ -42,18 +43,18 @@ const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-        <MessagesProvider
-          value={
-            {
-              MessageUserReactionsAvatar: () => null,
-              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-              ),
-            } as unknown as MessagesContextValue
-          }
+        <WithComponents
+          overrides={{
+            MessageUserReactionsAvatar: () => null,
+            MessageUserReactionsItem: (itemProps: MessageUserReactionsItemProps) => (
+              <Text>{itemProps.reaction.id + ' ' + itemProps.reaction.type}</Text>
+            ),
+          }}
         >
-          <MessageUserReactions {...defaultProps} {...props} />
-        </MessagesProvider>
+          <MessagesProvider value={{} as unknown as MessagesContextValue}>
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </WithComponents>
       </TranslationProvider>
     </ThemeProvider>,
   );
@@ -87,33 +88,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', () => {