stream-chat-react-native-core 4.15.0-beta.2 → 5.0.0-beta.1

package/src/components/MessageList/MessageList.tsx

@@ -112,7 +112,7 @@ type MessageListPropsWithContext<
     | 'disabled'
     | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
-    | 'loadChannelAtMessage'
+    | 'loadChannelAroundMessage'
     | 'loading'
     | 'LoadingIndicator'
     | 'markRead'
@@ -124,8 +124,11 @@ type MessageListPropsWithContext<
     | 'targetedMessage'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
-  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
+  Pick<
+    PaginatedMessageListContextValue<StreamChatGenerics>,
+    'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
+  > &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -238,6 +241,7 @@ const MessageListWithContext = <
     EmptyStateIndicator,
     FlatList,
     FooterComponent = LoadingMoreIndicator,
+    hasNoMoreRecentMessagesToLoad,
     HeaderComponent = InlineLoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
@@ -246,7 +250,7 @@ const MessageListWithContext = <
     inverted = true,
     isListActive = false,
     legacyImageViewerSwipeBehaviour,
-    loadChannelAtMessage,
+    loadChannelAroundMessage,
     loading,
     LoadingIndicator,
     loadMore,
@@ -266,7 +270,7 @@ const MessageListWithContext = <
     scrollToFirstUnreadThreshold,
     selectedPicker,
     setFlatListRef,
-    setImages,
+    setMessages,
     setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
@@ -320,49 +324,49 @@ const MessageListWithContext = <
 
   const flatListRef = useRef<FlatListType<MessageType<StreamChatGenerics>> | null>(null);
 
-  const initialScrollSet = useRef<boolean>(false);
+  /**
+   * Flag to track if the initial scroll has been set
+   * If the prop `initialScrollToFirstUnreadMessage` was enabled, then we scroll to the unread msg and set it to true
+   * If not, the default offset of 0 for flatList means that it has been set already
+   */
+  const initialScrollSet = useRef<boolean>(!initialScrollToFirstUnreadMessage);
+
   const channelResyncScrollSet = useRef<boolean>(true);
 
+  /**
+   * The timeout id used to debounce our scrollToIndex calls on messageList updates
+   */
+  const scrollToDebounceTimeoutRef = useRef<NodeJS.Timeout>();
+
+  /**
+   * If a messageId was requested to scroll to but was unloaded,
+   * this flag keeps track of it to scroll to it after loading the message
+   */
+  const messageIdToScrollToRef = useRef<string>();
+  /**
+   * Last messageID that was scrolled to after loading a new message list,
+   * this flag keeps track of it so that we dont scroll to it again on target message set
+   */
+  const messageIdLastScrolledToRef = useRef<string>();
   const [hasMoved, setHasMoved] = useState(false);
   const [lastReceivedId, setLastReceivedId] = useState(getLastReceivedMessage(messageList)?.id);
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
   const stickyHeaderDateRef = useRef<Date | undefined>();
-  /**
-   * channel.lastRead throws error if the channel is not initialized.
-   */
-  const getLastReadSafely = () => (channel?.initialized ? channel.lastRead() : undefined);
 
-  const channelLastRead = useRef(getLastReadSafely());
+  const isUnreadMessageRef = useRef(
+    (
+      message: MessageType<StreamChatGenerics> | undefined,
+      lastRead?: ReturnType<StreamChannel<StreamChatGenerics>['lastRead']>,
+    ) => message && lastRead && message.created_at && lastRead < message.created_at,
+  );
 
-  const isUnreadMessage = (
-    message: MessageType<StreamChatGenerics> | undefined,
-    lastRead?: ReturnType<StreamChannel<StreamChatGenerics>['lastRead']>,
-  ) => message && lastRead && message.created_at && lastRead < message.created_at;
+  const channelLastReadRef = useRef(channel?.initialized ? channel.lastRead() : undefined);
 
