stream-chat-react-native-core 9.0.0-beta.3 → 9.0.0-beta.30

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

@@ -6,14 +6,10 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Check } from '../../../icons/Check';
-import { CheckAll } from '../../../icons/CheckAll';
-import { Time } from '../../../icons/Time';
+import { Check } from '../../../icons/checkmark';
+import { CheckAll } from '../../../icons/checks';
+import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
@@ -21,14 +17,10 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageStatusPropsWithContext = Pick<
   MessageContextValue,
   'deliveredToCount' | 'message' | 'readBy'
-> &
-  Pick<MessagesContextValue, 'MessageTimestamp'> & {
-    formattedDate?: string | Date;
-    timestamp?: string | Date;
-  };
+>;
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
+  const { deliveredToCount, message, readBy } = props;
 
   const styles = useStyles();
 
@@ -37,7 +29,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
-      semantics,
     },
   } = useTheme();
 
@@ -62,14 +53,14 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       {read ? (
         <CheckAll
           height={16}
-          stroke={semantics.accentPrimary}
+          stroke={styles.readCheck.color}
           width={16}
           accessibilityLabel='Read'
           {...checkAllIcon}
         />
       ) : delivered ? (
         <CheckAll
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.deliveredCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Delivered'
@@ -77,7 +68,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sending ? (
         <Time
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sendingCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sending'
@@ -85,14 +76,13 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sent ? (
         <Check
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sentCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sent'
           {...checkIcon}
         />
       ) : null}
-      <MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
     </View>
   );
 };
@@ -101,20 +91,8 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const {
-    deliveredToCount: prevDeliveredBy,
-    message: prevMessage,
-    readBy: prevReadBy,
-    formattedDate: prevFormattedDate,
-    timestamp: prevTimestamp,
-  } = prevProps;
-  const {
-    deliveredToCount: nextDeliveredBy,
-    message: nextMessage,
-    readBy: nextReadBy,
-    formattedDate: nextFormattedDate,
-    timestamp: nextTimestamp,
-  } = nextProps;
+  const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
+  const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;
 
   const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
   if (!deliveredByEqual) {
@@ -132,16 +110,6 @@ const areEqual = (
     return false;
   }
 
-  const timestampEqual = prevTimestamp === nextTimestamp;
-  if (!timestampEqual) {
-    return false;
-  }
-
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) {
-    return false;
-  }
-
   return true;
 };
 
@@ -155,7 +123,6 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { channel } = useChannelContext();
   const { deliveredToCount, message, readBy } = useMessageContext();
-  const { MessageTimestamp } = useMessagesContext();
 
   const channelMembersCount = Object.keys(channel?.state.members).length;
 
@@ -167,7 +134,6 @@ export const MessageStatus = (props: MessageStatusProps) => {
         deliveredToCount,
         message,
         readBy,
-        MessageTimestamp,
       }}
       {...props}
     />
@@ -195,6 +161,18 @@ const useStyles = () => {
         flexDirection: 'row',
         gap: primitives.spacingXxs,
       },
+      readCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
+      },
+      deliveredCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sendingCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sentCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
     });
   }, [shouldUseOverlayStyles, semantics]);
 };

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -7,7 +7,11 @@ import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateVideoAttachment } from '../../../../mock-builders/generator/attachment';
+import {
+  generateAttachmentAction,
+  generateGiphyAttachment,
+  generateVideoAttachment,
+} from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -326,6 +330,73 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBe(0);
   });
 
+  it('keeps content padding for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
+    });
+
+    const giphyAttachment = screen.getByTestId('giphy-attachment');
+    let ancestor = giphyAttachment.parent;
+    let contentContainerStyle;
+
+    while (ancestor && !contentContainerStyle) {
+      const flattenedStyle = StyleSheet.flatten(ancestor.props.style);
+      if (
+        flattenedStyle &&
+        'paddingTop' in flattenedStyle &&
+        'paddingHorizontal' in flattenedStyle &&
+        'paddingBottom' in flattenedStyle
+      ) {
+        contentContainerStyle = flattenedStyle;
+        break;
+      }
+      ancestor = ancestor.parent;
+    }
+
+    expect(contentContainerStyle).toBeTruthy();
+    expect(contentContainerStyle.paddingTop).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingHorizontal).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
+  });
+
+  it('does not render the quoted reply for an ephemeral giphy preview', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        {
+          ...generateGiphyAttachment(),
+          actions: [
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+          ],
+        },
+      ],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toBeTruthy();
+    });
+
+    expect(screen.queryByText('quoted message')).toBeFalsy();
+  });
+
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

@@ -1,14 +1,19 @@
 import React from 'react';
 
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+import {
+  generateAttachmentAction,
+  generateGiphyAttachment,
+} from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -121,6 +126,23 @@ describe('MessageItemView', () => {
     });
   });
 
