stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import {
@@ -15,15 +16,73 @@ import {
   Message as StreamMessage,
 } from 'stream-chat';
 
-import { useAppStateListener } from '../../hooks/useAppStateListener';
 import { useCreateChannelContext } from './hooks/useCreateChannelContext';
+
 import { useCreateInputMessageInputContext } from './hooks/useCreateInputMessageInputContext';
+
 import { useCreateMessagesContext } from './hooks/useCreateMessagesContext';
+
+import { useCreateOwnCapabilitiesContext } from './hooks/useCreateOwnCapabilitiesContext';
 import { useCreatePaginatedMessageListContext } from './hooks/useCreatePaginatedMessageListContext';
+
 import { useCreateThreadContext } from './hooks/useCreateThreadContext';
+
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
+
 import { useTargetedMessage } from './hooks/useTargetedMessage';
 
+import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
+import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
+import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import {
+  InputMessageInputContextValue,
+  MessageInputProvider,
+} from '../../contexts/messageInputContext/MessageInputContext';
+import {
+  MessagesContextValue,
+  MessagesProvider,
+} from '../../contexts/messagesContext/MessagesContext';
+import {
+  OwnCapabilitiesContextValue,
+  OwnCapabilitiesProvider,
+} from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import {
+  PaginatedMessageListContextValue,
+  PaginatedMessageListProvider,
+} from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
+import {
+  SuggestionsContextValue,
+  SuggestionsProvider,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
+import {
+  TranslationContextValue,
+  useTranslationContext,
+} from '../../contexts/translationContext/TranslationContext';
+import { TypingProvider } from '../../contexts/typingContext/TypingContext';
+import { useAppStateListener } from '../../hooks/useAppStateListener';
+
+import {
+  LOLReaction,
+  LoveReaction,
+  ThumbsDownReaction,
+  ThumbsUpReaction,
+  WutReaction,
+} from '../../icons';
+import { FlatList as FlatListDefault } from '../../native';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
 import { Card as CardDefault } from '../Attachment/Card';
@@ -32,19 +91,22 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
+import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
+import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import {
   LoadingErrorIndicator as LoadingErrorIndicatorDefault,
   LoadingErrorProps,
 } from '../Indicators/LoadingErrorIndicator';
 import { LoadingIndicator as LoadingIndicatorDefault } from '../Indicators/LoadingIndicator';
-import { NetworkDownIndicator as NetworkDownIndicatorDefault } from '../MessageList/NetworkDownIndicator';
 import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from '../KeyboardCompatibleView/KeyboardCompatibleView';
 import { Message as MessageDefault } from '../Message/Message';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
 import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
+import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
 import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
@@ -52,78 +114,28 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
+import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/CooldownTimer';
 import { FileUploadPreview as FileUploadPreviewDefault } from '../MessageInput/FileUploadPreview';
 import { ImageUploadPreview as ImageUploadPreviewDefault } from '../MessageInput/ImageUploadPreview';
 import { InputButtons as InputButtonsDefault } from '../MessageInput/InputButtons';
 import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/MoreOptionsButton';
 import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
+import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
 import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
+import type { MessageType } from '../MessageList/hooks/useMessageList';
 import { InlineDateSeparator as InlineDateSeparatorDefault } from '../MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator as InlineUnreadIndicatorDefault } from '../MessageList/InlineUnreadIndicator';
 import { MessageList as MessageListDefault } from '../MessageList/MessageList';
 import { MessageSystem as MessageSystemDefault } from '../MessageList/MessageSystem';
+import { NetworkDownIndicator as NetworkDownIndicatorDefault } from '../MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageList/ScrollToBottomButton';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
 import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
-import {
-  ChannelConfig,
-  ChannelContextValue,
-  ChannelProvider,
-} from '../../contexts/channelContext/ChannelContext';
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
-import {
-  InputConfig,
-  InputMessageInputContextValue,
-  MessageInputProvider,
-} from '../../contexts/messageInputContext/MessageInputContext';
-import {
-  MessagesConfig,
-  MessagesContextValue,
-  MessagesProvider,
-} from '../../contexts/messagesContext/MessagesContext';
-import {
-  PaginatedMessageListContextValue,
-  PaginatedMessageListProvider,
-} from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import {
-  SuggestionsContextValue,
-  SuggestionsProvider,
-} from '../../contexts/suggestionsContext/SuggestionsContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
-import { TypingContextValue, TypingProvider } from '../../contexts/typingContext/TypingContext';
-import {
-  LOLReaction,
-  LoveReaction,
-  ThumbsDownReaction,
-  ThumbsUpReaction,
-  WutReaction,
-} from '../../icons';
-import { FlatList as FlatListDefault } from '../../native';
-import { generateRandomId, ReactionData } from '../../utils/utils';
-
-import type { MessageType } from '../MessageList/hooks/useMessageList';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 const styles = StyleSheet.create({
   selectChannel: { fontWeight: 'bold', padding: 16 },
 });
@@ -182,22 +194,22 @@ export type ChannelPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
-> = Partial<
-  Pick<
-    ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    | 'channel'
-    | 'EmptyStateIndicator'
-    | 'enableMessageGroupingByUser'
-    | 'enforceUniqueReaction'
-    | 'giphyEnabled'
-    | 'hideStickyDateHeader'
-    | 'hideDateSeparators'
-    | 'LoadingIndicator'
-    | 'maxTimeBetweenGroupedMessages'
-    | 'NetworkDownIndicator'
-    | 'StickyHeader'
-  >
-> &
+> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> &
+  Partial<
+    Pick<
+      ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+      | 'EmptyStateIndicator'
+      | 'enableMessageGroupingByUser'
+      | 'enforceUniqueReaction'
+      | 'giphyEnabled'
+      | 'hideStickyDateHeader'
+      | 'hideDateSeparators'
+      | 'LoadingIndicator'
+      | 'maxTimeBetweenGroupedMessages'
+      | 'NetworkDownIndicator'
+      | 'StickyHeader'
+    >
+  > &
   Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
   Partial<
     Omit<
@@ -205,7 +217,12 @@ export type ChannelPropsWithContext<
       'quotedMessage' | 'editing' | 'clearEditingState' | 'clearQuotedMessageState' | 'sendMessage'
     >
   > &
-  Partial<SuggestionsContextValue<Co, Us>> &
+  Partial<
+    Pick<
+      SuggestionsContextValue<Co, Us>,
+      'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem' | 'AutoCompleteSuggestionList'
+    >
+  > &
   Pick<TranslationContextValue, 't'> &
   Partial<
     Pick<
@@ -213,28 +230,24 @@ export type ChannelPropsWithContext<
       'messages' | 'loadingMore' | 'loadingMoreRecent'
     >
   > &
+  UseChannelStateValue<At, Ch, Co, Ev, Me, Re, Us> &
   Partial<
     Pick<
       MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
       | 'additionalTouchableProps'
-      | 'animatedLongPress'
       | 'Attachment'
       | 'AttachmentActions'
-      | 'blockUser'
       | 'Card'
       | 'CardCover'
       | 'CardFooter'
       | 'CardHeader'
-      | 'copyMessage'
       | 'DateHeader'
-      | 'deleteMessage'
+      | 'deletedMessagesVisibilityType'
       | 'disableTypingIndicator'
       | 'dismissKeyboardOnMessageTouch'
-      | 'editMessage'
       | 'FileAttachment'
       | 'FileAttachmentIcon'
       | 'FileAttachmentGroup'
-      | 'flagMessage'
       | 'FlatList'
       | 'forceAlignMessages'
       | 'formatDate'
@@ -246,6 +259,7 @@ export type ChannelPropsWithContext<
       | 'handleEdit'
       | 'handleFlag'
       | 'handleMute'
+      | 'handlePinMessage'
       | 'handleReaction'
       | 'handleQuotedReply'
       | 'handleRetry'
@@ -263,27 +277,23 @@ export type ChannelPropsWithContext<
       | 'MessageFooter'
       | 'MessageHeader'
       | 'MessageList'
+      | 'MessagePinnedHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
       | 'MessageSimple'
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
-      | 'muteUser'
       | 'myMessageTheme'
-      | 'onDoubleTapMessage'
       | 'onLongPressMessage'
       | 'onPressInMessage'
       | 'onPressMessage'
       | 'OverlayReactionList'
-      | 'quotedReply'
       | 'ReactionList'
       | 'Reply'
-      | 'retry'
       | 'ScrollToBottomButton'
       | 'selectReaction'
       | 'supportedReactions'
-      | 'threadReply'
       | 'TypingIndicator'
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
@@ -292,6 +302,7 @@ export type ChannelPropsWithContext<
   Partial<
     Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'allowThreadMessagesInChannel' | 'thread'>
   > & {
+    shouldSyncChannel: boolean;
     /**
      * Additional props passed to keyboard avoiding view
      */
@@ -369,15 +380,13 @@ export type ChannelPropsWithContext<
     LoadingErrorIndicator?: React.ComponentType<LoadingErrorProps>;
     maxMessageLength?: number;
     messageId?: string;
-    mutesEnabled?: boolean;
     newMessageStateUpdateThrottleInterval?: number;
-    quotedRepliesEnabled?: boolean;
-    reactionsEnabled?: boolean;
-    readEventsEnabled?: boolean;
+    overrideOwnCapabilities?: OwnCapabilitiesContextValue;
     stateUpdateThrottleInterval?: number;
-    threadRepliesEnabled?: boolean;
-    typingEventsEnabled?: boolean;
-    uploadsEnabled?: boolean;
+    /**
+     * Tells if channel is rendering a thread list
+     */
+    threadList?: boolean;
   };
 
 const ChannelWithContext = <
@@ -394,15 +403,16 @@ const ChannelWithContext = <
   const {
     additionalKeyboardAvoidingViewProps,
     additionalTextInputProps,
-    animatedLongPress,
     additionalTouchableProps,
     allowThreadMessagesInChannel = true,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
+    AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
+    AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
+    AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
-    blockUser,
     Card = CardDefault,
     CardCover,
     CardFooter,
@@ -410,12 +420,11 @@ const ChannelWithContext = <
     channel,
     children,
     client,
-    closeSuggestions,
     CommandsButton = CommandsButtonDefault,
     compressImageQuality,
-    copyMessage,
+    CooldownTimer = CooldownTimerDefault,
     DateHeader = DateHeaderDefault,
-    deleteMessage,
+    deletedMessagesVisibilityType = 'always',
     disableIfFrozenChannel = true,
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
@@ -425,15 +434,13 @@ const ChannelWithContext = <
     doMarkReadRequest,
     doSendMessageRequest,
     doUpdateMessageRequest,
-    editMessage: editMessageProp,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     enableMessageGroupingByUser = true,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
-    FileAttachmentIcon = FileIconDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
+    FileAttachmentIcon = FileIconDefault,
     FileUploadPreview = FileUploadPreviewDefault,
-    flagMessage,
     FlatList = FlatListDefault,
     forceAlignMessages,
     formatDate,
@@ -447,6 +454,7 @@ const ChannelWithContext = <
     handleEdit,
     handleFlag,
     handleMute,
+    handlePinMessage,
     handleQuotedReply,
     handleReaction,
     handleRetry,
@@ -466,19 +474,18 @@ const ChannelWithContext = <
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
-    // TODO[major]: switch to false.
-    legacyImageViewerSwipeBehaviour = true,
+    legacyImageViewerSwipeBehaviour = false,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
     loadingMoreRecent: loadingMoreRecentProp,
     markdownRules,
-    messageId,
     maxMessageLength: maxMessageLengthProp,
     maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
     mentionAllAppUsersEnabled = false,
     mentionAllAppUsersQuery,
+    members,
     Message = MessageDefault,
     messageActions,
     MessageAvatar = MessageAvatarDefault,
@@ -487,55 +494,59 @@ const ChannelWithContext = <
     MessageDeleted = MessageDeletedDefault,
     MessageFooter = MessageFooterDefault,
     MessageHeader,
+    messageId,
     MessageList = MessageListDefault,
+    MessagePinnedHeader = MessagePinnedHeaderDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
-    messages: messagesProp,
+    messages,
     MessageSimple = MessageSimpleDefault,
     MessageStatus = MessageStatusDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
     MoreOptionsButton = MoreOptionsButtonDefault,
-    mutesEnabled: mutesEnabledProp,
-    muteUser,
     myMessageTheme,
     newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
     numberOfLines = 5,
     onChangeText,
-    onDoubleTapMessage,
     onLongPressMessage,
-    onPressMessage,
+    overrideOwnCapabilities,
     onPressInMessage,
-    openSuggestions,
+    onPressMessage,
     OverlayReactionList = OverlayReactionListDefault,
-    quotedRepliesEnabled: quotedRepliesEnabledProp,
-    quotedReply,
     ReactionList = ReactionListDefault,
-    reactionsEnabled: reactionsEnabledProp,
-    readEventsEnabled: readEventsEnabledProp,
+    read,
     Reply = ReplyDefault,
-    retry,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
     selectReaction,
     SendButton = SendButtonDefault,
+    SendMessageDisallowedIndicator = SendMessageDisallowedIndicatorDefault,
     sendImageAsync = false,
     setInputRef,
+    setMembers,
+    setMessages,
+    setRead,
+    setThreadMessages,
+    setTyping,
+    setWatcherCount,
+    setWatchers,
+    shouldSyncChannel,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
     stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader,
     supportedReactions = reactionData,
     t,
     thread: threadProps,
-    threadRepliesEnabled: threadRepliesEnabledProp,
-    threadReply,
-    typingEventsEnabled: typingEventsEnabledProp,
+    threadList,
+    threadMessages,
+    typing,
     TypingIndicator = TypingIndicatorDefault,
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
-    updateSuggestions,
     UploadProgressIndicator = UploadProgressIndicatorDefault,
-    uploadsEnabled: uploadsEnabledProp,
     UrlPreview = CardDefault,
+    watcherCount,
+    watchers,
   } = props;
 
   const {
@@ -546,48 +557,30 @@ const ChannelWithContext = <
   } = useTheme();
   const [deleted, setDeleted] = useState(false);
   const [editing, setEditing] = useState<boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>>(false);
-  const [error, setError] = useState(false);
+  const [error, setError] = useState<Error | boolean>(false);
   const [hasMore, setHasMore] = useState(true);
   const [lastRead, setLastRead] =
     useState<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['lastRead']>();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!channel?.state.messages.length);
   const [loadingMore, setLoadingMore] = useState(false);
 
   const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
-  const [messages, setMessages] = useState<
-    PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['messages']
-  >([]);
-
-  const [members, setMembers] = useState<
-    ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['members']
-  >({});
   const [quotedMessage, setQuotedMessage] =
     useState<boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>>(false);
-  const [read, setRead] = useState<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['read']>({});
   const [thread, setThread] = useState<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['thread']>(
     threadProps || null,
   );
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
-  const [threadMessages, setThreadMessages] = useState<
-    ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['threadMessages']
-  >((threadProps?.id && channel?.state?.threads?.[threadProps.id]) || []);
-  const [typing, setTyping] = useState<TypingContextValue<At, Ch, Co, Ev, Me, Re, Us>['typing']>(
-    {},
-  );
-  const [watcherCount, setWatcherCount] =
-    useState<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['watcherCount']>();
-  const [watchers, setWatchers] = useState<
-    ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['watchers']
-  >({});
+
+  const [syncingChannel, setSyncingChannel] = useState(false);
 
   const { setTargetedMessage, targetedMessage } = useTargetedMessage(messageId);
 
   const channelId = channel?.id || '';
   useEffect(() => {
     const initChannel = () => {
-      if (!channel) return;
-
+      if (!channel || !shouldSyncChannel) return;
       /**
        * Loading channel at first unread message  requires channel to be initialized in the first place,
        * since we use read state on channel to decide what offset to load channel at.
@@ -627,7 +620,7 @@ const ChannelWithContext = <
 
   const threadPropsExists = !!threadProps;
   useEffect(() => {
-    if (threadProps) {
+    if (threadProps && shouldSyncChannel) {
       setThread(threadProps);
       if (channel && threadProps?.id) {
         setThreadMessages(channel.state.threads?.[threadProps.id] || []);
@@ -740,7 +733,7 @@ const ChannelWithContext = <
   ).current;
 
   const connectionRecoveredHandler = () => {
-    if (channel) {
+    if (channel && shouldSyncChannel) {
       copyChannelState();
       if (thread) {
         setThreadMessages([...channel.state.threads[thread.id]]);
@@ -749,31 +742,33 @@ const ChannelWithContext = <
   };
 
   const connectionChangedHandler = (event: ConnectionChangeEvent) => {
-    if (event.online) {
+    if (event.online && shouldSyncChannel) {
       resyncChannel();
     }
   };
 
   const handleEvent: EventHandler<At, Ch, Co, Ev, Me, Re, Us> = (event) => {
-    if (thread) {
-      const updatedThreadMessages =
-        (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-      setThreadMessages(updatedThreadMessages);
-    }
+    if (shouldSyncChannel) {
+      if (thread) {
+        const updatedThreadMessages =
+          (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+        setThreadMessages(updatedThreadMessages);
+      }
 
-    if (channel && thread && event.message?.id === thread.id) {
-      const updatedThread = channel.state.formatMessage(event.message);
-      setThread(updatedThread);
-    }
+      if (channel && thread && event.message?.id === thread.id) {
+        const updatedThread = channel.state.formatMessage(event.message);
+        setThread(updatedThread);
+      }
 
-    if (event.type === 'typing.start' || event.type === 'typing.stop') {
-      copyTypingState();
-    } else if (event.type === 'message.read') {
-      copyReadState();
-    } else if (event.type === 'message.new') {
-      copyMessagesState();
-    } else if (channel) {
-      copyChannelState();
+      if (event.type === 'typing.start' || event.type === 'typing.stop') {
+        copyTypingState();
+      } else if (event.type === 'message.read') {
+        copyReadState();
+      } else if (event.type === 'message.new') {
+        copyMessagesState();
+      } else if (channel) {
+        copyChannelState();
+      }
     }
   };
 
@@ -806,11 +801,12 @@ const ChannelWithContext = <
       clientSubscriptions.forEach((s) => s.unsubscribe());
       channelSubscriptions.forEach((s) => s.unsubscribe());
     };
-  }, [channelId, connectionRecoveredHandler, handleEvent]);
+  }, [channelId, connectionChangedHandler, connectionRecoveredHandler, handleEvent]);
 
   const channelQueryCall = async (queryCall: () => void = () => null) => {
     setError(false);
-    setLoading(true);
+    // Skips setting loading state when there are messages in the channel
+    setLoading(!channel?.state.messages.length);
 
     try {
       await queryCall();
@@ -818,7 +814,11 @@ const ChannelWithContext = <
       setHasMore(true);
       copyChannelState();
     } catch (err) {
-      setError(err);
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(true);
+      }
       setLoading(false);
       setLastRead(new Date());
     }
@@ -954,22 +954,33 @@ const ChannelWithContext = <
       const limit = 50;
       channel.state.threads[parentID] = [];
       const queryResponse = await channel.getReplies(parentID, {
-        limit: 50,
+        limit,
       });
 
       const updatedHasMore = queryResponse.messages.length === limit;
       const updatedThreadMessages = channel.state.threads[parentID] || [];
       loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+      const { messages } = await channel.getMessagesById([parentID]);
+      const [threadMessage] = messages;
+      if (threadMessage) {
+        const formattedMessage = channel.state.formatMessage(threadMessage);
+        setThread(formattedMessage);
+      }
     } catch (err) {
       console.warn('Thread loading request failed with error', err);
-      setError(err);
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(true);
+      }
       setThreadLoadingMore(false);
       throw err;
     }
   };
 
   const resyncChannel = async () => {
-    if (!channel) return;
+    if (!channel || syncingChannel) return;
+    setSyncingChannel(true);
 
     setError(false);
     try {
@@ -1013,11 +1024,13 @@ const ChannelWithContext = <
         } as unknown as MessageResponse<At, Ch, Co, Me, Re, Us>);
 
       const failedMessages = messages
-        .filter((message) => message.status === 'failed')
+        .filter((message) => message.status === MessageStatusTypes.FAILED)
         .map(parseMessage);
 
       const failedThreadMessages = thread
-        ? threadMessages.filter((message) => message.status === 'failed').map(parseMessage)
+        ? threadMessages
+            .filter((message) => message.status === MessageStatusTypes.FAILED)
+            .map(parseMessage)
         : [];
 
       const oldListTopMessageCreatedAt = oldListTopMessage.created_at;
@@ -1064,9 +1077,15 @@ const ChannelWithContext = <
         setThreadMessages([...channel.state.threads[thread.id]]);
       }
     } catch (err) {
-      setError(err);
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(true);
+      }
       setLoading(false);
     }
+
+    setSyncingChannel(false);
   };
 
   const reloadChannel = () =>
@@ -1185,24 +1204,6 @@ const ChannelWithContext = <
    */
   const clientChannelConfig = getChannelConfigSafely();
 
-  const messagesConfig: MessagesConfig = {
-    /**
-     * Replace with backend flag once its ready
-     */
-    mutesEnabled: mutesEnabledProp ?? clientChannelConfig?.mutes ?? true,
-    quotedRepliesEnabled: quotedRepliesEnabledProp ?? true,
-    reactionsEnabled: reactionsEnabledProp ?? clientChannelConfig?.reactions ?? true,
-    threadRepliesEnabled: threadRepliesEnabledProp ?? clientChannelConfig?.replies ?? true,
-  };
-  const channelConfig: ChannelConfig = {
-    readEventsEnabled: readEventsEnabledProp ?? clientChannelConfig?.read_events ?? true,
-    typingEventsEnabled: typingEventsEnabledProp ?? clientChannelConfig?.typing_events ?? true,
-  };
-  const inputConfig: InputConfig = {
-    maxMessageLength: maxMessageLengthProp ?? clientChannelConfig?.max_message_length ?? undefined,
-    uploadsEnabled: uploadsEnabledProp ?? clientChannelConfig?.uploads ?? true,
-  };
-
   /**
    * MESSAGE METHODS
    */
@@ -1256,7 +1257,7 @@ const ChannelWithContext = <
         })) || [],
       parent_id,
       reactions: [],
-      status: 'sending',
+      status: MessageStatusTypes.SENDING,
       text,
       type: 'regular',
       user: {
@@ -1334,9 +1335,8 @@ const ChannelWithContext = <
       } else if (channel) {
         messageResponse = await channel.sendMessage(messageData);
       }
-
       if (messageResponse.message) {
-        messageResponse.message.status = 'received';
+        messageResponse.message.status = MessageStatusTypes.RECEIVED;
         if (retrying) {
           replaceMessage(message, messageResponse.message);
         } else {
@@ -1345,7 +1345,7 @@ const ChannelWithContext = <
       }
     } catch (err) {
       console.log(err);
-      message.status = 'failed';
+      message.status = MessageStatusTypes.FAILED;
       updateMessage(message);
     }
   };
