stream-chat-react-native-core 5.38.1 → 5.39.0-beta.1

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -1,8 +1,16 @@
-import { useMemo } from 'react';
+import { ThreadState } from 'stream-chat';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import { useStateStore } from '../../../hooks';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { reduceMessagesToString } from '../../../utils/utils';
+
+const selector = (nextValue: ThreadState) =>
+  [
+    nextValue.replies,
+    nextValue.pagination.isLoadingPrev,
+    nextValue.pagination.isLoadingNext,
+    nextValue.parentMessage,
+  ] as const;
 
 export const useCreateThreadContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -15,38 +23,35 @@ export const useCreateThreadContext = <
   setThreadLoadingMore,
   thread,
   threadHasMore,
+  threadInstance,
   threadLoadingMore,
   threadMessages,
 }: ThreadContextValue<StreamChatGenerics>) => {
-  const threadId = thread?.id;
-  const threadReplyCount = thread?.reply_count;
-  const threadLatestReactions = thread?.latest_reactions;
-  const threadMessagesStr = reduceMessagesToString(threadMessages);
+  const [latestReplies, isLoadingPrev, isLoadingNext] =
+    useStateStore(threadInstance?.state, selector) ?? [];
 
-  const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
-    () => ({
-      allowThreadMessagesInChannel,
-      closeThread,
-      loadMoreThread,
-      openThread,
-      reloadThread,
-      setThreadLoadingMore,
-      thread,
-      threadHasMore,
-      threadLoadingMore,
-      threadMessages,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      allowThreadMessagesInChannel,
-      threadHasMore,
-      threadId,
-      threadLoadingMore,
-      threadMessagesStr,
-      threadReplyCount,
-      threadLatestReactions,
-    ],
-  );
+  const contextAdapter = threadInstance
+    ? {
+        loadMoreRecentThread: threadInstance.loadNextPage,
+        loadMoreThread: threadInstance.loadPrevPage,
+        threadInstance,
+        threadLoadingMore: isLoadingPrev,
+        threadLoadingMoreRecent: isLoadingNext,
+        threadMessages: latestReplies ?? [],
+      }
+    : {};
 
-  return threadContext;
+  return {
+    allowThreadMessagesInChannel,
+    closeThread,
+    loadMoreThread,
+    openThread,
+    reloadThread,
+    setThreadLoadingMore,
+    thread,
+    threadHasMore,
+    threadLoadingMore,
+    threadMessages,
+    ...contextAdapter,
+  };
 };

package/src/components/Chat/Chat.tsx

@@ -215,6 +215,16 @@ const ChatWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userID, enableOfflineSupport]);
 
+  useEffect(() => {
+    if (!client) return;
+
+    client.threads.registerSubscriptions();
+
+    return () => {
+      client.threads.unregisterSubscriptions();
+    };
+  }, [client]);
+
   // In case something went wrong, make sure to also unsubscribe the listener
   // on unmount if it exists to prevent a memory leak.
   useEffect(() => () => DBSyncManager.connectionChangedListener?.unsubscribe(), []);

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -4,10 +4,10 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../hooks/useViewport';
-import { ChatIcon, MessageIcon } from '../../icons';
+import { ChatIcon, MessageBubbleEmpty, MessageIcon } from '../../icons';
 
 export type EmptyStateProps = {
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'threads' | 'default';
 };
 
 export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
@@ -55,6 +55,13 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
           </Text>
         </View>
       );
+    case 'threads':
+      return (
+        <View style={[styles.container]}>
+          <MessageBubbleEmpty height={width} pathFill={'#B4BBBA'} width={width} />
+          <Text style={{ color: '#7E828B' }}>{t<string>('No threads here yet')}...</Text>
+        </View>
+      );
     default:
       return <Text style={[{ color: black }, messageContainer]}>No items exist</Text>;
   }

package/src/components/Indicators/LoadingIndicator.tsx

@@ -26,7 +26,7 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
 };
 
 export type LoadingProps = {
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'threads' | 'default';
   loadingText?: string;
 };
 
@@ -47,6 +47,8 @@ export const LoadingIndicator = (props: LoadingProps) => {
       return <LoadingIndicatorWrapper text={t('Loading channels...')} />;
     case 'message':
       return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
+    case 'threads':
+      return <LoadingIndicatorWrapper text={t('Loading threads...')} />;
     default:
       return <LoadingIndicatorWrapper text={t('Loading...')} />;
   }

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

