stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.10

package/src/components/MessageInput/__tests__/{MessageInput.test.js → MessageComposer.test.js}

@@ -14,7 +14,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -38,14 +38,14 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
   );
 };
 
-describe('MessageInput', () => {
+describe('MessageComposer', () => {
   let client;
   let channel;
 
@@ -63,7 +63,7 @@ describe('MessageInput', () => {
     });
   });
 
-  it('should render MessageInput', async () => {
+  it('should render MessageComposer', async () => {
     const channelProps = { channel };
 
     renderComponent({

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

@@ -4,7 +4,7 @@ import { Alert } from 'react-native';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import { MessageComposer } from 'stream-chat';
+import { MessageComposer as StreamMessageComposer } from 'stream-chat';
 
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import * as UseMessageComposerHooks from '../../../contexts/messageInputContext/hooks/useMessageComposer';
@@ -21,7 +21,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -45,7 +45,7 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
@@ -56,7 +56,7 @@ const editedMessageSetup = async ({ composerConfig, composition } = {}) => {
   const { client: chatClient, channels } = await initiateClientWithChannels();
   const channel = channels[0];
 
-  const messageComposer = new MessageComposer({
+  const messageComposer = new StreamMessageComposer({
     client: chatClient,
     composition,
     compositionContext: composition,

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -12,7 +12,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         dismissAttachmentUpload: { dismiss, dismissIcon, dismissIconColor },
       },
     },

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -64,7 +64,7 @@ const AttachmentPreviewCell = ({ children }: { children: React.ReactNode }) => (
 const ItemSeparatorComponent = () => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { itemSeparator },
       },
     },
@@ -93,6 +93,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
     ImageAttachmentUploadPreview,
     VideoAttachmentUploadPreview,
   } = props;
+  const { audioRecordingSendOnComplete } = useMessageInputContext();
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
@@ -103,14 +104,17 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
   const endShrinkCompensationX = useSharedValue(0);
-  const audioAttachments = attachments.filter(isAudioAttachmentPreview);
-  const nonAudioAttachments = attachments.filter(
+  const previewAttachments = attachments.filter(
+    (attachment) => !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
+  );
+  const audioAttachments = previewAttachments.filter(isAudioAttachmentPreview);
+  const nonAudioAttachments = previewAttachments.filter(
     (attachment) => !isAudioAttachmentPreview(attachment),
   );
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { audioAttachmentsContainer, flatList },
       },
     },
@@ -261,7 +265,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
     transform: [{ translateX: endShrinkCompensationX.value }],
   }));
 
-  if (!attachments.length) {
+  if (!previewAttachments.length) {
     return null;
   }
 
@@ -360,4 +364,4 @@ const styles = StyleSheet.create({
 });
 
 AttachmentUploadPreviewList.displayName =
-  'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}';
+  'AttachmentUploadPreviewList{messageComposer{attachmentUploadPreviewList}}';

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx

@@ -13,7 +13,7 @@ export const FileUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadInProgressIndicator },
+      messageComposer: { fileUploadInProgressIndicator },
     },
   } = useTheme();
 
@@ -38,7 +38,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadRetryIndicator },
+      messageComposer: { fileUploadRetryIndicator },
     },
   } = useTheme();
   const styles = useFileUploadRetryStyles();
@@ -83,7 +83,7 @@ export const FileUploadNotSupportedIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadNotSupportedIndicator },
+      messageComposer: { fileUploadNotSupportedIndicator },
     },
   } = useTheme();
 
@@ -107,7 +107,7 @@ export const ImageUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadInProgressIndicator },
+      messageComposer: { imageUploadInProgressIndicator },
     },
   } = useTheme();
   const styles = useImageUploadInProgressIndicatorStyles();
@@ -140,7 +140,7 @@ export const ImageUploadNotSupportedIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadNotSupportedIndicator },
+      messageComposer: { imageUploadNotSupportedIndicator },
     },
   } = useTheme();
   return (

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -40,7 +40,7 @@ export const FileAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         fileAttachmentUploadPreview: { wrapper },
       },
     },

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -36,7 +36,7 @@ export const ImageAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         imageAttachmentUploadPreview: { upload, wrapper },
       },
     },

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -75,7 +75,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         videoAttachmentUploadPreview: { durationContainer, durationText },
       },
     },

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -27,7 +27,7 @@ import { primitives } from '../../../../theme';
 type AudioRecorderPropsWithContext = Pick<
   MessageInputContextValue,
   | 'audioRecorderManager'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'stopVoiceRecording'
   | 'deleteVoiceRecording'
   | 'uploadVoiceRecording'
