stream-chat-react-native-core 4.0.0-beta.1 → 4.0.0-beta.5

package/src/components/Message/MessageSimple/utils/renderText.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+// @ts-ignore
+import { ASTNode, SingleASTNode } from 'simple-markdown';
+
+import { ListOutput, ListOutputProps } from './renderText';
+
+describe('list', () => {
+  const createNode = ({
+    amount,
+    ordered = false,
+    start = 1,
+  }: {
+    amount: number;
+    ordered?: boolean;
+    start?: number;
+  }): SingleASTNode => ({
+    items: Array.from(Array(amount).keys()),
+    ordered,
+    start,
+    type: 'text',
+  });
+
+  const mockOutput = (node: ASTNode) => <Text>{node}</Text>;
+  const MockText = ({ node, output, state }: ListOutputProps) => (
+    <>
+      <ListOutput node={node} output={output} state={state} styles={{}} />
+    </>
+  );
+
+  it('renders numbered items', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 1 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders numbered items from a start index', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 3 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+  });
+
+  it('does not throw an error if an item is empty', async () => {
+    const node = {
+      ...createNode({ amount: 3, ordered: true }),
+      items: ['Not empty', null, 'Not empty'],
+    };
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders an unordered list', async () => {
+    const node = createNode({ amount: 3 });
+    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+  });
+});

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { GestureResponderEvent, Linking, Text, View } from 'react-native';
-import anchorme from 'anchorme';
-import truncate from 'lodash/truncate';
+import React, { PropsWithChildren } from 'react';
+import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
+
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+
+import truncate from 'lodash/truncate';
 import {
   DefaultRules,
   defaultRules,
@@ -11,11 +12,15 @@ import {
   ParseFunction,
   parseInline,
   ReactNodeOutput,
+  ReactOutput,
   SingleASTNode,
+  State,
 } from 'simple-markdown';
 
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { parseLinksFromText } from './parseLinks';
 
+import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
+import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,8 +31,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
-import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
-import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 const defaultMarkdownStyles: MarkdownStyle = {
   inlineCode: {
@@ -51,7 +55,6 @@ const defaultMarkdownStyles: MarkdownStyle = {
   mentions: {
     fontWeight: '700',
   },
-  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
   paragraph: {
     marginBottom: 8,
     marginTop: 8,
@@ -125,16 +128,14 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = anchorme(newText, {
-    list: true,
-  });
+  const urls = parseLinksFromText(newText);
 
   for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
+    const displayLink = truncate(urlInfo.encoded, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;
+    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
@@ -172,7 +173,7 @@ export const renderText = <
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
 
-  const react: ReactNodeOutput = (node, output, { ...state }) => {
+  const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
@@ -250,56 +251,24 @@ export const renderText = <
     );
   };
 
-  const listLevels = {
-    sub: 'sub',
-    top: 'top',
-  };
-
-  /**
-   * For lists and sublists, the default behavior of the markdown library we use is
-   * to always renumber any list, so all ordered lists start from 1.
-   *
-   * This custom rule overrides this behavior both for top level lists and sublists,
-   * in order to start the numbering from the number of the first list item provided.
-   * */
-  const customListAtLevel =
-    (level: keyof typeof listLevels): ReactNodeOutput =>
-    (node, output, { ...state }) => {
-      const items = node.items.map((item: Array<SingleASTNode>, index: number) => {
-        const withinList = item.length > 1 && item[1].type === 'list';
-        const content = output(item, { ...state, withinList });
-
-        const isTopLevelText =
-          ['text', 'paragraph', 'strong'].includes(item[0].type) && withinList === false;
-
-        return (
-          <View key={index} style={styles.listRow}>
-            <Text style={styles.listItemNumber}>
-              {node.ordered ? `${node.start + index}. ` : `\u2022`}
-            </Text>
-            <Text style={[styles.listItemText, isTopLevelText && { marginBottom: 0 }]}>
-              {content}
-            </Text>
-          </View>
-        );
-      });
-
-      const isSublist = level === 'sub';
-      return (
-        <View key={state.key} style={[isSublist ? styles.list : styles.sublist]}>
-          {items}
-        </View>
-      );
-    };
+  const list: ReactNodeOutput = (node, output, state) => (
+    <ListOutput
+      key={`list-${state.key}`}
+      node={node}
+      output={output}
+      state={state}
+      styles={styles}
+    />
+  );
 
   const customRules = {
-    link: { react },
-    list: { react: customListAtLevel('top') },
+    link: { link },
+    list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
-    sublist: { react: customListAtLevel('sub') },
+    sublist: { react: list },
     ...(mentionedUsers
       ? {
           mentions: {
@@ -328,3 +297,69 @@ export const renderText = <
     </Markdown>
   );
 };
+
+export interface ListOutputProps {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles?: Partial<MarkdownStyle>;
+}
+
+/**
+ * For lists and sublists, the default behavior of the markdown library we use is
+ * to always renumber any list, so all ordered lists start from 1.
+ *
+ * This custom rule overrides this behavior both for top level lists and sublists,
+ * in order to start the numbering from the number of the first list item provided.
+ */
+export const ListOutput = ({ node, output, state, styles }: ListOutputProps) => {
+  let isSublist = state.withinList;
+  const parentTypes = ['text', 'paragraph', 'strong'];
+
+  return (
+    <View key={state.key} style={isSublist ? styles?.sublist : styles?.list}>
+      {node.items.map((item: SingleASTNode, index: number) => {
+        const indexAfterStart = node.start + index;
+
+        if (item === null) {
+          return (
+            <ListRow key={index} style={styles?.listRow} testID='list-item'>
+              <Bullet index={node.ordered && indexAfterStart} />
+            </ListRow>
+          );
+        }
+
+        isSublist = item.length > 1 && item[1].type === 'list';
+        const isSublistWithinText = parentTypes.includes((item[0] ?? {}).type) && isSublist;
+        const style = isSublistWithinText ? { marginBottom: 0 } : {};
+
+        return (
+          <ListRow key={index} style={styles?.listRow} testID='list-item'>
+            <Bullet index={node.ordered && indexAfterStart} />
+            <ListItem key={1} style={[styles?.listItemText, style]}>
+              {output(item, state)}
+            </ListItem>
+          </ListRow>
+        );
+      })}
+    </View>
+  );
+};
+
+interface BulletProps extends TextProps {
+  index?: number;
+}
+
+const Bullet = ({ index, style }: BulletProps) => (
+  <Text key={0} style={[style, defaultMarkdownStyles.listItemNumber]}>
+    {index ? `${index}. ` : '\u2022 '}
+  </Text>
+);
+
+const ListRow = (props: PropsWithChildren<ViewProps>) => (
+  <Text style={[props.style, defaultMarkdownStyles.listRow]}>{props.children}</Text>
+);
+
+const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
+  <Text style={style}>{children}</Text>
+);

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 export const useCreateMessageContext = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -2,9 +2,11 @@ import type { MessageResponse, Reaction } from 'stream-chat';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type {
+  MessageContextValue,
+  Reactions,
+} from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import type { Reactions } from '../../../contexts/messageContext/MessageContext';
 
 import type {
   DefaultAttachmentType,
@@ -16,6 +18,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
 
 export const useMessageActionHandlers = <
   At extends UnknownType = DefaultAttachmentType,
@@ -30,6 +33,7 @@ export const useMessageActionHandlers = <
   client,
   enforceUniqueReaction,
   message,
+  removeMessage,
   retrySendMessage,
   setEditingState,
   setQuotedMessageState,
@@ -37,6 +41,7 @@ export const useMessageActionHandlers = <
   updateMessage,
 }: Pick<
   MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  | 'removeMessage'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
@@ -58,8 +63,12 @@ export const useMessageActionHandlers = <
   );
 
   const handleDeleteMessage = async () => {
-    const data = await client.deleteMessage(message.id);
-    updateMessage(data.message);
+    if (message.status === MessageStatusTypes.FAILED) {
+      removeMessage(message);
+    } else {
+      const data = await client.deleteMessage(message.id);
+      updateMessage(data.message);
+    }
   };
 
   const handleToggleMuteUser = async () => {

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { Alert, Clipboard } from 'react-native';
 
+import { useMessageActionHandlers } from './useMessageActionHandlers';
+
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
-import { removeReservedFields } from '../utils/removeReservedFields';
+import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import {
   Copy,
   CurveLineLeftUp,
@@ -22,10 +24,6 @@ import {
   Unpin,
   UserDelete,
 } from '../../../icons';
-import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
-import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -36,7 +34,11 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
-import { useMessageActionHandlers } from './useMessageActionHandlers';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+import { removeReservedFields } from '../utils/removeReservedFields';
 
 export const useMessageActions = <
   At extends UnknownType = DefaultAttachmentType,
@@ -64,6 +66,7 @@ export const useMessageActions = <
   message,
   onThreadSelect,
   openThread,
+  removeMessage,
   retrySendMessage,
   selectReaction,
   setEditingState,
@@ -85,6 +88,7 @@ export const useMessageActions = <
   | 'handleRetry'
   | 'handleReaction'
   | 'handleThreadReply'
+  | 'removeMessage'
   | 'retrySendMessage'
   | 'setEditingState'
   | 'setQuotedMessageState'
@@ -119,6 +123,7 @@ export const useMessageActions = <
     client,
     enforceUniqueReaction,
     message,
+    removeMessage,
     retrySendMessage,
     setEditingState,
     setQuotedMessageState,
@@ -126,7 +131,7 @@ export const useMessageActions = <
     updateMessage,
   });
 
-  const error = message.type === 'error' || message.status === 'failed';
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const onOpenThread = () => {
     if (onThreadSelect) {

package/src/components/Message/utils/messageActions.ts

@@ -1,6 +1,5 @@
-import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
-import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -11,6 +10,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
 
 export type MessageActionsParams<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Message/utils/removeReservedFields.ts

@@ -1,4 +1,3 @@
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -9,6 +8,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 export const removeReservedFields = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/MessageInput/AttachButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -9,8 +10,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CommandsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -13,8 +14,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Lightning } from '../../icons/Lightning';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CooldownTimer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type CooldownTimerProps = {

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -3,7 +3,6 @@ import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
-import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import {
   FileUpload,
   MessageInputContextValue,
@@ -15,8 +14,6 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,6 +24,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
+
+import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
 

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -10,8 +10,6 @@ import {
 } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,6 +20,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
 

package/src/components/MessageInput/InputButtons.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type {

package/src/components/MessageInput/MessageInput.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { useCountdown } from './hooks/useCountdown';
+import type { UserResponse } from 'stream-chat';
 
-import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
-import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
+import { useCountdown } from './hooks/useCountdown';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -20,6 +18,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   SuggestionsContextValue,
   useSuggestionsContext,
@@ -32,8 +31,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import { CircleClose, CurveLineLeftUp, Edit, Lightning } from '../../icons';
 
-import type { UserResponse } from 'stream-chat';
-
 import type { Asset } from '../../native';
 import type {
   DefaultAttachmentType,
@@ -45,6 +42,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
+import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -8,8 +9,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { Check } from '../../icons';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -12,6 +11,7 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import { Check } from '../../icons';
 
 import type {
   DefaultAttachmentType,

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { AttachButton } from '../AttachButton';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { AttachButton } from '../AttachButton';
 
 describe('AttachButton', () => {
   it('should render an enabled AttachButton', async () => {