@@ -2,6 +2,7 @@ import { ComponentType, useMemo } from 'react';
 
 import { ReactionResponse } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -46,7 +47,15 @@ const isOwnReaction = <
 >(
   reactionType: string,
   ownReactions?: ReactionResponse<StreamChatGenerics>[] | null,
-) => (ownReactions ? ownReactions.some((reaction) => reaction.type === reactionType) : false);
+  latestReactions?: ReactionResponse<StreamChatGenerics>[] | null,
+  userID?: string,
+) =>
+  (ownReactions ? ownReactions.some((reaction) => reaction.type === reactionType) : false) ||
+  (latestReactions
+    ? latestReactions.some(
+        (reaction) => reaction?.user?.id === userID && reaction.type === reactionType,
+      )
+    : false);
 
 const isSupportedReaction = (reactionType: string, supportedReactions: ReactionData[]) =>
   supportedReactions
@@ -76,6 +85,7 @@ export const useProcessReactions = <
   props: UseProcessReactionsParams<StreamChatGenerics>,
 ) => {
   const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const { client } = useChatContext<StreamChatGenerics>();
 
   const {
     latest_reactions,
@@ -100,7 +110,12 @@ export const useProcessReactions = <
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
           lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
           latestReactedUserNames,
-          own: isOwnReaction<StreamChatGenerics>(reactionType, own_reactions),
+          own: isOwnReaction<StreamChatGenerics>(
+            reactionType,
+            own_reactions,
+            latest_reactions,
+            client.userID,
+          ),
           type: reactionType,
           unlistedReactedUserCount: count - latestReactedUserNames.length,
         };
@@ -112,6 +127,12 @@ export const useProcessReactions = <
       hasReactions: unsortedReactions.length > 0,
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reaction_groups, own_reactions?.length, latest_reactions?.length, sortReactions]);
+  }, [
+    client.userID,
+    reaction_groups,
+    own_reactions,
+    latest_reactions,
+    supportedReactions,
+    sortReactions,
+  ]);
 };

package/src/components/MessageList/InlineLoadingMoreRecentThreadIndicator.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { useThreadContext } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+const styles = StyleSheet.create({
+  activityIndicatorContainer: {
+    padding: 10,
+    width: '100%',
+  },
+});
+
+export type InlineLoadingMoreRecentThreadIndicatorPropsWithContext = {
+  loadingMoreRecent?: boolean;
+};
+
+export const InlineLoadingMoreRecentIndicatorWithContext = ({
+  loadingMoreRecent,
+}: InlineLoadingMoreRecentThreadIndicatorPropsWithContext) => {
+  const { theme } = useTheme();
+
+  const {
+    colors: { accent_blue },
+  } = theme;
+
+  if (!loadingMoreRecent) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
+
+const areEqual = (
+  prevProps: InlineLoadingMoreRecentThreadIndicatorPropsWithContext,
+  nextProps: InlineLoadingMoreRecentThreadIndicatorPropsWithContext,
+) => {
+  const { loadingMoreRecent: prevLoadingMoreRecent } = prevProps;
+  const { loadingMoreRecent: nextLoadingMoreRecent } = nextProps;
+
+  const loadingMoreRecentEqual = prevLoadingMoreRecent === nextLoadingMoreRecent;
+  if (!loadingMoreRecentEqual) return false;
+
+  return true;
+};
+
+const MemoizedInlineLoadingMoreRecentIndicator = React.memo(
+  InlineLoadingMoreRecentIndicatorWithContext,
+  areEqual,
+) as typeof InlineLoadingMoreRecentIndicatorWithContext;
+
+export const InlineLoadingMoreRecentThreadIndicator = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const { threadLoadingMoreRecent } = useThreadContext<StreamChatGenerics>();
+
+  return <MemoizedInlineLoadingMoreRecentIndicator loadingMoreRecent={threadLoadingMoreRecent} />;
+};

package/src/components/MessageList/MessageList.tsx