@@ -1377,7 +1377,7 @@ const ChannelWithContext = <
     async (message) => {
       const statusPendingMessage = {
         ...message,
-        status: 'sending',
+        status: MessageStatusTypes.SENDING,
       };
 
       updateMessage(statusPendingMessage);
@@ -1415,7 +1415,7 @@ const ChannelWithContext = <
 
     const oldestMessage = messages && messages[0];
 
-    if (oldestMessage && oldestMessage.status !== 'received') {
+    if (oldestMessage && oldestMessage.status !== MessageStatusTypes.RECEIVED) {
       return setLoadingMore(false);
     }
 
@@ -1432,7 +1432,11 @@ const ChannelWithContext = <
       }
     } catch (err) {
       console.warn('Message pagination request failed with error', err);
-      setError(err);
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(true);
+      }
       setLoadingMore(false);
       throw err;
     }
@@ -1455,7 +1459,7 @@ const ChannelWithContext = <
 
     const recentMessage = messages[messages.length - 1];
 
-    if (recentMessage?.status !== 'received') {
+    if (recentMessage?.status !== MessageStatusTypes.RECEIVED) {
       setLoadingMoreRecent(false);
       return;
     }
@@ -1467,7 +1471,11 @@ const ChannelWithContext = <
       }
     } catch (err) {
       console.warn('Message pagination request failed with error', err);
-      setError(err);
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(true);
+      }
       setLoadingMoreRecent(false);
       throw err;
     }