@@ -70,15 +70,15 @@ const StopRecording = ({
 };
 
 const UploadRecording = ({
-  asyncMessagesMultiSendEnabled,
+  audioRecordingSendOnComplete,
   uploadVoiceRecordingHandler,
 }: {
-  asyncMessagesMultiSendEnabled: boolean;
-  uploadVoiceRecordingHandler: (multiSendEnabled: boolean) => Promise<void>;
+  audioRecordingSendOnComplete: boolean;
+  uploadVoiceRecordingHandler: (sendOnComplete: boolean) => Promise<void>;
 }) => {
   const onUploadVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
-    uploadVoiceRecordingHandler(asyncMessagesMultiSendEnabled);
+    uploadVoiceRecordingHandler(audioRecordingSendOnComplete);
   };
 
   return (
@@ -116,7 +116,7 @@ const DeleteRecording = ({
 
 const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     slideToCancelStyle,
     deleteVoiceRecording,
     stopVoiceRecording,
@@ -131,7 +131,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecorder: { arrowLeftIcon, micContainer, micIcon, slideToCancelContainer },
       },
     },
@@ -144,7 +144,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
         <View style={styles.container}>
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -155,7 +155,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <StopRecording stopVoiceRecordingHandler={stopVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -201,7 +201,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
 export const AudioRecorder = (props: AudioRecorderProps) => {
   const {
     audioRecorderManager,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     stopVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -216,7 +216,7 @@ export const AudioRecorder = (props: AudioRecorderProps) => {
     <MemoizedAudioRecorder
       {...{
         audioRecorderManager,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         stopVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,
@@ -275,4 +275,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecorder.displayName = 'AudioRecorder{messageInput}';
+AudioRecorder.displayName = 'AudioRecorder{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -31,7 +31,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'asyncMessagesMinimumPressDuration'
   | 'asyncMessagesSlideToCancelDistance'
   | 'asyncMessagesLockDistance'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'audioRecorderManager'
   | 'startVoiceRecording'
   | 'deleteVoiceRecording'
@@ -67,7 +67,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -85,7 +85,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const { t } = useTranslationContext();
   const {
     theme: {
-      messageInput: { micButtonContainer },
+      messageComposer: { micButtonContainer },
       semantics,
     },
   } = useTheme();
@@ -156,7 +156,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       return;
     }
     if (status === 'recording') {
-      uploadVoiceRecording(asyncMessagesMultiSendEnabled);
+      uploadVoiceRecording(audioRecordingSendOnComplete);
     } else {
       resetAudioRecording();
     }
@@ -263,7 +263,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -281,7 +281,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
         asyncMessagesMinimumPressDuration,
         asyncMessagesSlideToCancelDistance,
         asyncMessagesLockDistance,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         startVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,
@@ -294,7 +294,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
   );
 };
 
-AudioRecordingButton.displayName = 'AudioRecordingButton{messageInput}';
+AudioRecordingButton.displayName = 'AudioRecordingButton{messageComposer}';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx

@@ -32,7 +32,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingInProgress: { container, durationText },
       },
     },
@@ -115,4 +115,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageInput}';
+AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -48,7 +48,7 @@ export const AudioRecordingLockIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingLockIndicator: { arrowUpIcon, container, lockIcon },
       },
     },

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -74,7 +74,7 @@ export const AudioRecordingPreview = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingPreview: {
           container,
           currentTime,
@@ -108,7 +108,6 @@ export const AudioRecordingPreview = () => {
   const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   });
 
   return (
@@ -177,4 +176,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageInput}';
+AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx

@@ -22,7 +22,7 @@ export const AudioRecordingWaveform = (props: AudioRecordingWaveformProps) => {
   const styles = useStyles();
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingWaveform: { container, waveform: waveformTheme },
       },
     },
@@ -70,4 +70,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageInput}';
+AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageComposer}';

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -80,7 +80,7 @@ const MemoizedAttachButton = React.memo(
 export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
 
 /**
- * UI Component for attach button in MessageInput component.
+ * UI Component for attach button in MessageComposer component.
  */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
@@ -107,4 +107,4 @@ export const AttachButton = (props: AttachButtonProps) => {
   );
 };
 
-AttachButton.displayName = 'AttachButton{messageInput}';
+AttachButton.displayName = 'AttachButton{messageComposer}';

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

@@ -42,7 +42,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
 
   const {
     theme: {
-      messageInput: { attachButtonContainer },
+      messageComposer: { attachButtonContainer },
     },
   } = useTheme();
 

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -97,7 +97,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: { linkPreviewList },
+      messageComposer: { linkPreviewList },
     },
   } = useTheme();
 

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

@@ -38,4 +38,4 @@ export const EditButton = (props: EditButtonProps) => {
   );
 };
 
-EditButton.displayName = 'EditButton{messageInput}';
+EditButton.displayName = 'EditButton{messageComposer}';

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

@@ -38,4 +38,4 @@ export const SendButton = (props: SendButtonProps) => {
   );
 };
 
-SendButton.displayName = 'SendButton{messageInput}';
+SendButton.displayName = 'SendButton{messageComposer}';

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

@@ -33,7 +33,7 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
     | 'asyncMessagesLockDistance'
-    | 'asyncMessagesMultiSendEnabled'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'CooldownTimer'
     | 'SendButton'
@@ -63,7 +63,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } = props;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingButtonContainer,
         cooldownButtonContainer,
         editButtonContainer,
@@ -178,7 +178,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     CooldownTimer,
     SendButton,
     StopMessageStreamingButton,
@@ -192,7 +192,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
       {...{
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         asyncMessagesSlideToCancelDistance,
         audioRecordingEnabled,
         channel,

package/src/components/MessageInput/contexts/MicPositionContext.tsx

@@ -26,7 +26,7 @@ export const useMicPositionContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageInput wraps the subtree where mic positions are used.',
+      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageComposer wraps the subtree where mic positions are used.',
     );
   }
 

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

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

package/src/components/MessageList/MessageFlashList.tsx

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

package/src/components/MessageList/MessageList.tsx

@@ -68,7 +68,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
+import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.

package/src/components/MessageList/MessageSystem.tsx

@@ -65,7 +65,7 @@ MessageSystem.displayName = 'MessageSystem{messageList{messageSystem}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,