stream-chat-react-native-core 9.3.0 → 9.3.1-beta.10

package/src/components/ImageGallery/__tests__/ImageGalleryAdjustable.test.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store';
+import { ImageGallery } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const { View } = require('react-native');
+  return {
+    isFileSystemAvailable: jest.fn(() => true),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
+    NativeHandlers: { Video: View },
+  };
+});
+
+type HarnessProps = {
+  message: LocalMessage;
+  accessibilityEnabled?: boolean;
+  store: ImageGalleryStateStore;
+};
+
+const Harness = ({ accessibilityEnabled = true, message, store }: HarnessProps) => {
+  useEffect(() => {
+    const unsubscribe = store.registerSubscriptions();
+    return () => unsubscribe();
+  }, [store]);
+
+  const { attachments } = message;
+  store.openImageGallery({
+    messages: [message],
+    selectedAttachmentUrl: attachments?.[0]?.asset_url || attachments?.[0]?.image_url || '',
+  });
+
+  return (
+    <OverlayProvider
+      accessibility={{ enabled: accessibilityEnabled }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
+      <ImageGalleryContext.Provider
+        value={{ imageGalleryStateStore: store } as unknown as ImageGalleryContextValue}
+      >
+        <ImageGallery />
+      </ImageGalleryContext.Provider>
+    </OverlayProvider>
+  );
+};
+
+const findGalleryRoot = () =>
+  screen.getByLabelText('Image Gallery', { includeHiddenElements: true });
+
+const fireAccessibilityAction = (actionName: 'increment' | 'decrement') => {
+  fireEvent(findGalleryRoot(), 'accessibilityAction', { nativeEvent: { actionName } });
+};
+
+const renderWithAssets = (assetsCount: number, accessibilityEnabled = true) => {
+  const attachments = [
+    ...Array.from({ length: Math.max(assetsCount - 1, 0) }, () => generateImageAttachment()),
+    ...(assetsCount > 0 ? [generateVideoAttachment({ type: 'video' })] : []),
+  ];
+  const message = generateMessage({ attachments });
+  const store = new ImageGalleryStateStore();
+  render(<Harness accessibilityEnabled={accessibilityEnabled} message={message} store={store} />);
+  return { store };
+};
+
+describe('ImageGallery adjustable cycling', () => {
+  it('marks the root as adjustable with the position value when a11y is enabled and there is more than one asset', async () => {
+    renderWithAssets(3);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBe('adjustable');
+      expect(root.props.accessibilityValue).toEqual({ text: '1 of 3' });
+      expect(root.props.accessibilityActions).toEqual([
+        { name: 'increment' },
+        { name: 'decrement' },
+      ]);
+    });
+  });
+
+  it('does not apply the adjustable role when accessibility is disabled', async () => {
+    renderWithAssets(3, false);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBeUndefined();
+      expect(root.props.accessibilityActions).toBeUndefined();
+    });
+  });
+
+  it('moves to the next asset on increment and clamps at the last asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+  });
+
+  it('moves to the previous asset on decrement and clamps at the first asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+  });
+});

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

