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

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -42,16 +42,10 @@ import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useMessageListPagination } from './hooks/useMessageListPagination';
 import { useTargetedMessage } from './hooks/useTargetedMessage';
 
-import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
-import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
-import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
-import { VideoRecorderSelectorIcon as DefaultVideoRecorderSelectorIcon } from '../../components/AttachmentPicker/components/VideoRecorderSelectorIcon';
-import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/components/CreatePollIcon';
 import {
   AttachmentPickerContextValue,
   AttachmentPickerProvider,
-  MessageContextValue,
-} from '../../contexts';
+} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
   AudioPlayerContextProps,
   AudioPlayerProvider,
@@ -61,6 +55,7 @@ import type { UseChannelStateValue } from '../../contexts/channelsStateContext/u
 import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { MessageComposerProvider } from '../../contexts/messageComposerContext/MessageComposerContext';
+import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import {
   InputMessageInputContextValue,
   MessageInputProvider,
@@ -88,18 +83,11 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import { TypingProvider } from '../../contexts/typingContext/TypingContext';
-import { useStableCallback, useViewport } from '../../hooks';
+import { useStableCallback } from '../../hooks';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 
 import { useAttachmentPickerBottomSheet } from '../../hooks/useAttachmentPickerBottomSheet';
 import { usePrunableMessageList } from '../../hooks/usePrunableMessageList';
-import {
-  LOLReaction,
-  LoveReaction,
-  ThumbsDownReaction,
-  ThumbsUpReaction,
-  WutReaction,
-} from '../../icons';
 import {
   isDocumentPickerAvailable,
   isImageMediaLibraryAvailable,
@@ -110,6 +98,8 @@ import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
 } from '../../state-store/channel-unread-state';
+import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
@@ -122,45 +112,50 @@ import {
   ReactionData,
 } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
-import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
-import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/AudioAttachment';
-import { Card as CardDefault } from '../Attachment/Card';
+import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/Audio';
 import { FileAttachment as FileAttachmentDefault } from '../Attachment/FileAttachment';
 import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment/FileAttachmentGroup';
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
+import { FilePreview as FilePreviewDefault } from '../Attachment/FilePreview';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
 import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
-import { ImageReloadIndicator as ImageReloadIndicatorDefault } from '../Attachment/ImageReloadIndicator';
+import { UnsupportedAttachment as UnsupportedAttachmentDefault } from '../Attachment/UnsupportedAttachment';
+import { URLPreview as URLPreviewDefault } from '../Attachment/UrlPreview';
+import { URLPreviewCompact as URLPreviewCompactDefault } from '../Attachment/UrlPreview/URLPreviewCompact';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
-import { AttachmentPicker, AttachmentPickerProps } from '../AttachmentPicker/AttachmentPicker';
-import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
-import { AttachmentPickerError as DefaultAttachmentPickerError } from '../AttachmentPicker/components/AttachmentPickerError';
-import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../AttachmentPicker/components/AttachmentPickerErrorImage';
-import { AttachmentPickerIOSSelectMorePhotos as DefaultAttachmentPickerIOSSelectMorePhotos } from '../AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos';
+import { AttachmentPicker } from '../AttachmentPicker/AttachmentPicker';
+import { AttachmentPickerContent as DefaultAttachmentPickerContent } from '../AttachmentPicker/components/AttachmentPickerContent';
 import { AttachmentPickerSelectionBar as DefaultAttachmentPickerSelectionBar } from '../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
+import { InputView as InputViewDefault } from '../AutoCompleteInput/InputView';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import {
   LoadingErrorIndicator as LoadingErrorIndicatorDefault,
   LoadingErrorProps,
 } from '../Indicators/LoadingErrorIndicator';
 import { LoadingIndicator as LoadingIndicatorDefault } from '../Indicators/LoadingIndicator';
-import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from '../KeyboardCompatibleView/KeyboardCompatibleView';
+import {
+  KeyboardCompatibleView as KeyboardCompatibleViewDefault,
+  KeyboardCompatibleViewProps,
+} from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
+import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
+import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageSimple/Headers/MessageReminderHeader';
+import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageSimple/Headers/MessageSavedForLaterHeader';
+import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageSimple/Headers/SentToChannelHeader';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
 import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
 import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
-import { MessageEditedTimestamp as MessageEditedTimestampDefault } from '../Message/MessageSimple/MessageEditedTimestamp';
 import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
-import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
+import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
 import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
@@ -168,28 +163,39 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
 import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageSimple/MessageSwipeContent';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
+import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageSimple/ReactionList/ReactionListClustered';
+import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
+import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
+import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageSimple/ReactionList/ReactionListItemWrapper';
 import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
 import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
-import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
-import { AttachmentUploadPreviewList as AttachmentUploadPreviewDefault } from '../MessageInput/AttachmentUploadPreviewList';
-import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
-import { AttachmentUploadProgressIndicator as AttachmentUploadProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { AttachmentUploadPreviewList as AttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
+import { FileUploadInProgressIndicator as FileUploadInProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { FileUploadRetryIndicator as FileUploadRetryIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { FileUploadNotSupportedIndicator as FileUploadNotSupportedIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { ImageUploadInProgressIndicator as ImageUploadInProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { ImageUploadRetryIndicator as ImageUploadRetryIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { ImageUploadNotSupportedIndicator as ImageUploadNotSupportedIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
 import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview';
 import { FileAttachmentUploadPreview as FileAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview as ImageAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview';
+import { VideoAttachmentUploadPreview as VideoAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
 import { AudioRecordingButton as AudioRecordingButtonDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingButton';
 import { AudioRecordingInProgress as AudioRecordingInProgressDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingInProgress';
 import { AudioRecordingLockIndicator as AudioRecordingLockIndicatorDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
 import { AudioRecordingPreview as AudioRecordingPreviewDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingPreview';
 import { AudioRecordingWaveform as AudioRecordingWaveformDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingWaveform';
-import { CommandInput as CommandInputDefault } from '../MessageInput/components/CommandInput';
-import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
-import { InputReplyStateHeader as InputReplyStateHeaderDefault } from '../MessageInput/components/InputReplyStateHeader';
-import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/CooldownTimer';
-import { InputButtons as InputButtonsDefault } from '../MessageInput/InputButtons';
-import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/MoreOptionsButton';
-import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
+import { InputButtons as InputButtonsDefault } from '../MessageInput/components/InputButtons';
+import { AttachButton as AttachButtonDefault } from '../MessageInput/components/InputButtons/AttachButton';
+import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/components/OutputButtons/CooldownTimer';
+import { SendButton as SendButtonDefault } from '../MessageInput/components/OutputButtons/SendButton';
+import { MessageComposerLeadingView as MessageComposerLeadingViewDefault } from '../MessageInput/MessageComposerLeadingView';
+import { MessageComposerTrailingView as MessageComposerTrailingViewDefault } from '../MessageInput/MessageComposerTrailingView';
+import { MessageInputFooterView as MessageInputFooterViewDefault } from '../MessageInput/MessageInputFooterView';
+import { MessageInputHeaderView as MessageInputHeaderViewDefault } from '../MessageInput/MessageInputHeaderView';
+import { MessageInputLeadingView as MessageInputLeadingViewDefault } from '../MessageInput/MessageInputLeadingView';
+import { MessageInputTrailingView as MessageInputTrailingViewDefault } from '../MessageInput/MessageInputTrailingView';
 import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
 import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
@@ -204,10 +210,15 @@ import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
 import { UnreadMessagesNotification as UnreadMessagesNotificationDefault } from '../MessageList/UnreadMessagesNotification';
+import { Emoji } from '../MessageMenu/EmojiPickerList';
+import { emojis } from '../MessageMenu/emojis';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
+import {
+  MessageReactionPicker as MessageReactionPickerDefault,
+  toUnicodeScalarString,
+} from '../MessageMenu/MessageReactionPicker';
 import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
@@ -222,31 +233,36 @@ export type MarkReadFunctionOptions = {
   updateChannelUnreadState?: boolean;
 };
 
-const styles = StyleSheet.create({
-  selectChannel: { fontWeight: 'bold', padding: 16 },
-});
-
 export const reactionData: ReactionData[] = [
   {
-    Icon: LoveReaction,
-    type: 'love',
-  },
-  {
-    Icon: ThumbsUpReaction,
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'👍'} size={size} />,
     type: 'like',
+    isMain: true,
   },
   {
-    Icon: ThumbsDownReaction,
-    type: 'sad',
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'😂'} size={size} />,
+    type: 'haha',
+    isMain: true,
   },
   {
-    Icon: LOLReaction,
-    type: 'haha',
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'❤️'} size={size} />,
+    type: 'love',
+    isMain: true,
   },
   {
-    Icon: WutReaction,
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'😮'} size={size} />,
     type: 'wow',
+    isMain: true,
+  },
+  {
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'😢'} size={size} />,
+    type: 'sad',
+    isMain: true,
   },
+  ...emojis.map((emoji) => ({
+    Icon: ({ size = 12 }: { size?: number }) => <Emoji item={emoji} size={size} />,
+    type: toUnicodeScalarString(emoji),
+  })),
 ];
 
 /**
@@ -268,20 +284,17 @@ const debounceOptions = {
 };
 
 export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
-  Partial<
-    Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset' | 'disableAttachmentPicker'>
-  > &
   Partial<
     Pick<
-      AttachmentPickerProps,
-      | 'AttachmentPickerError'
-      | 'AttachmentPickerErrorImage'
-      | 'AttachmentPickerIOSSelectMorePhotos'
+      AttachmentPickerContextValue,
+      | 'bottomInset'
+      | 'topInset'
+      | 'disableAttachmentPicker'
       | 'ImageOverlaySelectedComponent'
-      | 'attachmentPickerErrorButtonText'
-      | 'attachmentPickerErrorText'
-      | 'numberOfAttachmentImagesToLoadPerCall'
       | 'numberOfAttachmentPickerImageColumns'
+      | 'AttachmentPickerIOSSelectMorePhotos'
+      | 'numberOfAttachmentImagesToLoadPerCall'
+      | 'AttachmentPickerContent'
     >
   > &
   Partial<
@@ -311,25 +324,22 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       MessagesContextValue,
       | 'additionalPressableProps'
       | 'Attachment'
-      | 'AttachmentActions'
       | 'AudioAttachment'
-      | 'Card'
-      | 'CardCover'
-      | 'CardFooter'
-      | 'CardHeader'
       | 'customMessageSwipeAction'
       | 'DateHeader'
       | 'deletedMessagesVisibilityType'
       | 'disableTypingIndicator'
       | 'dismissKeyboardOnMessageTouch'
       | 'enableSwipeToReply'
+      | 'urlPreviewType'
+      | 'UnsupportedAttachment'
       | 'FileAttachment'
       | 'FileAttachmentIcon'
       | 'FileAttachmentGroup'
+      | 'FilePreview'
       | 'FlatList'
       | 'forceAlignMessages'
       | 'Gallery'
-      | 'getMessagesGroupStyles'
       | 'getMessageGroupStyle'
       | 'Giphy'
       | 'giphyVersion'
@@ -346,13 +356,12 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'handleQuotedReply'
       | 'handleRetry'
       | 'handleThreadReply'
+      | 'handleBlockUser'
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
       | 'isAttachmentEqual'
-      | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
-      | 'ImageReloadIndicator'
       | 'markdownRules'
       | 'Message'
       | 'MessageActionList'
@@ -364,7 +373,6 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageContent'
       | 'messageContentOrder'
       | 'MessageDeleted'
-      | 'MessageEditedTimestamp'
       | 'MessageError'
       | 'MessageFooter'
       | 'MessageHeader'
@@ -372,6 +380,9 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageLocation'
       | 'MessageMenu'
       | 'MessagePinnedHeader'
+      | 'MessageReminderHeader'
+      | 'MessageSavedForLaterHeader'
+      | 'SentToChannelHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
       | 'MessageSimple'
@@ -392,7 +403,12 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageUserReactionsItem'
       | 'ReactionListBottom'
       | 'reactionListPosition'
+      | 'reactionListType'
       | 'ReactionListTop'
+      | 'ReactionListClustered'
+      | 'ReactionListItem'
+      | 'ReactionListItemWrapper'
+      | 'ReactionListCountItem'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
@@ -401,6 +417,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'TypingIndicator'
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
+      | 'URLPreviewCompact'
       | 'VideoThumbnail'
       | 'PollContent'
       | 'hasCreatePoll'
@@ -409,13 +426,15 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
     >
   > &
   Partial<Pick<MessageContextValue, 'isMessageAIGenerated'>> &
-  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel'>> & {
+  Partial<
+    Pick<ThreadContextValue, 'allowThreadMessagesInChannel' | 'onAlsoSentToChannelHeaderPress'>
+  > & {
     shouldSyncChannel: boolean;
     thread: ThreadType;
     /**
      * Additional props passed to keyboard avoiding view
      */
-    additionalKeyboardAvoidingViewProps?: Partial<KeyboardAvoidingViewProps>;
+    additionalKeyboardAvoidingViewProps?: Partial<KeyboardCompatibleViewProps>;
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
@@ -471,7 +490,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * When true, messageList will be scrolled at first unread message, when opened.
      */
     initialScrollToFirstUnreadMessage?: boolean;
-    keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
+    keyboardBehavior?: KeyboardCompatibleViewProps['behavior'];
     /**
      * Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed
      * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
@@ -491,7 +510,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * />
      * ```
      */
-    KeyboardCompatibleView?: React.ComponentType<KeyboardAvoidingViewProps>;
+    KeyboardCompatibleView?: React.ComponentType<KeyboardCompatibleViewProps>;
     keyboardVerticalOffset?: number;
     /**
      * Custom loading error indicator to override the Stream default
@@ -543,9 +562,8 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
   >;
 
 const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) => {
-  const { vh } = useViewport();
-
   const {
+    disableAttachmentPicker = !isImageMediaLibraryAvailable(),
     additionalKeyboardAvoidingViewProps,
     additionalPressableProps,
     additionalTextInputProps,
@@ -554,15 +572,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
     asyncMessagesMultiSendEnabled = true,
-    asyncMessagesSlideToCancelDistance = 100,
+    asyncMessagesSlideToCancelDistance = 75,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
-    AttachmentActions = AttachmentActionsDefault,
-    AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
-    attachmentPickerBottomSheetHandleHeight = 20,
-    attachmentPickerBottomSheetHeight = vh(45),
+    attachmentPickerBottomSheetHeight = disableAttachmentPicker ? 72 : 333,
     AttachmentPickerSelectionBar = DefaultAttachmentPickerSelectionBar,
-    attachmentSelectionBarHeight = 52,
+    attachmentSelectionBarHeight = 72,
     AudioAttachment = AudioAttachmentDefault,
     AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
     AudioRecorder = AudioRecorderDefault,
@@ -574,37 +589,22 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
-    AttachmentPickerError = DefaultAttachmentPickerError,
-    AttachmentPickerErrorImage = DefaultAttachmentPickerErrorImage,
-    AttachmentPickerIOSSelectMorePhotos = DefaultAttachmentPickerIOSSelectMorePhotos,
     AttachmentUploadPreviewList = AttachmentUploadPreviewDefault,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
-    attachmentPickerErrorButtonText,
-    attachmentPickerErrorText,
-    numberOfAttachmentImagesToLoadPerCall = 60,
+    numberOfAttachmentImagesToLoadPerCall = 25,
     numberOfAttachmentPickerImageColumns = 3,
-
+    giphyVersion = 'fixed_height',
     bottomInset = 0,
-    CameraSelectorIcon = DefaultCameraSelectorIcon,
-    FileSelectorIcon = DefaultFileSelectorIcon,
-    CreatePollIcon = DefaultCreatePollIcon,
-    ImageSelectorIcon = DefaultImageSelectorIcon,
-    VideoRecorderSelectorIcon = DefaultVideoRecorderSelectorIcon,
-    Card = CardDefault,
-    CardCover,
-    CardFooter,
-    CardHeader,
     channel,
     children,
     client,
-    CommandsButton = CommandsButtonDefault,
     compressImageQuality,
     CooldownTimer = CooldownTimerDefault,
     CreatePollContent,
+    createPollOptionGap,
     customMessageSwipeAction,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
-    disableAttachmentPicker = !isImageMediaLibraryAvailable(),
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -623,13 +623,18 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FileAttachmentUploadPreview = FileAttachmentUploadPreviewDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
     FileAttachmentIcon = FileIconDefault,
+    FilePreview = FilePreviewDefault,
+    FileUploadInProgressIndicator = FileUploadInProgressIndicatorDefault,
+    FileUploadRetryIndicator = FileUploadRetryIndicatorDefault,
+    FileUploadNotSupportedIndicator = FileUploadNotSupportedIndicatorDefault,
+    ImageUploadInProgressIndicator = ImageUploadInProgressIndicatorDefault,
+    ImageUploadRetryIndicator = ImageUploadRetryIndicatorDefault,
+    ImageUploadNotSupportedIndicator = ImageUploadNotSupportedIndicatorDefault,
     FlatList = NativeHandlers.FlatList,
     forceAlignMessages,
     Gallery = GalleryDefault,
-    getMessagesGroupStyles,
     getMessageGroupStyle,
     Giphy = GiphyDefault,
-    giphyVersion = 'fixed_height',
     handleAttachButtonPress,
     handleBan,
     handleCopy,
@@ -644,6 +649,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleReaction,
     handleRetry,
     handleThreadReply,
+    handleBlockUser,
     hasCameraPicker = isImagePickerAvailable(),
     hasCommands,
     hasCreatePoll,
@@ -655,21 +661,19 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     ImageAttachmentUploadPreview = ImageAttachmentUploadPreviewDefault,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
-    ImageReloadIndicator = ImageReloadIndicatorDefault,
     initialScrollToFirstUnreadMessage = false,
     InlineDateSeparator = InlineDateSeparatorDefault,
     InlineUnreadIndicator = InlineUnreadIndicatorDefault,
     Input,
+    InputView = InputViewDefault,
     InputButtons = InputButtonsDefault,
-    InputEditingStateHeader = InputEditingStateHeaderDefault,
-    CommandInput = CommandInputDefault,
-    InputReplyStateHeader = InputReplyStateHeaderDefault,
+    MessageComposerLeadingView = MessageComposerLeadingViewDefault,
+    MessageComposerTrailingView = MessageComposerTrailingViewDefault,
     isAttachmentEqual,
     isMessageAIGenerated = () => false,
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
-    legacyImageViewerSwipeBehaviour = false,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
@@ -691,20 +695,27 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       'files',
       'poll',
       'ai_text',
-      'text',
       'attachments',
+      'text',
       'location',
     ],
     MessageDeleted = MessageDeletedDefault,
-    MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
+    messageInputFloating = false,
+    MessageInputFooterView = MessageInputFooterViewDefault,
+    MessageInputHeaderView = MessageInputHeaderViewDefault,
+    MessageInputLeadingView = MessageInputLeadingViewDefault,
+    MessageInputTrailingView = MessageInputTrailingViewDefault,
     MessageFooter = MessageFooterDefault,
-    MessageHeader,
+    MessageHeader = MessageHeaderDefault,
     messageId,
     MessageList = MessageListDefault,
     MessageLocation,
     MessageMenu = MessageMenuDefault,
     MessagePinnedHeader = MessagePinnedHeaderDefault,
+    MessageReminderHeader = MessageReminderHeaderDefault,
+    MessageSavedForLaterHeader = MessageSavedForLaterHeaderDefault,
+    SentToChannelHeader = SentToChannelHeaderDefault,
     MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
@@ -719,7 +730,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageUserReactions = MessageUserReactionsDefault,
     MessageUserReactionsAvatar = MessageUserReactionsAvatarDefault,
     MessageUserReactionsItem = MessageUserReactionsItemDefault,
-    MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
     // TODO: Think about this one
@@ -727,12 +737,18 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
+    onAlsoSentToChannelHeaderPress,
     openPollCreationDialog,
     overrideOwnCapabilities,
     PollContent,
     ReactionListBottom = ReactionListBottomDefault,
     reactionListPosition = 'top',
+    reactionListType = 'clustered',
     ReactionListTop = ReactionListTopDefault,
+    ReactionListClustered = ReactionListClusteredDefault,
+    ReactionListItem = ReactionListItemDefault,
+    ReactionListItemWrapper = ReactionListItemWrapperDefault,
+    ReactionListCountItem = ReactionListCountItemDefault,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
     selectReaction,
@@ -757,13 +773,16 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     TypingIndicator = TypingIndicatorDefault,
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
     UnreadMessagesNotification = UnreadMessagesNotificationDefault,
-    AttachmentUploadProgressIndicator = AttachmentUploadProgressIndicatorDefault,
-    UrlPreview = CardDefault,
-    VideoAttachmentUploadPreview = FileAttachmentUploadPreviewDefault,
+    UrlPreview = URLPreviewDefault,
+    URLPreviewCompact = URLPreviewCompactDefault,
+    VideoAttachmentUploadPreview = VideoAttachmentUploadPreviewDefault,
     VideoThumbnail = VideoThumbnailDefault,
     isOnline,
     maximumMessageLimit,
     initializeOnMount = true,
+    AttachmentPickerContent = DefaultAttachmentPickerContent,
+    urlPreviewType = 'full',
+    UnsupportedAttachment = UnsupportedAttachmentDefault,
   } = props;
 
   const { thread: threadProps, threadInstance } = threadFromProps;
@@ -772,12 +791,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       ? DefaultStopMessageStreamingButton
       : StopMessageStreamingButtonOverride;
 
-  const {
-    theme: {
-      channel: { selectChannel },
-      colors: { black },
-    },
-  } = useTheme();
+  const styles = useStyles();
   const [deleted, setDeleted] = useState<boolean>(false);
   const [error, setError] = useState<Error | boolean>(false);
   const [lastRead, setLastRead] = useState<Date | undefined>();
@@ -785,6 +799,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
   const [channelUnreadStateStore] = useState(new ChannelUnreadStateStore());
+  const [messageInputHeightStore] = useState(new MessageInputHeightStore());
+  // TODO: Think if we can remove this and just rely on the channelUnreadStateStore everywhere.
   const setChannelUnreadState = useCallback(
     (data: ChannelUnreadStateStoreType['channelUnreadState']) => {
       channelUnreadStateStore.channelUnreadState = data;
@@ -1731,47 +1747,40 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     }
   });
 
-  const attachmentPickerProps = useMemo(
+  const handleClosePicker = useStableCallback(() => closePicker(bottomSheetRef));
+  const handleOpenPicker = useStableCallback(() => openPicker(bottomSheetRef));
+
+  const attachmentPickerContext = useMemo(
     () => ({
-      AttachmentPickerBottomSheetHandle,
-      attachmentPickerBottomSheetHandleHeight,
-      attachmentPickerBottomSheetHeight,
-      AttachmentPickerError,
-      attachmentPickerErrorButtonText,
-      AttachmentPickerErrorImage,
-      attachmentPickerErrorText,
-      AttachmentPickerIOSSelectMorePhotos,
-      attachmentSelectionBarHeight,
+      bottomInset,
+      bottomSheetRef,
+      closePicker: handleClosePicker,
+      disableAttachmentPicker,
+      openPicker: handleOpenPicker,
+      topInset,
       ImageOverlaySelectedComponent,
-      numberOfAttachmentImagesToLoadPerCall,
+      AttachmentPickerSelectionBar,
       numberOfAttachmentPickerImageColumns,
-    }),
-    [
-      AttachmentPickerBottomSheetHandle,
-      attachmentPickerBottomSheetHandleHeight,
       attachmentPickerBottomSheetHeight,
-      AttachmentPickerError,
-      attachmentPickerErrorButtonText,
-      AttachmentPickerErrorImage,
-      attachmentPickerErrorText,
-      AttachmentPickerIOSSelectMorePhotos,
       attachmentSelectionBarHeight,
-      ImageOverlaySelectedComponent,
       numberOfAttachmentImagesToLoadPerCall,
-      numberOfAttachmentPickerImageColumns,
-    ],
-  );
-
-  const attachmentPickerContext = useMemo(
-    () => ({
+      AttachmentPickerContent,
+    }),
+    [
       bottomInset,
       bottomSheetRef,
-      closePicker: () => closePicker(bottomSheetRef),
+      handleClosePicker,
       disableAttachmentPicker,
-      openPicker: () => openPicker(bottomSheetRef),
+      handleOpenPicker,
       topInset,
-    }),
-    [bottomInset, bottomSheetRef, closePicker, openPicker, topInset, disableAttachmentPicker],
+      ImageOverlaySelectedComponent,
+      AttachmentPickerSelectionBar,
+      numberOfAttachmentPickerImageColumns,
+      attachmentPickerBottomSheetHeight,
+      attachmentSelectionBarHeight,
+      numberOfAttachmentImagesToLoadPerCall,
+      AttachmentPickerContent,
+    ],
   );
 
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
@@ -1781,7 +1790,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const channelContext = useCreateChannelContext({
     channel,
-    channelUnreadState: channelUnreadStateStore.channelUnreadState,
     channelUnreadStateStore,
     disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
@@ -1837,13 +1845,10 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance,
     AttachButton,
-    AttachmentPickerBottomSheetHandle,
-    attachmentPickerBottomSheetHandleHeight,
     attachmentPickerBottomSheetHeight,
     AttachmentPickerSelectionBar,
     attachmentSelectionBarHeight,
     AttachmentUploadPreviewList,
-    AttachmentUploadProgressIndicator,
     AudioAttachmentUploadPreview,
     AudioRecorder,
     audioRecordingEnabled,
@@ -1854,30 +1859,37 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     AutoCompleteSuggestionHeader,
     AutoCompleteSuggestionItem,
     AutoCompleteSuggestionList,
-    CameraSelectorIcon,
     channelId,
-    CommandInput,
-    CommandsButton,
     compressImageQuality,
     CooldownTimer,
     CreatePollContent,
-    CreatePollIcon,
+    createPollOptionGap,
     doFileUploadRequest,
     editMessage,
     FileAttachmentUploadPreview,
-    FileSelectorIcon,
+    FileUploadInProgressIndicator,
+    FileUploadRetryIndicator,
+    FileUploadNotSupportedIndicator,
+    ImageUploadInProgressIndicator,
+    ImageUploadRetryIndicator,
+    ImageUploadNotSupportedIndicator,
     handleAttachButtonPress,
     hasCameraPicker,
     hasCommands: hasCommands ?? !!clientChannelConfig?.commands?.length,
     hasFilePicker,
     hasImagePicker,
     ImageAttachmentUploadPreview,
-    ImageSelectorIcon,
     Input,
+    InputView,
     InputButtons,
-    InputEditingStateHeader,
-    InputReplyStateHeader,
-    MoreOptionsButton,
+    MessageComposerLeadingView,
+    MessageComposerTrailingView,
+    messageInputFloating,
+    messageInputHeightStore,
+    MessageInputFooterView,
+    MessageInputHeaderView,
+    MessageInputLeadingView,
+    MessageInputTrailingView,
     openPollCreationDialog,
     SendButton,
     sendMessage,
@@ -1887,7 +1899,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     StartAudioRecordingButton,
     StopMessageStreamingButton,
     VideoAttachmentUploadPreview,
-    VideoRecorderSelectorIcon,
   });
 
   const messageListContext = useCreatePaginatedMessageListContext({
@@ -1908,12 +1919,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   const messagesContext = useCreateMessagesContext({
     additionalPressableProps,
     Attachment,
-    AttachmentActions,
     AudioAttachment,
-    Card,
-    CardCover,
-    CardFooter,
-    CardHeader,
     channelId,
     customMessageSwipeAction,
     DateHeader,
@@ -1927,11 +1933,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FileAttachment,
     FileAttachmentGroup,
     FileAttachmentIcon,
+    FilePreview,
     FlatList,
     forceAlignMessages,
     Gallery,
     getMessageGroupStyle,
-    getMessagesGroupStyles,
     Giphy,
     giphyVersion,
     handleBan,
@@ -1947,17 +1953,16 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleReaction,
     handleRetry,
     handleThreadReply,
+    handleBlockUser,
     hasCreatePoll:
       hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
-    ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
     InlineDateSeparator,
     InlineUnreadIndicator,
     isAttachmentEqual,
     isMessageAIGenerated,
-    legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
     MessageActionList,
@@ -1969,7 +1974,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageContent,
     messageContentOrder,
     MessageDeleted,
-    MessageEditedTimestamp,
     MessageError,
     MessageFooter,
     MessageHeader,
@@ -1977,6 +1981,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageLocation,
     MessageMenu,
     MessagePinnedHeader,
+    MessageReminderHeader,
+    MessageSavedForLaterHeader,
+    SentToChannelHeader,
     MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
@@ -1998,7 +2005,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     PollContent,
     ReactionListBottom,
     reactionListPosition,
+    reactionListType,
     ReactionListTop,
+    ReactionListClustered,
+    ReactionListItem,
+    ReactionListItemWrapper,
+    ReactionListCountItem,
     removeMessage,
     Reply,
     retrySendMessage,
@@ -2014,11 +2026,15 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     UnreadMessagesNotification,
     updateMessage,
     UrlPreview,
+    URLPreviewCompact,
     VideoThumbnail,
+    urlPreviewType,
+    UnsupportedAttachment,
   });
 
   const threadContext = useCreateThreadContext({
     allowThreadMessagesInChannel,
+    onAlsoSentToChannelHeaderPress,
     closeThread,
     loadMoreThread,
     openThread,
@@ -2056,7 +2072,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   if (!channel?.cid || !channel.watch) {
     return (
-      <Text style={[styles.selectChannel, { color: black }, selectChannel]} testID='no-channel'>
+      <Text style={styles.selectChannel} testID='no-channel'>
         {t('Please select a channel first')}
       </Text>
     );
@@ -2080,9 +2096,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
                       <MessageInputProvider value={inputMessageInputContext}>
                         <AudioPlayerProvider value={audioPlayerContext}>
                           <View style={{ height: '100%' }}>{children}</View>
-                          {!disableAttachmentPicker && (
-                            <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-                          )}
+                          <AttachmentPicker />
                         </AudioPlayerProvider>
                       </MessageInputProvider>
                     </MessageComposerProvider>
@@ -2151,3 +2165,24 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
     />
   );
 };
+
+const useStyles = () => {
+  const {
+    theme: {
+      channel: { selectChannel },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      selectChannel: {
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        padding: primitives.spacingMd,
+        color: semantics.textPrimary,
+        ...selectChannel,
+      },
+    });
+  }, [selectChannel, semantics]);
+};