-  /**
-   * If the top message in the list is unread, then we should scroll to top of the list.
-   * This is to handle the case when entire message list is unread.
-   * This scroll get set only on load, and never again.
-   */
-  const setInitialScrollIfNeeded = () => {
-    // If the feature is disabled or initial scroll position is already set.
-    if (!initialScrollToFirstUnreadMessage || initialScrollSet.current) {
-      initialScrollSet.current = true;
-      return;
-    }
-    if (isUnreadMessage(topMessageBeforeUpdate.current, channelLastRead.current)) {
-      if (flatListRef.current) {
-        flatListRef.current.scrollToEnd();
-      }
-      setTimeout(() => {
-        initialScrollSet.current = true;
-      }, 500);
-    } else if (!initialScrollSet.current) {
-      initialScrollSet.current = true;
-    }
-  };
+  useEffect(() => {
+    channelLastReadRef.current = channel?.initialized ? channel.lastRead() : undefined;
+  }, [channel]);
 
   const updateStickyHeaderDateIfNeeded = (viewableItems: ViewToken[]) => {
     if (viewableItems.length) {
@@ -409,14 +413,16 @@ const MessageListWithContext = <
       if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
-      setInitialScrollIfNeeded();
     },
   );
 
-  const resetPaginationTrackers = () => {
+  /**
+   * Resets the pagination trackers, doing so cancels currently scheduled loading more calls
+   */
+  const resetPaginationTrackersRef = useRef(() => {
     onStartReachedTracker.current = {};
     onEndReachedTracker.current = {};
-  };
+  });
 
   useEffect(() => {
     setScrollToBottomButtonVisible(false);
@@ -474,15 +480,13 @@ const MessageListWithContext = <
       ) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
-        resetPaginationTrackers();
-
-        setTimeout(
-          () =>
-            flatListRef.current?.scrollToOffset({
-              offset: 0,
-            }),
-          50,
-        );
+        resetPaginationTrackersRef.current();
+
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({
+            offset: 0,
+          });
+        }, 50);
         setTimeout(() => {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
@@ -492,14 +496,14 @@ const MessageListWithContext = <
       }
     };
 