+  it('exposes contextMenuAnchorRef through MessageContext for custom renderers', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    const CustomMessageItemView = () => {
+      const { contextMenuAnchorRef } = useMessageContext();
+
+      return <Text ref={contextMenuAnchorRef}>Custom Message Item</Text>;
+    };
+
+    renderMessage({ message }, { MessageItemView: CustomMessageItemView });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Custom Message Item')).not.toBeNull();
+    });
+  });
+
   it('renders MessageSpacer component if defined', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
@@ -238,4 +260,51 @@ describe('MessageItemView', () => {
       });
     });
   });
+
+  it('keeps the message shell background for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const wrapperStyle = StyleSheet.flatten(
+        screen.getByTestId('message-content-wrapper').props.style,
+      );
+      expect(wrapperStyle.backgroundColor).not.toBe('transparent');
+    });
+  });
+
+  it('renders a standalone shell for an ephemeral giphy preview with a quoted reply', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        {
+          ...generateGiphyAttachment(),
+          actions: [
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+          ],
+        },
+      ],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const wrapperStyle = StyleSheet.flatten(
+        screen.getByTestId('message-content-wrapper').props.style,
+      );
+      expect(wrapperStyle.backgroundColor).toBe('transparent');
+    });
+  });
 });

package/src/components/Message/MessageItemView/utils/generateMarkdownText.test.ts

