stream-chat-react-native-core 6.5.1 → 6.6.0

package/src/components/ChannelList/ChannelList.tsx

@@ -1,24 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import type { FlatList } from 'react-native-gesture-handler';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
+import { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
 
 import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
 import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
-import { useAddedToChannelNotification } from './hooks/listeners/useAddedToChannelNotification';
-import { useChannelDeleted } from './hooks/listeners/useChannelDeleted';
-import { useChannelHidden } from './hooks/listeners/useChannelHidden';
-import { useChannelMemberUpdated } from './hooks/listeners/useChannelMemberUpdated';
-import { useChannelTruncated } from './hooks/listeners/useChannelTruncated';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
-import { useChannelVisible } from './hooks/listeners/useChannelVisible';
-import { useNewMessage } from './hooks/listeners/useNewMessage';
-import { useNewMessageNotification } from './hooks/listeners/useNewMessageNotification';
-import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
 import { useUserPresence } from './hooks/listeners/useUserPresence';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -96,7 +87,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onAddedToChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
     options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
@@ -109,7 +100,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelDeleted?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -121,7 +112,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelHidden?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -135,7 +126,7 @@ export type ChannelListProps<
    */
   onChannelMemberUpdated?: (
     lockChannelOrder: boolean,
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
     options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
@@ -148,7 +139,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelTruncated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -160,7 +151,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelUpdated?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -172,7 +163,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onChannelVisible?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -189,7 +180,7 @@ export type ChannelListProps<
    * */
   onNewMessage?: (
     lockChannelOrder: boolean,
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
     options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
@@ -203,7 +194,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onNewMessageNotification?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
     options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
@@ -217,7 +208,7 @@ export type ChannelListProps<
    * @overrideType Function
    * */
   onRemovedFromChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
     event: Event<StreamChatGenerics>,
   ) => void;
   /**
@@ -290,8 +281,68 @@ export const ChannelList = <
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
-  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
+  const { client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
+  const channelManager = useMemo(() => client.createChannelManager({}), [client]);
+
+  /**
+   * This hook sets the event handler overrides in the channelManager internally
+   * whenever they change. We do this to avoid recreating the channelManager instance
+   * every time these change, as we want to keep it as static as possible.
+   * This protects us from something like defining the overrides as inline functions
+   * causing the manager instance to be recreated over and over again.
+   */
+  useEffect(() => {
+    channelManager.setEventHandlerOverrides({
+      channelDeletedHandler: onChannelDeleted,
+      channelHiddenHandler: onChannelHidden,
+      channelTruncatedHandler: onChannelTruncated,
+      channelVisibleHandler: onChannelVisible,
+      memberUpdatedHandler: onChannelMemberUpdated
+        ? (setChannels, event) =>
+            onChannelMemberUpdated(lockChannelOrder, setChannels, event, { filters, sort })
+        : undefined,
+      newMessageHandler: onNewMessage
+        ? (setChannels, event) =>
+            onNewMessage(lockChannelOrder, setChannels, event, { filters, sort })
+        : undefined,
+      notificationAddedToChannelHandler: onAddedToChannel
+        ? (setChannels, event) => onAddedToChannel(setChannels, event, { filters, sort })
+        : undefined,
+      notificationNewMessageHandler: onNewMessageNotification
+        ? (setChannels, event) => onNewMessageNotification(setChannels, event, { filters, sort })
+        : undefined,
+      notificationRemovedFromChannelHandler: onRemovedFromChannel,
+    });
+  }, [
+    channelManager,
+    filters,
+    lockChannelOrder,
+    onAddedToChannel,
+    onChannelDeleted,
+    onChannelHidden,
+    onChannelMemberUpdated,
+    onChannelTruncated,
+    onChannelVisible,
+    onNewMessage,
+    onNewMessageNotification,
+    onRemovedFromChannel,
+    sort,
+  ]);
+
+  useEffect(() => {
+    channelManager.setOptions({ abortInFlightQuery: true, lockChannelOrder });
+  }, [channelManager, lockChannelOrder]);
+
+  useEffect(() => {
+    channelManager.registerSubscriptions();
+
+    return () => {
+      channelManager.unregisterSubscriptions();
+    };
+  }, [channelManager]);
+
   const {
+    channelListInitialized,
     channels,
     error,
     hasNextPage,
@@ -301,9 +352,9 @@ export const ChannelList = <
     refreshing,
     refreshList,
     reloadList,
-    setChannels,
     staticChannelsActive,
   } = usePaginatedChannels<StreamChatGenerics>({
+    channelManager,
     enableOfflineSupport,
     filters,
     options,
@@ -311,75 +362,25 @@ export const ChannelList = <
     sort,
   });
 
-  // Setup event listeners
-  useAddedToChannelNotification({
-    onAddedToChannel,
-    options: { filters, sort },
-    setChannels,
-  });
-
-  useChannelDeleted({
-    onChannelDeleted,
-    setChannels,
-  });
-
-  useChannelHidden({
-    onChannelHidden,
-    setChannels,
-  });
-
-  useChannelMemberUpdated({
-    lockChannelOrder,
-    onChannelMemberUpdated,
-    options: { filters, sort },
-    setChannels,
-  });
-
-  useChannelTruncated({
-    onChannelTruncated,
-    refreshList,
-    setChannels,
-    setForceUpdate,
-  });
-
   useChannelUpdated({
     onChannelUpdated,
-    setChannels,
-  });
-
-  useChannelVisible({
-    onChannelVisible,
-    options: { sort },
-    setChannels,
-  });
-
-  useNewMessage({
-    lockChannelOrder,
-    onNewMessage,
-    options: { filters, sort },
-    setChannels,
-  });
-
-  useNewMessageNotification({
-    onNewMessageNotification,
-    options: { filters, sort },
-    setChannels,
-  });
-
-  useRemovedFromChannelNotification({
-    onRemovedFromChannel,
-    setChannels,
+    setChannels: channelManager.setChannels,
   });
 
   useUserPresence({
-    setChannels,
+    setChannels: channelManager.setChannels,
     setForceUpdate,
   });
 
   const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');
 
   useEffect(() => {
-    if (channels === null || staticChannelsActive || !enableOfflineSupport) {
+    if (
+      channels == null ||
+      !channelListInitialized ||
+      staticChannelsActive ||
+      !enableOfflineSupport
+    ) {
       return;
     }
 
@@ -393,6 +394,7 @@ export const ChannelList = <
 
   const channelsContext = useCreateChannelsContext({
     additionalFlatListProps,
+    channelListInitialized,
     channels: channelRenderFilterFn ? channelRenderFilterFn(channels ?? []) : channels,
     EmptyStateIndicator,
     error,

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -86,6 +86,7 @@ const ChannelListMessengerWithContext = <
   const onEndReachedCalledDuringCurrentScrollRef = useRef<boolean>(false);
   const {
     additionalFlatListProps,
+    channelListInitialized,
     channels,
     EmptyStateIndicator,
     error,
@@ -140,7 +141,7 @@ const ChannelListMessengerWithContext = <
       });
   }
 
-  if (error && !refreshing && !loadingChannels && channels === null) {
+  if (error && !refreshing && !loadingChannels && (channels === null || !channelListInitialized)) {
     return (
       <LoadingErrorIndicator
         error={error}
@@ -211,6 +212,7 @@ export const ChannelListMessenger = <
 ) => {
   const {
     additionalFlatListProps,
+    channelListInitialized,
     channels,
     EmptyStateIndicator,
     error,
@@ -234,6 +236,7 @@ export const ChannelListMessenger = <
     <ChannelListMessengerWithContext
       {...{
         additionalFlatListProps,
+        channelListInitialized,
         channels,
         EmptyStateIndicator,
         error,

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -287,12 +287,12 @@ describe('ChannelList', () => {
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
         render(
           <Chat client={chatClient}>
-            <ChannelList {...props} lockChannelOrder={true} />
+            <ChannelList lockChannelOrder={true} Preview={props.Preview} />
           </Chat>,
         );
 
         await waitFor(() => {
-          expect(screen.getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list-messenger')).toBeTruthy();
         });
 
         const newMessage = sendNewMessageOnChannel3();

package/src/components/ChannelList/__tests__/ChannelListMessenger.test.js

@@ -80,7 +80,9 @@ describe('ChannelListMessenger', () => {
   });
 
   it('renders the `LoadingErrorIndicator` when `error` prop is true', async () => {
-    const { getByTestId } = render(<Component channels={mockChannels} error={true} />);
+    const { getByTestId } = render(
+      <Component channels={mockChannels} error={true} loadingChannels={false} />,
+    );
     await waitFor(() => {
       expect(getByTestId('loading-error')).toBeTruthy();
     });

package/src/components/ChannelList/hooks/listeners/useChannelMemberUpdated.ts

@@ -20,10 +20,10 @@ import {
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     lockChannelOrder: boolean;
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
     onChannelMemberUpdated?: (
       lockChannelOrder: boolean,
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
       event: Event<StreamChatGenerics>,
       options?: ChannelListEventListenerOptions<StreamChatGenerics>,
     ) => void;

package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts

@@ -8,9 +8,9 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
     onChannelUpdated?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
       event: Event<StreamChatGenerics>,
     ) => void;
   };

package/src/components/ChannelList/hooks/listeners/useUserPresence.ts

@@ -8,7 +8,7 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
     setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
   };
 

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -7,6 +7,7 @@ export const useCreateChannelsContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   additionalFlatListProps,
+  channelListInitialized,
   channels,
   EmptyStateIndicator,
   error,
@@ -51,6 +52,7 @@ export const useCreateChannelsContext = <
   const channelsContext: ChannelsContextValue<StreamChatGenerics> = useMemo(
     () => ({
       additionalFlatListProps,
+      channelListInitialized,
       channels,
       EmptyStateIndicator,
       error,
@@ -90,6 +92,7 @@ export const useCreateChannelsContext = <
       hasNextPage,
       loadingChannels,
       loadingNextPage,
+      channelListInitialized,
       refreshing,
     ],
   );

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -1,9 +1,16 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import {
+  ChannelFilters,
+  ChannelManager,
+  ChannelManagerState,
+  ChannelOptions,
+  ChannelSort,
+} from 'stream-chat';
 
 import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
 import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
@@ -19,6 +26,7 @@ const waitSeconds = (seconds: number) =>
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
+    channelManager: ChannelManager<StreamChatGenerics>;
     enableOfflineSupport: boolean;
     filters: ChannelFilters<StreamChatGenerics>;
     options: ChannelOptions;
@@ -37,23 +45,34 @@ type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: ChannelManagerState<StreamChatGenerics>,
+) =>
+  ({
+    channelListInitialized: nextValue.initialized,
+    channels: nextValue.channels,
+    pagination: nextValue.pagination,
+  } as const);
+
 export const usePaginatedChannels = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  channelManager,
   enableOfflineSupport,
   filters = {},
   options = DEFAULT_OPTIONS,
   setForceUpdate,
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
-  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[] | null>(null);
   const [error, setError] = useState<Error | undefined>(undefined);
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
-  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('queryLocalDB');
-  const [hasNextPage, setHasNextPage] = useState<boolean>(false);
+  const activeQueryType = useRef<QueryType | null>('queryLocalDB');
   const activeChannels = useActiveChannelsRefContext();
   const isMountedRef = useIsMountedRef();
   const { client } = useChatContext<StreamChatGenerics>();
+  const { channelListInitialized, channels, pagination } =
+    useStateStore(channelManager?.state, selector) ?? {};
+  const hasNextPage = pagination?.hasNext;
 
   const filtersRef = useRef<typeof filters | null>(null);
   const sortRef = useRef<typeof sort | null>(null);
@@ -91,43 +110,32 @@ export const usePaginatedChannels = <
     setError(undefined);
     activeRequestId.current++;
     const currentRequestId = activeRequestId.current;
-    setActiveQueryType(queryType);
+    activeQueryType.current = queryType;
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset:
-        queryType === 'loadChannels' && !staticChannelsActive && channels ? channels.length : 0,
+      offset: 0,
       ...options,
     };
 
     try {
+      if (isQueryStale() || !isMountedRef.current) {
+        return;
+      }
       /**
        * We skipInitialization here for handling race condition between ChannelList, Channel (and Thread)
        * when they all (may) update the channel state at the same time (when connection state recovers)
        * TODO: if we move the channel state to a single context and share it between ChannelList, Channel and Thread we can remove this
        */
-      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
-        skipInitialization: enableOfflineSupport ? undefined : activeChannels.current,
-      });
-      if (isQueryStale() || !isMountedRef.current) {
-        return;
+      if (queryType === 'loadChannels') {
+        await channelManager.loadNext();
+      } else {
+        await channelManager.queryChannels(filters, sort, newOptions, {
+          skipInitialization: enableOfflineSupport ? undefined : activeChannels.current,
+        });
       }
 
-      const newChannels =
-        queryType === 'loadChannels' && !staticChannelsActive && channels
-          ? [...channels, ...channelQueryResponse]
-          : channelQueryResponse.map((c) => {
-              const existingChannel = client.activeChannels[c.cid];
-              if (existingChannel) {
-                return existingChannel;
-              }
-
-              return c;
-            });
-
-      setChannels(newChannels);
       setStaticChannelsActive(false);
-      setHasNextPage(channelQueryResponse.length >= newOptions.limit);
       isQueryingRef.current = false;
     } catch (err: unknown) {
       isQueryingRef.current = false;
@@ -140,7 +148,7 @@ export const usePaginatedChannels = <
       // querying.current check is needed in order to make sure the next query call doesnt flick an error
       // state and then succeed (reconnect case)
       if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {
-        setActiveQueryType(null);
+        activeQueryType.current = null;
         console.warn(err);
 
         setError(
@@ -154,7 +162,7 @@ export const usePaginatedChannels = <
       return queryChannels(queryType, retryCount + 1);
     }
 
-    setActiveQueryType(null);
+    activeQueryType.current = null;
   };
 
   const refreshList = async () => {
@@ -207,7 +215,7 @@ export const usePaginatedChannels = <
             skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
           });
 
-          setChannels(offlineChannels);
+          channelManager.setChannels(offlineChannels);
           setStaticChannelsActive(true);
         }
       } catch (e) {
@@ -215,7 +223,7 @@ export const usePaginatedChannels = <
         return false;
       }
 
-      setActiveQueryType(null);
+      activeQueryType.current = null;
 
       return true;
     };
@@ -257,26 +265,28 @@ export const usePaginatedChannels = <
 
     return () => listener?.unsubscribe?.();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterStr, sortStr]);
+  }, [filterStr, sortStr, channelManager]);
 
   return {
+    channelListInitialized,
     channels,
     error,
     hasNextPage,
     loadingChannels:
-      activeQueryType === 'queryLocalDB'
+      activeQueryType.current === 'queryLocalDB'
         ? true
-        : (activeQueryType === 'reload' || activeQueryType === null) && channels === null,
-    loadingNextPage: activeQueryType === 'loadChannels',
-    loadNextPage: queryChannels,
-    refreshing: activeQueryType === 'refresh',
+        : // Although channels.length === 0 should come as a given when we have !channelListInitialized,
+          // due to the way offline storage works currently we have to do this additional
+          // check to make sure channels were not populated before the reactive list becomes
+          // ready. I do not like providing a way to set the ready state, as it should be managed
+          // in the LLC entirely. Once we move offline support to the LLC, we can remove this check
+          // too as it'll be redundant.
+          pagination?.isLoading || (!channelListInitialized && channels.length === 0),
+    loadingNextPage: pagination?.isLoadingNext,
+    loadNextPage: channelManager.loadNext,
+    refreshing: activeQueryType.current === 'refresh',
     refreshList,
     reloadList,
-    // Although channels can be null, there is no practical case where channels will be null
-    // when setChannels is used. setChannels is only recommended to be used for overriding
-    // event handler. Thus instead of adding if check for channels === null, its better to
-    // simply reassign types here.
-    setChannels,
     staticChannelsActive,
   };
 };

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

@@ -10,6 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { ArrowLeft, CircleStop, Delete, Mic, SendCheck } from '../../../../icons';
 
 import { AudioRecordingReturnType } from '../../../../native';
@@ -142,6 +143,7 @@ const AudioRecorderWithContext = <
     stopVoiceRecording,
     uploadVoiceRecording,
   } = props;
+  const { t } = useTranslationContext();
 
   const {
     theme: {
@@ -189,7 +191,9 @@ const AudioRecorderWithContext = <
         <Animated.View
           style={[styles.slideToCancelContainer, slideToCancelStyle, slideToCancelContainer]}
         >
-          <Text style={[styles.slideToCancel, { color: grey_dark }]}>Slide to Cancel</Text>
+          <Text style={[styles.slideToCancel, { color: grey_dark }]}>
+            {t<string>('Slide to Cancel')}
+          </Text>
           <ArrowLeft fill={grey_dark} size={24} {...arrowLeftIcon} />
         </Animated.View>
       </>

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -42,6 +42,10 @@ export type ChannelsContextValue<
    * **Note:** Don't use `additionalFlatListProps` to access the FlatList ref, use `setFlatListRef`
    */
   additionalFlatListProps: Partial<FlatListProps<Channel<StreamChatGenerics>>>;
+  /**
+   * A control prop used to determine whether the first query of the channel list has succeeded.
+   */
+  channelListInitialized: boolean;
   /**
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */

package/src/i18n/en.json

@@ -94,6 +94,7 @@
   "Send a message": "Send a message",
   "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
   "Show All": "Show All",
+  "Slide to Cancel": "Slide to Cancel",
   "Slow mode ON": "Slow mode ON",
   "Suggest an option": "Suggest an option",
   "The message has been reported to a moderator.": "The message has been reported to a moderator.",

package/src/i18n/es.json

@@ -96,6 +96,7 @@
   "Send a message": "Enviar un mensaje",
   "Sending links is not allowed in this conversation": "No está permitido enviar enlaces en esta conversación",
   "Show All": "Mostrar todo",
+  "Slide to Cancel": "Desliza para cancelar",
   "Slow mode ON": "Modo lento ACTIVADO",
   "Suggest an option": "Sugerir una opción",
   "The message has been reported to a moderator.": "El mensaje ha sido reportado a un moderador.",

package/src/i18n/fr.json

@@ -96,6 +96,7 @@
   "Send a message": "Envoyer un message",
   "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
   "Show All": "Afficher tout",
+  "Slide to Cancel": "Glisser pour annuler",
   "Slow mode ON": "Mode lent activé",
   "Suggest an option": "Suggérer une option",
   "The message has been reported to a moderator.": "Le message a été signalé à un modérateur.",