-    if (threadList || channel?.state.isUpToDate) {
+    if (threadList || hasNoMoreRecentMessagesToLoad) {
       scrollToBottomIfNeeded();
     } else if (!scrollToBottomButtonVisible) {
       setScrollToBottomButtonVisible(true);
     }
 
     if (
-      !channel?.state.isUpToDate &&
+      !hasNoMoreRecentMessagesToLoad &&
       flatListRef.current &&
       messageListLengthBeforeUpdate.current === 0 &&
       messageListLengthAfterUpdate < 10
@@ -511,26 +515,13 @@ const MessageListWithContext = <
       maybeCallOnStartReached(10);
     }
 
-    /**
-     * channelLastRead and topMessage are only used for setting initial scroll.
-     * So lets not set it if `initialScrollToFirstUnreadMessage` prop is false.
-     * OR if the scroll is already set.
-     */
-    if (initialScrollToFirstUnreadMessage && !initialScrollSet.current) {
-      channelLastRead.current = getLastReadSafely();
-    }
-
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
   }, [messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
 
   useEffect(() => {
-    if (!channel?.state.isUpToDate && autoscrollToTop) {
-      setAutoscrollToTop(false);
-    } else if (channel?.state.isUpToDate && !autoscrollToTop) {
-      setAutoscrollToTop(true);
-    }
-  }, [messageListLengthAfterUpdate]);
+    setAutoscrollToTop(hasNoMoreRecentMessagesToLoad);
+  }, [messageList, hasNoMoreRecentMessagesToLoad]);
 
   const renderItem = ({
     index,
@@ -539,15 +530,16 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || !channel.initialized) return null;
+    if (!channel || (!channel.initialized && !channel.staticState)) return null;
 
-    const lastRead = getLastReadSafely();
+    const lastRead = channel.lastRead();
 
     const lastMessage = messageList?.[index + 1];
 
-    const showUnreadUnderlay = !!isUnreadMessage(message, lastRead) && scrollToBottomButtonVisible;
+    const showUnreadUnderlay =
+      !!isUnreadMessageRef.current(message, lastRead) && scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator =
-      showUnreadUnderlay && !isUnreadMessage(lastMessage, lastRead);
+      showUnreadUnderlay && !isUnreadMessageRef.current(lastMessage, lastRead);
 
     if (message.type === 'system') {
       return (
@@ -719,7 +711,7 @@ const MessageListWithContext = <
    *    |-> if channel is unread, call markRead().
    */
   const handleScroll: ScrollViewProps['onScroll'] = (event) => {
-    if (!channel || !initialScrollSet.current || !channelResyncScrollSet.current) {
+    if (!channel || !channelResyncScrollSet.current) {
       return;
     }
 
@@ -740,20 +732,16 @@ const MessageListWithContext = <
 
     // Show scrollToBottom button once scroll position goes beyond 300.
     const isScrollAtBottom = offset <= 300;
-    const showScrollToBottomButton = !isScrollAtBottom || !channel?.state.isUpToDate;
+    const showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
 
     const shouldMarkRead =
-      !threadList && offset <= 0 && channel?.state.isUpToDate && channel.countUnread() > 0;
+      !threadList && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
 
     if (shouldMarkRead) {
       markRead();
     }
 
-    if (showScrollToBottomButton && !scrollToBottomButtonVisible) {
-      setScrollToBottomButtonVisible(true);
-    } else if (!showScrollToBottomButton && scrollToBottomButtonVisible) {
-      setScrollToBottomButtonVisible(false);
-    }
+    setScrollToBottomButtonVisible(showScrollToBottomButton);
 
     if (onListScroll) {
       onListScroll(event);
@@ -761,9 +749,8 @@ const MessageListWithContext = <
   };
 
   const goToNewMessages = async () => {
-    if (!channel?.state.isUpToDate) {
-      resetPaginationTrackers();
-
+    if (!hasNoMoreRecentMessagesToLoad) {
+      resetPaginationTrackersRef.current();
       await reloadChannel();
     } else if (flatListRef.current) {
       flatListRef.current.scrollToOffset({
@@ -777,33 +764,98 @@ const MessageListWithContext = <
     }
   };
 
+  const onScrollToIndexFailedRef = useRef<
+    FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
+  >((info) => {
+    // We got a failure as we tried to scroll to an item that was outside the render length
+    if (flatListRef.current) {
+      // we dont know the actual size of all items but we can see the average, so scroll to the closest offset
+      flatListRef.current.scrollToOffset({
+        animated: false,
+        offset: info.averageItemLength * info.index,
+      });
+      // since we used only an average offset.. we wont go to the center of the item yet
+      // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+      setTimeout(() => {
+        flatListRef.current?.scrollToIndex({
+          animated: false,
+          index: info.index,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        if (messageIdLastScrolledToRef.current) {
+          setTargetedMessage(messageIdLastScrolledToRef.current);
+        }
+      }, 150);
+    }
+  });
+
   const goToMessage = useCallback(
     (messageId: string) => {
       const indexOfParentInMessageList = messageList.findIndex(
         (message) => message?.id === messageId,
       );
+      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          animated: true,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        // keep track of this messageId, so that we dont scroll to again in useEffect for targeted message change
+        messageIdLastScrolledToRef.current = messageId;
+        setTargetedMessage(messageId);
+        return;
+      }
+      messageIdToScrollToRef.current = messageId; // keep track of the id to scroll afterwards
+      loadChannelAroundMessage({ messageId }); // now try to load the message and whats around it
+      resetPaginationTrackersRef.current();
+    },
+    [messageList],
+  );
 
-      if (indexOfParentInMessageList > -1) {
-        try {
-          if (flatListRef.current) {
-            flatListRef.current.scrollToIndex({
-              index: indexOfParentInMessageList,
-              viewPosition: 0.5,
-            });
-            setTargetedMessage(messageId);
-
-            return;
+  /**
+   * Check if a messageId needs to be scrolled to after list loads, and scroll to it
+   * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
+   */
+  useEffect(() => {
+    if (scrollToDebounceTimeoutRef.current) clearTimeout(scrollToDebounceTimeoutRef.current);
+    scrollToDebounceTimeoutRef.current = setTimeout(() => {
+      // goToMessage method might have requested to scroll to a message
+      let messageIdToScroll: string | undefined = messageIdToScrollToRef.current;
+      if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+        // find the first unread message, if we have to initially scroll to an unread message
+        for (let index = messageList.length - 1; index >= 0; index--) {
+          if (isUnreadMessageRef.current(messageList[index], channelLastReadRef.current)) {
+            messageIdToScroll = messageList[index].id;
+            break;
           }
-        } catch (_) {
-          // do nothing;
         }
+      } else if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
+        // if some messageId was targeted but not scrolledTo yet
+        // we have scroll to there after loading completes
+        messageIdToScroll = targetedMessage;
       }
-
-      loadChannelAtMessage({ messageId });
-      resetPaginationTrackers();
-    },
-    [messageListLengthAfterUpdate],
-  );
+      if (!messageIdToScroll) return;
+      const indexOfParentInMessageList = messageList.findIndex(
+        (message) => message?.id === messageIdToScroll,
+      );
+      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          animated: false,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        // reset the messageId tracker to not scroll to that again
+        messageIdToScrollToRef.current = undefined;
+        // keep track of this messageId, so that we dont scroll to again for targeted message change
+        messageIdLastScrolledToRef.current = messageIdToScroll;
+        if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+          initialScrollSet.current = true;
+        } else {
+          setTargetedMessage(messageIdToScroll);
+        }
+      }
+    }, 150);
+  }, [messageList, targetedMessage, initialScrollToFirstUnreadMessage]);
 
   const messagesWithImages =
     legacyImageViewerSwipeBehaviour &&
@@ -846,7 +898,7 @@ const MessageListWithContext = <
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setImages(messagesWithImages as MessageType<StreamChatGenerics>[]);
+      setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
   }, [
     imageString,
@@ -909,7 +961,7 @@ const MessageListWithContext = <
         contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={messageList}
         /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
-        extraData={disabled || !channel?.state.isUpToDate}
+        extraData={disabled || !hasNoMoreRecentMessagesToLoad}
         inverted={inverted}
         keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
@@ -920,9 +972,11 @@ const MessageListWithContext = <
           autoscrollToTopThreshold: autoscrollToTop ? 10 : undefined,
           minIndexForVisible: 1,
         }}
+        maxToRenderPerBatch={30}
         onScroll={handleScroll}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={onScrollEndDrag}
+        onScrollToIndexFailed={onScrollToIndexFailedRef.current}
         onTouchEnd={dismissImagePicker}
         onViewableItemsChanged={onViewableItemsChanged.current}
         ref={refCallback}
@@ -978,7 +1032,7 @@ export const MessageList = <
     error,
     hideStickyDateHeader,
     isChannelActive,
-    loadChannelAtMessage,
+    loadChannelAroundMessage,
     loading,
     LoadingIndicator,
     markRead,
@@ -990,7 +1044,7 @@ export const MessageList = <
     targetedMessage,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
-  const { setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
     deletedMessagesVisibilityType,
@@ -1007,7 +1061,8 @@ export const MessageList = <
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
+  const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
+    usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
   const { t, tDateTimeParser } = useTranslationContext();
@@ -1026,13 +1081,14 @@ export const MessageList = <
         enableMessageGroupingByUser,
         error,
         FlatList,
+        hasNoMoreRecentMessagesToLoad,
         hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
         isListActive: isChannelActive,
         legacyImageViewerSwipeBehaviour,
-        loadChannelAtMessage,
+        loadChannelAroundMessage,
         loading,
         LoadingIndicator,
         loadMore,
@@ -1048,7 +1104,7 @@ export const MessageList = <
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
-        setImages,
+        setMessages,
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -147,6 +147,7 @@ exports[`Thread should match thread snapshot 1`] = `
             "minIndexForVisible": 1,
           }
         }
+        maxToRenderPerBatch={30}
         onContentSizeChange={[Function]}
         onLayout={[Function]}
         onMomentumScrollBegin={[Function]}
@@ -154,6 +155,7 @@ exports[`Thread should match thread snapshot 1`] = `
         onScroll={[Function]}
         onScrollBeginDrag={[Function]}
         onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
         onTouchEnd={[Function]}
         onViewableItemsChanged={[Function]}
         removeClippedSubviews={false}
@@ -319,6 +321,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -567,6 +570,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -815,6 +819,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -1106,6 +1111,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     Object {
+                                      "backgroundColor": "#ececec",
                                       "borderRadius": 16,
                                       "height": 32,
                                       "width": 32,

package/src/components/index.ts

@@ -48,7 +48,6 @@ export * from './ChannelList/hooks/listeners/useChannelDeleted';
 export * from './ChannelList/hooks/listeners/useChannelHidden';
 export * from './ChannelList/hooks/listeners/useChannelTruncated';
 export * from './ChannelList/hooks/listeners/useChannelUpdated';
-export * from './ChannelList/hooks/listeners/useConnectionRecovered';
 export * from './ChannelList/hooks/listeners/useNewMessage';
 export * from './ChannelList/hooks/listeners/useNewMessageNotification';
 export * from './ChannelList/hooks/listeners/useRemovedFromChannelNotification';
@@ -73,6 +72,8 @@ export * from './Chat/Chat';
 export * from './Chat/hooks/useCreateChatContext';
 export * from './Chat/hooks/useIsOnline';
 export * from './Chat/hooks/useMutedUsers';
+export * from './Chat/hooks/useConnectionRecovered';
+export * from './Chat/hooks/useSyncDatabase';
 
 export * from './ImageGallery/ImageGallery';
 export * from './ImageGallery/components/AnimatedGalleryImage';

package/src/contexts/channelContext/ChannelContext.tsx

@@ -71,6 +71,21 @@ export type ChannelContextValue<
    * Returns true if the current user is a owner
    */
   isOwner: boolean;
+  /**
+   * Loads channel around a specific message
+   *
+   * @param messageId If undefined, channel will be loaded at most recent message.
+   */
+  loadChannelAroundMessage: ({ messageId }: { messageId?: string }) => Promise<void>;
+  /**
+   * @deprecated use loadChannelAroundMessage instead
+   *
+   * Loads channel at specific message
+   *
+   * @param messageId If undefined, channel will be loaded at most recent message.
+   * @param before Number of message to query before messageId
+   * @param after Number of message to query after messageId
+   */
   loadChannelAtMessage: ({
     after,
     before,

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -95,7 +95,7 @@ export function useChannelState<
       setState,
       state,
     },
-    {},
+    channel?.state?.members || {},
   );
 
   const [messages, setMessages] = useStateManager(
@@ -115,7 +115,7 @@ export function useChannelState<
       setState,
       state,
     },
-    {},
+    channel?.state?.read || {},
   );
 
   const [typing, setTyping] = useStateManager(

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
+import type { AppSettingsAPIResponse, Channel, EventHandler, Mute, StreamChat } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -33,6 +33,7 @@ export type ChatContextValue<
    * */
   client: StreamChat<StreamChatGenerics>;
   connectionRecovering: boolean;
+  enableOfflineSupport: boolean;
   isOnline: boolean;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**
@@ -41,6 +42,7 @@ export type ChatContextValue<
    * @overrideType Function
    */
   setActiveChannel: (newChannel?: Channel<StreamChatGenerics>) => void;
+  subscribeConnectionRecoveredCallback: (callback: EventHandler<StreamChatGenerics>) => () => void;
   /**
    * Instance of channel object from stream-chat package.
    *

package/src/contexts/imageGalleryContext/ImageGalleryContext.md

@@ -8,7 +8,7 @@ can get access to context as following:
 import { useChannelsContext } from 'stream-chat-react-native';
 
 const SomeChildComponent = () => {
-  const { image, setImage, setImages } = useImageGalleryContext();
+  const { selectedMessage, setSelectedMessage, setMessages } = useImageGalleryContext();
 
   return (
     <View />

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -7,13 +7,18 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+type SelectedMessage = {
+  messageId?: string;
+  url?: string;
+};
+
 export type ImageGalleryContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  images: MessageType<StreamChatGenerics>[];
-  setImage: React.Dispatch<React.SetStateAction<{ messageId?: string; url?: string } | undefined>>;
-  setImages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
-  image?: { messageId?: string; url?: string };
+  messages: MessageType<StreamChatGenerics>[];
+  setMessages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
+  setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
+  selectedMessage?: SelectedMessage;
 };
 
 export const ImageGalleryContext = React.createContext(
@@ -25,19 +30,19 @@ export const ImageGalleryProvider = <
 >({
   children,
 }: PropsWithChildren<UnknownType>) => {
-  const [images, setImages] = useState<MessageType<StreamChatGenerics>[]>([]);
-  const [image, setImage] = useState<{ messageId?: string; url?: string }>();
-
-  const imageGalleryContext = {
-    image,
-    images,
-    setImage,
-    setImages,
-  };
+  const [messages, setMessages] = useState<MessageType<StreamChatGenerics>[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<SelectedMessage>();
 
   return (
     <ImageGalleryContext.Provider
-      value={imageGalleryContext as unknown as ImageGalleryContextValue}
+      value={
+        {
+          messages,
+          selectedMessage,
+          setMessages,
+          setSelectedMessage,
+        } as unknown as ImageGalleryContextValue
+      }
     >
       {children}
     </ImageGalleryContext.Provider>