@@ -1606,14 +1614,22 @@ const ChannelWithContext = <
         }
       } catch (err) {
         console.warn('Message pagination request failed with error', err);
-        setError(err);
+        if (err instanceof Error) {
+          setError(err);
+        } else {
+          setError(true);
+        }
         setThreadLoadingMore(false);
         throw err;
       }
     };
 
+  const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
+    channel,
+    overrideCapabilities: overrideOwnCapabilities,
+  });
+
   const channelContext = useCreateChannelContext({
-    ...channelConfig,
     channel,
     disabled: !!channel?.data?.frozen && disableIfFrozenChannel,
     EmptyStateIndicator,
@@ -1626,6 +1642,7 @@ const ChannelWithContext = <
     hideDateSeparators,
     hideStickyDateHeader,
     isAdmin,
+    isChannelActive: shouldSyncChannel,
     isModerator,
     isOwner,
     lastRead,
@@ -1643,12 +1660,12 @@ const ChannelWithContext = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
+    threadList,
     watcherCount,
     watchers,
   });
 
-  const messageInputContext = useCreateInputMessageInputContext({
-    ...inputConfig,
+  const inputMessageInputContext = useCreateInputMessageInputContext({
     additionalTextInputProps,
     AttachButton,
     autoCompleteSuggestionsLimit,
@@ -1658,6 +1675,7 @@ const ChannelWithContext = <
     clearQuotedMessageState,
     CommandsButton,
     compressImageQuality,
+    CooldownTimer,
     doDocUploadRequest,
     doImageUploadRequest,
     editing,
@@ -1670,6 +1688,7 @@ const ChannelWithContext = <
     initialValue,
     Input,
     InputButtons,
+    maxMessageLength: maxMessageLengthProp ?? clientChannelConfig?.max_message_length ?? undefined,
     maxNumberOfFiles,
     mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery,
@@ -1680,6 +1699,7 @@ const ChannelWithContext = <
     SendButton,
     sendImageAsync,
     sendMessage,
+    SendMessageDisallowedIndicator,
     setInputRef,
     setQuotedMessageState,
     ShowThreadMessageInChannelButton,
@@ -1694,34 +1714,28 @@ const ChannelWithContext = <
       loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : loadingMoreRecent,
     loadMore,
     loadMoreRecent,
-    messages: messagesProp || messages,
+    messages,
     setLoadingMore,
     setLoadingMoreRecent,
   });
 
   const messagesContext = useCreateMessagesContext({
-    ...messagesConfig,
     additionalTouchableProps,
-    animatedLongPress,
     Attachment,
     AttachmentActions,
-    blockUser,
     Card,
     CardCover,
     CardFooter,
     CardHeader,
     channelId,
-    copyMessage,
     DateHeader,
-    deleteMessage,
+    deletedMessagesVisibilityType,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch,
-    editMessage: editMessageProp,
     enableMessageGroupingByUser,
     FileAttachment,
     FileAttachmentGroup,
     FileAttachmentIcon,
-    flagMessage,
     FlatList,
     forceAlignMessages,
     formatDate,
@@ -1733,6 +1747,7 @@ const ChannelWithContext = <
     handleEdit,
     handleFlag,
     handleMute,
+    handlePinMessage,
     handleQuotedReply,
     handleReaction,
     handleRetry,
@@ -1751,41 +1766,38 @@ const ChannelWithContext = <
     MessageFooter,
     MessageHeader,
     MessageList,
+    MessagePinnedHeader,
     MessageReplies,
     MessageRepliesAvatars,
     MessageSimple,
     MessageStatus,
     MessageSystem,
     MessageText,
-    muteUser,
     myMessageTheme,
-    onDoubleTapMessage,
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
     OverlayReactionList,
-    quotedReply,
     ReactionList,
     removeMessage,
     Reply,
-    retry,
     retrySendMessage,
     ScrollToBottomButton,
     selectReaction,
     setEditingState,
     setQuotedMessageState,
     supportedReactions,
-    threadReply,
+    targetedMessage,
     TypingIndicator,
     TypingIndicatorContainer,
     updateMessage,
     UrlPreview,
   });
 
-  const suggestionsContext: Partial<SuggestionsContextValue<Co, Us>> = {
-    closeSuggestions,
-    openSuggestions,
-    updateSuggestions,
+  const suggestionsContext = {
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    AutoCompleteSuggestionList,
   };
 
   const threadContext = useCreateThreadContext({
@@ -1828,19 +1840,23 @@ const ChannelWithContext = <
       {...additionalKeyboardAvoidingViewProps}
     >
       <ChannelProvider<At, Ch, Co, Ev, Me, Re, Us> value={channelContext}>
-        <TypingProvider<At, Ch, Co, Ev, Me, Re, Us> value={typingContext}>
-          <PaginatedMessageListProvider<At, Ch, Co, Ev, Me, Re, Us> value={messageListContext}>
-            <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
-              <ThreadProvider<At, Ch, Co, Ev, Me, Re, Us> value={threadContext}>
-                <SuggestionsProvider<Co, Us> value={suggestionsContext}>
-                  <MessageInputProvider<At, Ch, Co, Ev, Me, Re, Us> value={messageInputContext}>
-                    <View style={{ height: '100%' }}>{children}</View>
-                  </MessageInputProvider>
-                </SuggestionsProvider>
-              </ThreadProvider>
-            </MessagesProvider>
-          </PaginatedMessageListProvider>
-        </TypingProvider>
+        <OwnCapabilitiesProvider value={ownCapabilitiesContext}>
+          <TypingProvider<At, Ch, Co, Ev, Me, Re, Us> value={typingContext}>
+            <PaginatedMessageListProvider<At, Ch, Co, Ev, Me, Re, Us> value={messageListContext}>
+              <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
+                <ThreadProvider<At, Ch, Co, Ev, Me, Re, Us> value={threadContext}>
+                  <SuggestionsProvider<Co, Us> value={suggestionsContext}>
+                    <MessageInputProvider<At, Ch, Co, Ev, Me, Re, Us>
+                      value={inputMessageInputContext}
+                    >
+                      <View style={{ height: '100%' }}>{children}</View>
+                    </MessageInputProvider>
+                  </SuggestionsProvider>
+                </ThreadProvider>
+              </MessagesProvider>
+            </PaginatedMessageListProvider>
+          </TypingProvider>
+        </OwnCapabilitiesProvider>
       </ChannelProvider>
     </KeyboardCompatibleView>
   );
@@ -1854,7 +1870,8 @@ export type ChannelProps<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
-> = Partial<ChannelPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+> = Partial<Omit<ChannelPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>> &
+  Pick<ChannelPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;
 
 /**
  *
@@ -1878,6 +1895,28 @@ export const Channel = <
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t } = useTranslationContext();
 
+  const shouldSyncChannel = props.thread?.id ? !!props.threadList : true;
+
+  const {
+    members,
+    messages,
+    read,
+    setMembers,
+    setMessages,
+    setRead,
+    setThreadMessages,
+    setTyping,
+    setWatcherCount,
+    setWatchers,
+    threadMessages,
+    typing,
+    watcherCount,
+    watchers,
+  } = useChannelState<At, Ch, Co, Ev, Me, Re, Us>(
+    props.channel,
+    props.threadList ? props.thread?.id : undefined,
+  );
+
   return (
     <ChannelWithContext<At, Ch, Co, Ev, Me, Re, Us>
       {...{
@@ -1885,6 +1924,23 @@ export const Channel = <
         t,
       }}
       {...props}
+      shouldSyncChannel={shouldSyncChannel}
+      {...{
+        members,
+        messages: props.messages || messages,
+        read,
+        setMembers,
+        setMessages,
+        setRead,
+        setThreadMessages,
+        setTyping,
+        setWatcherCount,
+        setWatchers,
+        threadMessages,
+        typing,
+        watcherCount,
+        watchers,
+      }}
     />
   );
 };