@@ -20,7 +20,7 @@ import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollT
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
-import { InlineLoadingMoreThreadIndicator } from './InlineLoadingMoreThreadIndicator';
+import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
 import { getLastReceivedMessage } from './utils/getLastReceivedMessage';
 
 import {
@@ -147,7 +147,10 @@ type MessageListPropsWithContext<
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & {
+  Pick<
+    ThreadContextValue<StreamChatGenerics>,
+    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
+  > & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.
@@ -221,9 +224,9 @@ const MessageListWithContext = <
 >(
   props: MessageListPropsWithContext<StreamChatGenerics>,
 ) => {
-  const LoadingMoreIndicator = props.threadList
-    ? InlineLoadingMoreThreadIndicator
-    : InlineLoadingMoreIndicator;
+  const LoadingMoreRecentIndicator = props.threadList
+    ? InlineLoadingMoreRecentThreadIndicator
+    : InlineLoadingMoreRecentIndicator;
   const {
     additionalFlatListProps,
     channel,
@@ -234,9 +237,9 @@ const MessageListWithContext = <
     disableTypingIndicator,
     EmptyStateIndicator,
     FlatList,
-    FooterComponent = LoadingMoreIndicator,
+    FooterComponent = InlineLoadingMoreIndicator,
     hasNoMoreRecentMessagesToLoad,
-    HeaderComponent = InlineLoadingMoreRecentIndicator,
+    HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
@@ -249,6 +252,7 @@ const MessageListWithContext = <
     LoadingIndicator,
     loadMore,
     loadMoreRecent,
+    loadMoreRecentThread,
     loadMoreThread,
     markRead,
     Message,
@@ -269,6 +273,7 @@ const MessageListWithContext = <
     StickyHeader,
     targetedMessage,
     thread,
+    threadInstance,
     threadList = false,
     TypingIndicator,
     TypingIndicatorContainer,
@@ -744,7 +749,13 @@ const MessageListWithContext = <
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
-    onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
+    onStartReachedInPromise.current = (
+      threadList && !!threadInstance && loadMoreRecentThread
+        ? loadMoreRecentThread({ limit })
+        : loadMoreRecent(limit)
+    )
+      .then(callback)
+      .catch(onError);
   };
 
   /**
@@ -1253,7 +1264,8 @@ export const MessageList = <
   const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
     usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
-  const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
+  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
+    useThreadContext<StreamChatGenerics>();
 
   return (
     <MessageListWithContext
@@ -1280,6 +1292,7 @@ export const MessageList = <
         LoadingIndicator,
         loadMore,
         loadMoreRecent,
+        loadMoreRecentThread,
         loadMoreThread,
         markRead,
         Message,
@@ -1297,6 +1310,7 @@ export const MessageList = <
         StickyHeader,
         targetedMessage,
         thread,
+        threadInstance,
         threadList,
         TypingIndicator,
         TypingIndicatorContainer,

package/src/components/Thread/Thread.tsx

@@ -23,7 +23,12 @@ type ThreadPropsWithContext<
   Pick<MessagesContextValue<StreamChatGenerics>, 'MessageList'> &
   Pick<
     ThreadContextValue<StreamChatGenerics>,
-    'closeThread' | 'loadMoreThread' | 'parentMessagePreventPress' | 'reloadThread' | 'thread'
+    | 'closeThread'
+    | 'loadMoreThread'
+    | 'parentMessagePreventPress'
+    | 'reloadThread'
+    | 'thread'
+    | 'threadInstance'
   > & {
     /**
      * Additional props for underlying MessageInput component.
@@ -70,9 +75,13 @@ const ThreadWithContext = <
     onThreadDismount,
     parentMessagePreventPress = true,
     thread,
+    threadInstance,
   } = props;
 
   useEffect(() => {
+    if (threadInstance?.activate) {
+      threadInstance.activate();
+    }
     const loadMoreThreadAsync = async () => {
       await loadMoreThread();
     };
@@ -80,21 +89,20 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
-  useEffect(
-    () => () => {
+    return () => {
+      if (threadInstance?.deactivate) {
+        threadInstance.deactivate();
+      }
       if (closeThreadOnDismount) {
         closeThread();
       }
       if (onThreadDismount) {
         onThreadDismount();
       }
-    },
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+  }, []);
 
   if (!thread) return null;
 
@@ -137,7 +145,7 @@ export const Thread = <
   const { client } = useChatContext<StreamChatGenerics>();
   const { threadList } = useChannelContext<StreamChatGenerics>();
   const { MessageList } = useMessagesContext<StreamChatGenerics>();
-  const { closeThread, loadMoreThread, reloadThread, thread } =
+  const { closeThread, loadMoreThread, reloadThread, thread, threadInstance } =
     useThreadContext<StreamChatGenerics>();
 
   if (thread?.id && !threadList) {
@@ -155,6 +163,7 @@ export const Thread = <
         MessageList,
         reloadThread,
         thread,
+        threadInstance,
       }}
       {...props}
     />

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

@@ -54,6 +54,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": undefined,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -62,6 +63,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message6",
@@ -83,6 +85,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": undefined,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -91,6 +94,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message5",
@@ -112,6 +116,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "attachments": [],
               "created_at": 2020-05-05T14:50:00.000Z,
               "dateSeparator": 2020-05-05T14:50:00.000Z,
+              "deleted_at": null,
               "groupStyles": [
                 "single",
               ],
@@ -120,6 +125,7 @@ exports[`Thread should match thread snapshot 1`] = `
               "message_text_updated_at": "2020-05-05T14:50:00.000Z",
               "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04",
               "pinned_at": null,
+              "reaction_groups": null,
               "readBy": false,
               "status": "received",
               "text": "Message4",

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import {
@@ -17,6 +17,10 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
+  activityIndicatorContainer: {
+    padding: 10,
+    width: '100%',
+  },
   messagePadding: {
     paddingHorizontal: 8,
   },
@@ -40,6 +44,25 @@ type ThreadFooterComponentPropsWithContext<
 > = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'parentMessagePreventPress' | 'thread'>;
 
+export const InlineLoadingMoreThreadIndicator = () => {
+  const { threadLoadingMore } = useThreadContext();
+  const {
+    theme: {
+      colors: { accent_blue },
+    },
+  } = useTheme();
+
+  if (!threadLoadingMore) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
+
 const ThreadFooterComponentWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -111,6 +134,7 @@ const ThreadFooterComponentWithContext = <
               })}
         </Text>
       </View>
+      <InlineLoadingMoreThreadIndicator />
     </View>
   );
 };
@@ -163,7 +187,8 @@ export const ThreadFooterComponent = <
   props: ThreadFooterComponentProps<StreamChatGenerics>,
 ) => {
   const { Message } = useMessagesContext<StreamChatGenerics>();
-  const { parentMessagePreventPress, thread } = useThreadContext<StreamChatGenerics>();
+  const { parentMessagePreventPress, thread, threadLoadingMore } =
+    useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter
@@ -171,6 +196,7 @@ export const ThreadFooterComponent = <
         Message,
         parentMessagePreventPress,
         thread,
+        threadLoadingMore,
       }}
       {...props}
     />

package/src/components/ThreadList/ThreadList.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react';
+import { FlatList, View } from 'react-native';
+
+import { Thread, ThreadManagerState } from 'stream-chat';
+
+import { ThreadListItem } from './ThreadListItem';
+import { ThreadListUnreadBanner as DefaultThreadListBanner } from './ThreadListUnreadBanner';
+
+import { useChatContext } from '../../contexts';
+import {
+  ThreadsContextValue,
+  ThreadsProvider,
+  useThreadsContext,
+} from '../../contexts/threadsContext/ThreadsContext';
+import { useStateStore } from '../../hooks';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
+import { LoadingIndicator } from '../Indicators/LoadingIndicator';
+
+const selector = (nextValue: ThreadManagerState) =>
+  [nextValue.threads, nextValue.pagination.isLoading, nextValue.pagination.isLoadingNext] as const;
+
+export type ThreadListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  ThreadsContextValue<StreamChatGenerics>,
+  | 'additionalFlatListProps'
+  | 'isFocused'
+  | 'onThreadSelect'
+  | 'ThreadListEmptyPlaceholder'
+  | 'ThreadListLoadingIndicator'
+  | 'ThreadListUnreadBanner'
+> & { ThreadList?: React.ComponentType };
+
+export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
+
+export const DefaultThreadListLoadingIndicator = () => <LoadingIndicator listType='threads' />;
+export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator />;
+
+const DefaultThreadListItem = (props: { item: Thread }) => <ThreadListItem thread={props.item} />;
+
+const ThreadListComponent = () => {
+  const {
+    additionalFlatListProps,
+    isLoading,
+    isLoadingNext,
+    loadMore,
+    ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,
+    ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,
+    ThreadListLoadingMoreIndicator = DefaultThreadListLoadingNextIndicator,
+    ThreadListUnreadBanner = DefaultThreadListBanner,
+    threads,
+  } = useThreadsContext();
+
+  if (isLoading) {
+    return (
+      <View style={{ flex: 1 }}>
+        <ThreadListLoadingIndicator />
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <ThreadListUnreadBanner />
+      <FlatList
+        contentContainerStyle={{ flexGrow: 1 }}
+        data={threads}
+        keyExtractor={(props) => props.id}
+        ListEmptyComponent={ThreadListEmptyPlaceholder}
+        ListFooterComponent={isLoadingNext ? ThreadListLoadingMoreIndicator : null}
+        onEndReached={loadMore}
+        renderItem={DefaultThreadListItem}
+        testID='thread-flatlist'
+        {...additionalFlatListProps}
+      />
+    </>
+  );
+};
+
+export const ThreadList = (props: ThreadListProps) => {
+  const { isFocused = true, ThreadList = ThreadListComponent } = props;
+  const { client } = useChatContext();
+
+  useEffect(() => {
+    if (!client) return;
+    if (isFocused) {
+      client.threads.activate();
+    } else {
+      client.threads.deactivate();
+    }
+  }, [client, isFocused]);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const listener = client.on('connection.recovered', () => {
+      client.threads.reload({ force: true });
+    });
+
+    client.threads.reload({ force: true });
+
+    return () => {
+      client.threads.deactivate();
+      listener.unsubscribe();
+    };
+  }, [client]);
+
+  const [threads, isLoading, isLoadingNext] = useStateStore(client.threads.state, selector);
+
+  return (
+    <ThreadsProvider
+      value={{ isLoading, isLoadingNext, loadMore: client.threads.loadNextPage, threads, ...props }}
+    >
+      <ThreadList />
+    </ThreadsProvider>
+  );
+};