@@ -33,7 +33,13 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
       <Text style={styles.label}>
         {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
       </Text>
-      <Text style={styles.dot}>·</Text>
+      <Text
+        accessibilityElementsHidden
+        importantForAccessibility='no-hide-descendants'
+        style={styles.dot}
+      >
+        ·
+      </Text>
       <Text style={styles.time}>
         {t('duration/Message reminder', {
           milliseconds: timeLeftMs,

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

@@ -43,7 +43,13 @@ const SentToChannelHeaderWithContext = (props: SentToChannelHeaderPropsWithConte
       </Text>
       {showViewText ? (
         <>
-          <Text style={styles.dot}>·</Text>
+          <Text
+            accessibilityElementsHidden
+            importantForAccessibility='no-hide-descendants'
+            style={styles.dot}
+          >
+            ·
+          </Text>
           <Pressable onPress={onPress}>
             <Text style={styles.link}>{t('View')}</Text>
           </Pressable>

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

@@ -27,6 +27,13 @@ const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
 
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
+  // TODO (next major): this wrapper View is a perf cost we'd like to remove (row weight
+  // reduction). It can't be dropped without a breaking change: its `style` is the public
+  // `theme.messageItemView.authorWrapper.container` override hook, and it anchors the
+  // `message-author` testID. The not visible branch's spacer also can't be removed - it
+  // reserves the avatar column so grouped (non-last) received messages stay aligned.
+  // Revisit when we can change UserAvatar's API (testID + wrapper-style props) and accept
+  // the theme API break.
   return (
     <View style={container} testID='message-author'>
       {visible && message.user ? (

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

@@ -27,7 +27,9 @@ type SwipableMessageWrapperProps = Pick<
   onSwipe: () => void;
 };
 
-export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+export const SwipableMessageWrapper = React.memo(function SwipableMessageWrapper(
+  props: SwipableMessageWrapperProps,
+) {
   const { children, messageSwipeToReplyHitSlop, onSwipe } = props;
   const { MessageSwipeContent } = useComponentsContext();
   const isRTL = I18nManager.isRTL;
@@ -98,7 +100,6 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
               dampingRatio: 1,
               duration: 500,
               overshootClamping: true,
-              stiffness: 1,
             },
             () => {
               runOnJS(setShouldRenderAnimatedWrapper)(false);

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

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from 'react-native';
+import { ColorValue, Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChatContext } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
@@ -54,6 +55,7 @@ export type MessageContentPropsWithContext = Pick<
   | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
+  | 'hasInteractiveAccessibilityContent'
   | 'isMyMessage'
   | 'message'
   | 'messageContentOrder'
@@ -110,6 +112,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     enableMessageGroupingByUser,
     groupStyles,
     goToMessage,
+    hasInteractiveAccessibilityContent,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
@@ -127,6 +130,11 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     hidePaddingBottom,
   } = props;
   const { client } = useChatContext();
+  const accessibilityHint = useA11yLabel('a11y/Double tap and hold to activate contextual menu');
+  const a11ySenderLabel = useA11yLabel(
+    isMyMessage ? 'a11y/Message from you' : 'a11y/Message from {{sender}}',
+    isMyMessage ? undefined : { sender: message.user?.name || message.user?.id || '' },
+  );
   const {
     Attachment,
     FileAttachmentGroup,
@@ -169,47 +177,46 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     [message, isMessageAIGenerated],
   );
 
-  const getBorderRadius = () => {
+  // Merged background-color + border-radius object passed directly into the
+  // bubble's style array (no spread at the call site). Theme-defined radii
+  // override the group-position-computed defaults; theme-undefined radii are
+  // omitted so they don't override the computed defaults.
+  const bubbleColorAndRadius = useMemo<ViewStyle>(() => {
     // enum('top', 'middle', 'bottom', 'single')
     const groupPosition = groupStyles?.[0];
-
     const isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
-    let borderBottomLeftRadius = components.messageBubbleRadiusGroupBottom;
-    let borderBottomRightRadius = components.messageBubbleRadiusGroupBottom;
 
+    let computedBottomLeftRadius = components.messageBubbleRadiusGroupBottom;
+    let computedBottomRightRadius = components.messageBubbleRadiusGroupBottom;
     if (isBottomOrSingle) {
-      // add relevant sharp corner
+      // add relevant sharp corner (the "tail")
       if (isMyMessage) {
-        borderBottomRightRadius = components.messageBubbleRadiusTail;
+        computedBottomRightRadius = components.messageBubbleRadiusTail;
       } else {
-        borderBottomLeftRadius = components.messageBubbleRadiusTail;
+        computedBottomLeftRadius = components.messageBubbleRadiusTail;
       }
     }
 
-    return {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-    };
-  };
-
-  const getBorderRadiusFromTheme = () => {
-    const bordersFromTheme: Record<string, string | AnimatableNumericValue | undefined> = {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
+    const style: ViewStyle = {
+      backgroundColor,
+      borderBottomLeftRadius: borderBottomLeftRadius ?? computedBottomLeftRadius,
+      borderBottomRightRadius: borderBottomRightRadius ?? computedBottomRightRadius,
     };
+    if (borderRadius !== undefined) style.borderRadius = borderRadius;
+    if (borderTopLeftRadius !== undefined) style.borderTopLeftRadius = borderTopLeftRadius;
+    if (borderTopRightRadius !== undefined) style.borderTopRightRadius = borderTopRightRadius;
 
-    // filter out undefined values
-    for (const key in bordersFromTheme) {
-      if (bordersFromTheme[key] === undefined) {
-        delete bordersFromTheme[key];
-      }
-    }
-
-    return bordersFromTheme;
-  };
+    return style;
+  }, [
+    backgroundColor,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    groupStyles,
+    isMyMessage,
+  ]);
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
@@ -316,9 +323,18 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       )}
     </>
   );
+  const a11yPressableLabel = useMemo(() => {
+    if (!a11ySenderLabel) return undefined;
+    return message.text && !hasInteractiveAccessibilityContent
+      ? `${a11ySenderLabel}. ${message.text}`
+      : a11ySenderLabel;
+  }, [a11ySenderLabel, hasInteractiveAccessibilityContent, message.text]);
 
   return (
     <Pressable
+      accessibilityLabel={a11yPressableLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={hasInteractiveAccessibilityContent ? false : undefined}
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -357,12 +373,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       <View
         style={[
           styles.containerInner,
-          {
-            backgroundColor,
-            ...getBorderRadius(),
-            ...getBorderRadiusFromTheme(),
-          },
-          noBorder ? { borderWidth: 0 } : {},
+          bubbleColorAndRadius,
+          noBorder ? styles.noBorder : null,
           containerInner,
           messageGroupedSingleOrBottom
             ? isVeryLastMessage && enableMessageGroupingByUser
@@ -372,6 +384,15 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         ]}
         testID='message-content-wrapper'
       >
+        {a11ySenderLabel && Platform.OS !== 'android' && hasInteractiveAccessibilityContent ? (
+          <View
+            accessibilityLabel={a11ySenderLabel}
+            accessibilityHint={accessibilityHint}
+            accessible
+            pointerEvents='none'
+            style={StyleSheet.absoluteFill}
+          />
+        ) : null}
         {MessageContentTopView ? <MessageContentTopView /> : null}
         {hasContentSideViews ? (
           <View
@@ -404,6 +425,7 @@ const areEqual = (
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
+    hasInteractiveAccessibilityContent: prevHasInteractiveAccessibilityContent,
     isAttachmentEqual,
     message: prevMessage,
     messageContentOrder: prevMessageContentOrder,
@@ -417,6 +439,7 @@ const areEqual = (
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
+    hasInteractiveAccessibilityContent: nextHasInteractiveAccessibilityContent,
     message: nextMessage,
     messageContentOrder: nextMessageContentOrder,
     myMessageTheme: nextMyMessageTheme,
@@ -424,6 +447,10 @@ const areEqual = (
     t: nextT,
   } = nextProps;
 
+  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
+    return false;
+  }
+
   if (prevBackgroundColor !== nextBackgroundColor) {
     return false;
   }
@@ -559,8 +586,11 @@ export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 export const MessageContent = (props: MessageContentProps) => {
   const {
     alignment,
+    files,
     goToMessage,
     groupStyles,
+    hasInteractiveAccessibilityContent,
+    images,
     isMessageAIGenerated,
     isMyMessage,
     message,
@@ -571,8 +601,6 @@ export const MessageContent = (props: MessageContentProps) => {
     otherAttachments,
     preventPress,
     threadList,
-    files,
-    images,
     videos,
   } = useMessageContext();
   const {
@@ -627,6 +655,7 @@ export const MessageContent = (props: MessageContentProps) => {
         enableMessageGroupingByUser,
         goToMessage,
         groupStyles,
+        hasInteractiveAccessibilityContent,
         isAttachmentEqual,
         isMessageAIGenerated,
         isMyMessage,
@@ -684,6 +713,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   galleryContainer: {},
+  noBorder: { borderWidth: 0 },
   rightAlignContent: {
     justifyContent: 'flex-end',
   },

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

@@ -69,7 +69,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   const isEdited = isEditedMessage(message) && !isAIGenerated;
 
   return (
-    <View style={[styles.container, container]} testID='message-status-time'>
+    <View
+      accessible
+      accessibilityRole='text'
+      style={[styles.container, container]}
+      testID='message-status-time'
+    >
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
         <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
           {message.user.name}

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

@@ -212,6 +212,7 @@ export type MessageItemViewPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'contextMenuAnchorRef'
   | 'members'
+  | 'threadList'
 > &
   Pick<
     MessagesContextValue,
@@ -243,6 +244,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     reactionListPosition,
     reactionListType,
     setQuotedMessage,
+    threadList,
   } = props;
   const {
     MessageAuthor,
@@ -357,9 +359,11 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
             </View>
           </View>
 
-          <View style={styles.repliesContainer}>
-            <MessageReplies />
-          </View>
+          {!threadList && !!message.reply_count ? (
+            <View style={styles.repliesContainer}>
+              <MessageReplies />
+            </View>
+          ) : null}
 
           {reactionListPosition === 'bottom' && ReactionListBottom ? (
             <ReactionListBottom type={reactionListType} />
@@ -526,6 +530,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     setQuotedMessage,
     lastGroupMessage,
     members,
+    threadList,
   } = useMessageContext();
 
   const {
@@ -560,6 +565,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
         setQuotedMessage,
         lastGroupMessage,
         members,
+        threadList,
       }}
       {...props}
     />

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

@@ -75,10 +75,18 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     return null;
   }
 
+  const replyCountLabel =
+    message.reply_count === 1
+      ? t('1 Reply')
+      : t('{{ replyCount }} Replies', { replyCount: message.reply_count });
+
   return (
     <View style={[styles.container, container]}>
       {alignment === 'left' ? connector : null}
       <Pressable
+        accessibilityHint={t('a11y/Double tap to view thread')}
+        accessibilityLabel={replyCountLabel}
+        accessibilityRole='button'
         disabled={preventPress}
         onLongPress={(event) => {
           if (onLongPress) {
@@ -114,13 +122,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         testID='message-replies'
       >
         <MessageRepliesAvatars />
-        <Text style={[styles.messageRepliesText, messageRepliesText]}>
-          {message.reply_count === 1
-            ? t('1 Reply')
-            : t('{{ replyCount }} Replies', {
-                replyCount: message.reply_count,
-              })}
-        </Text>
+        <Text style={[styles.messageRepliesText, messageRepliesText]}>{replyCountLabel}</Text>
       </Pressable>
       {alignment === 'right' ? connector : null}
     </View>

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

@@ -24,7 +24,11 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
   const avatars = message?.thread_participants || [];
 
   return (
-    <View style={avatarStackContainer}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={avatarStackContainer}
+    >
       <UserAvatarStack users={avatars} avatarSize='sm' maxVisible={3} overlap={0.4} />
     </View>
   );

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
@@ -12,6 +13,7 @@ import { CheckAll } from '../../../icons/checks';
 import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
+import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 export type MessageStatusPropsWithContext = Pick<
@@ -32,10 +34,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     },
   } = useTheme();
 
-  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
-    return null;
-  }
-
   const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
 
   // Variables to determine the status of the message
@@ -48,42 +46,41 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     !read &&
     message.type !== 'ephemeral';
 
+  const accessibilityLabel = useA11yLabel(
+    read
+      ? 'a11y/Read'
+      : delivered
+        ? 'a11y/Delivered'
+        : sending
+          ? 'a11y/Sending'
+          : sent
+            ? 'a11y/Sent'
+            : '',
+  );
+
+  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+    return null;
+  }
+
   return (
-    <View style={[styles.container, container]}>
-      {read ? (
-        <CheckAll
-          height={16}
-          stroke={styles.readCheck.color}
-          width={16}
-          accessibilityLabel='Read'
-          {...checkAllIcon}
-        />
-      ) : delivered ? (
-        <CheckAll
-          stroke={styles.deliveredCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Delivered'
-          {...checkAllIcon}
-        />
-      ) : sending ? (
-        <Time
-          stroke={styles.sendingCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sending'
-          {...timeIcon}
-        />
-      ) : sent ? (
-        <Check
-          stroke={styles.sentCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sent'
-          {...checkIcon}
-        />
-      ) : null}
-    </View>
+    <>
+      <HiddenA11yText label={accessibilityLabel} />
+      <View
+        accessibilityElementsHidden={!!accessibilityLabel}
+        importantForAccessibility={accessibilityLabel ? 'no-hide-descendants' : undefined}
+        style={[styles.container, container]}
+      >
+        {read ? (
+          <CheckAll height={16} stroke={styles.readCheck.color} width={16} {...checkAllIcon} />
+        ) : delivered ? (
+          <CheckAll stroke={styles.deliveredCheck.color} height={16} width={16} {...checkAllIcon} />
+        ) : sending ? (
+          <Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+        ) : sent ? (
+          <Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+        ) : null}
+      </View>
+    </>
   );
 };