@@ -4,6 +4,9 @@ describe('generateMarkdownText', () => {
   it.each([
     ['', null],
     ['  test message  ', 'test message'],
+    ['\uFFFC', ''],
+    [' \uFFFC ', ''],
+    ['hello\uFFFCworld', 'hello world'],
     ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
     [
       'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',

package/src/components/Message/MessageItemView/utils/generateMarkdownText.ts

@@ -9,8 +9,10 @@ export const generateMarkdownText = (text?: string) => {
     return null;
   }
 
+  const normalizedText = text.replace(/\uFFFC/g, ' ');
+
   // Trim the extra spaces from the text.
-  let resultText = text.trim();
+  let resultText = normalizedText.trim();
 
   // List of all the links present in the text.
   const linkInfos = parseLinksFromText(resultText);
@@ -24,7 +26,7 @@ export const generateMarkdownText = (text?: string) => {
     // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
     const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.url})`;
-    resultText = text.replace(normalRegEx, markdown);
+    resultText = normalizedText.replace(normalRegEx, markdown);
 
     // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
     // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com.

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

@@ -18,12 +18,14 @@ export const useCreateMessageContext = ({
   actionsEnabled,
   alignment,
   channel,
+  contextMenuAnchorRef,
   deliveredToCount,
   dismissOverlay,
   files,
   goToMessage,
   groupStyles,
   handleAction,
+  hasAttachmentActions,
   handleReaction,
   handleToggleReaction,
   hasReactions,
@@ -71,12 +73,14 @@ export const useCreateMessageContext = ({
       actionsEnabled,
       alignment,
       channel,
+      contextMenuAnchorRef,
       deliveredToCount,
       dismissOverlay,
       files,
       goToMessage,
       groupStyles: stableGroupStyles,
       handleAction,
+      hasAttachmentActions,
       handleReaction,
       handleToggleReaction,
       hasReactions,
@@ -114,6 +118,7 @@ export const useCreateMessageContext = ({
       alignment,
       goToMessage,
       stableGroupStyles,
+      hasAttachmentActions,
       hasReactions,
       messageHasOnlySingleAttachment,
       lastGroupMessage,

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

@@ -12,10 +12,22 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useStableCallback } from '../../../hooks';
+import {
+  useAfterKeyboardOpenCallback,
+  usePortalSettledCallback,
+  useStableCallback,
+} from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
+export const useWithPortalKeyboardSafety = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
+  const callbackAfterKeyboardOpen = useAfterKeyboardOpenCallback(callback);
+
+  return usePortalSettledCallback(callbackAfterKeyboardOpen);
+};
+
 export const useMessageActionHandlers = ({
   channel,
   client,
@@ -114,7 +126,7 @@ export const useMessageActionHandlers = ({
     }
   });
 
-  const handleEditMessage = useStableCallback(() => {
+  const handleEditMessage = useWithPortalKeyboardSafety(() => {
     setEditingState(message);
   });
 

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

@@ -25,8 +25,9 @@ import {
   Mute,
   Pin,
   Resend,
+  Sound,
   ThreadReply,
-  // Unpin,
+  Unpin,
   UnreadIndicator,
   UserDelete,
 } from '../../../icons';
@@ -330,8 +331,7 @@ export const useMessageActions = ({
     const unpinMessage: MessageActionType = {
       action: onTogglePinMessage,
       actionType: 'unpinMessage',
-      // TODO: V9: This icon does not exist yet, replace the old when when we get a new one
-      icon: <Pin width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <Unpin width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Unpin from Conversation'),
       type: 'standard',
     };
@@ -339,7 +339,11 @@ export const useMessageActions = ({
     const muteUser: MessageActionType = {
       action: onMuteUser,
       actionType: 'muteUser',
-      icon: <Mute fill={semantics.textSecondary} height={20} width={20} />,
+      icon: isMuted ? (
+        <Sound height={20} stroke={semantics.textSecondary} width={20} />
+      ) : (
+        <Mute fill={semantics.textSecondary} height={20} width={20} />
+      ),
       title: isMuted ? t('Unmute User') : t('Mute User'),
       type: 'standard',
     };

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

@@ -90,7 +90,7 @@ export const messageActions = ({
     actions.push(copyMessage);
   }
 
-  if (ownCapabilities.readEvents && !error && !isThreadMessage) {
+  if (ownCapabilities.readEvents && !error && !isThreadMessage && !isMyMessage) {
     actions.push(markUnread);
   }
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -5,7 +5,6 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   interpolate,
-  LinearTransition,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -54,6 +53,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
@@ -155,11 +155,11 @@ type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
     MessageInputContextValue,
     | 'audioRecorderManager'
     | 'additionalTextInputProps'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'asyncMessagesLockDistance'
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
-    | 'asyncMessagesMultiSendEnabled'
     | 'AttachmentUploadPreviewList'
     | 'AudioRecorder'
     | 'AudioRecordingInProgress'
@@ -219,7 +219,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     closePollCreationDialog,
     CreatePollContent,
     createPollOptionGap,
-    editing,
     InputView,
     MessageComposerLeadingView,
     MessageComposerTrailingView,
@@ -272,12 +271,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     [closeAttachmentPicker],
   );
 
-  useEffect(() => {
-    if (editing && inputBoxRef.current) {
-      inputBoxRef.current.focus();
-    }
-  }, [editing, inputBoxRef]);
-
   /**
    * Effect to get the draft data for legacy thread composer and set it to message composer.
    * TODO: This can be removed once we remove legacy thread composer.
@@ -383,7 +376,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               ]
             : null
         }
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
       >
         <PortalWhileClosingView portalHostName='overlay-composer' portalName='message-composer'>
           <View
@@ -419,7 +412,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <View style={[styles.container, container]}>
                 <MessageComposerLeadingView />
                 <Animated.View
-                  layout={LinearTransition.duration(200)}
+                  layout={transitions.layout200}
                   style={[
                     styles.inputBoxWrapper,
                     messageInputFloating ? [styles.shadow, inputFloatingContainer] : null,
@@ -438,7 +431,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
 
                     <Animated.View
                       style={[styles.inputContainer, inputContainer]}
-                      layout={LinearTransition.duration(200)}
+                      layout={transitions.layout200}
                     >
                       {!isRecordingStateIdle ? (
                         <AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
@@ -515,6 +508,7 @@ const areEqual = (
     asyncMessagesLockDistance: prevAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: prevAudioRecordingSendOnComplete,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
     channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
@@ -534,6 +528,7 @@ const areEqual = (
     asyncMessagesLockDistance: nextAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: nextAudioRecordingSendOnComplete,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
     channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
@@ -597,6 +592,12 @@ const areEqual = (
     return false;
   }
 
+  const audioRecordingSendOnCompleteEqual =
+    prevAudioRecordingSendOnComplete === nextAudioRecordingSendOnComplete;
+  if (!audioRecordingSendOnCompleteEqual) {
+    return false;
+  }
+
   const editingEqual = !!prevEditing === !!nextEditing;
   if (!editingEqual) {
     return false;
@@ -655,9 +656,9 @@ export const MessageComposer = (props: MessageComposerProps) => {
   const {
     audioRecorderManager,
     additionalTextInputProps,
+    audioRecordingSendOnComplete,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance,
     AttachmentUploadPreviewList,
     AudioRecorder,
@@ -720,9 +721,9 @@ export const MessageComposer = (props: MessageComposerProps) => {
         recordingStatus,
         micLocked,
         additionalTextInputProps,
+        audioRecordingSendOnComplete,
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
         asyncMessagesSlideToCancelDistance,
         AttachmentUploadPreviewList,
         AudioRecorder,
@@ -738,6 +739,7 @@ export const MessageComposer = (props: MessageComposerProps) => {
         closePollCreationDialog,
         compressImageQuality,
         CreatePollContent,
+        // TODO: probably not needed anymore, please check
         editing,
         Input,
         InputView,

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { InputButtons } from './components/InputButtons';
 import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
@@ -9,6 +9,7 @@ import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
+import { transitions } from '../../utils/transitions';
 
 export const MessageComposerLeadingView = () => {
   const {
@@ -24,7 +25,7 @@ export const MessageComposerLeadingView = () => {
 
   return isRecordingStateIdle ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[
         styles.inputButtonsContainer,
         messageInputFloating ? styles.shadow : null,