stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.3

package/src/components/Channel/ChannelShell.tsx

@@ -91,8 +91,8 @@ export const reactionData: ReactionData[] = [
 ];
 
 /**
- * The configuration `<Channel>` and `<Thread>` share: everything that shapes how the message list,
- * the messages and the composer below them behave, as opposed to which conversation they show.
+ * Configuration shared by `<Channel>` and `<Thread>` for the message list, messages and composer
+ * below them.
  */
 export type ChannelConfigProps = Partial<
   Pick<
@@ -187,22 +187,17 @@ export type ChannelConfigProps = Partial<
       | 'hasCreatePoll'
     >
   > & {
-    /**
-     * Additional props passed to keyboard avoiding view
-     */
+    /** Additional props passed to the keyboard avoiding view. */
     additionalKeyboardAvoidingViewProps?: Partial<KeyboardCompatibleViewProps>;
     /**
-     * If true, multiple audio players will be allowed to play simultaneously
+     * If true, multiple audio players can play simultaneously.
      * @default true
      */
     allowConcurrentAudioPlayback?: boolean;
     /**
-     * When true, disables the KeyboardCompatibleView wrapper
-     *
-     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
-     * component to adjust the height of Channel when the keyboard is opened or dismissed. This prop provides the ability to disable this functionality in case you
-     * want to use [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview) or handle dismissal yourself.
-     * KeyboardAvoidingView works well when your component occupies 100% of screen height, otherwise it may raise some issues.
+     * Disables the `KeyboardCompatibleView` that resizes the channel when the keyboard opens or
+     * closes, for apps that use React Native's `KeyboardAvoidingView` or handle it themselves.
+     * Defaults to false.
      */
     disableKeyboardCompatibleView?: boolean;
     keyboardBehavior?: KeyboardCompatibleViewProps['behavior'];
@@ -213,24 +208,17 @@ export type ChannelConfigProps = Partial<
 type ChannelShellProps = ChannelConfigProps & {
   channel: Channel;
   hasPendingInitialTargetLoad: () => boolean;
-  /**
-   * Set by `<Thread>`: the list and the composer below show this thread's replies.
-   */
+  /** Set by `<Thread>`: the list and composer below show this thread's replies. */
   thread?: Thread;
 };
 
-/**
- * Poll composition, resolved: the channel type's `polls` flag already ANDed with anything registered
- * through `client.config.set({ messageComposer: { polls } })`. Module scope keeps the reference stable.
- */
+// Resolved poll composition: the channel type's `polls` flag combined with anything registered
+// through `client.config.set({ messageComposer: { polls } })`.
 const composerPollsSelector = (state: MessageComposerConfig) => ({
   pollsEnabled: state.polls.enabled,
 });
 
-/**
- * The slash commands this channel type offers, as the server reports them. Lives on resolved channel
- * configuration so there is one place to read from — see `ChannelConfig.availableCommands`.
- */
+// The slash commands the channel type offers, as the server reports them.
 const availableCommandsSelector = (state: ChannelConfig) => ({
   availableCommands: state.availableCommands,
 });
@@ -241,8 +229,8 @@ const channelStatusSelector = (state: ChannelDataState & ChannelLifecycleState)
 });
 
 /**
- * The providers a message list and a composer need, shared by `<Channel>` and `<Thread>`. Each of
- * those owns its own lifecycle (watching, loading, marking read) and renders this around its children.
+ * The providers a message list and composer need, shared by `<Channel>` and `<Thread>`, which each
+ * own their lifecycle (watching, loading, marking read) and render this around their children.
  */
 export const ChannelShell = (props: PropsWithChildren<ChannelShellProps>) => {
   const {
@@ -296,7 +284,7 @@ export const ChannelShell = (props: PropsWithChildren<ChannelShellProps>) => {
     hasCameraPicker = isImagePickerAvailable(),
     hasCommands,
     hasCreatePoll,
-    // If pickDocument isn't available, default to hiding the file picker
+    // The file picker is hidden when no document picker is available.
     hasFilePicker = isDocumentPickerAvailable(),
     hasImagePicker = isImagePickerAvailable() || isImageMediaLibraryAvailable(),
     hasPendingInitialTargetLoad,
@@ -355,8 +343,8 @@ export const ChannelShell = (props: PropsWithChildren<ChannelShellProps>) => {
   ) ?? { pollsEnabled: false };
   const pollCreationEnabled = !pendingDisposal && !!channel?.id && pollsEnabled;
 
-  // Sent directly rather than through `channel.stopTyping()`, which does nothing once the socket is
-  // closed, and `<Chat>` usually closes it on background before this runs.
+  // Sent as an event because `channel.stopTyping()` does nothing once the socket is closed, which
+  // `<Chat>` usually does on background before this runs.
   const handleAppBackground = useCallback(() => {
     if (!channel.isTyping || !channel.data?.own_capabilities?.includes('send-typing-events')) {
       return;
@@ -371,16 +359,8 @@ export const ChannelShell = (props: PropsWithChildren<ChannelShellProps>) => {
 
   useAppStateListener(undefined, handleAppBackground);
 
-  /**
-   * Channel configs for use in disabling local functionality.
-   * Nullish coalescing is used to give first priority to props to override
-   * the server settings. Then priority to server settings to override defaults.
-   *
-   * Read from the channel's *resolved* configuration, which carries the server's command list as
-   * `availableCommands`. That is reactive, so the list no longer has to be re-read imperatively on
-   * every render — and it no longer throws for a channel pending disposal, which is why the previous
-   * try/catch wrapper is gone.
-   */
+  // Read from the channel's resolved configuration. The `hasCommands` prop, when set, takes
+  // priority over the server's command list.
   const { availableCommands } = useStateStore(channel?.configState, availableCommandsSelector) ?? {
     availableCommands: [],
   };

package/src/components/Channel/__tests__/Channel.test.tsx

@@ -3,7 +3,7 @@ import { AppState, AppStateStatus, View } from 'react-native';
 
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, StreamChat as StreamChatType } from 'stream-chat';
-import { asTimestampNS, StreamChat } from 'stream-chat';
+import { asTimestampNS, ChannelWatchStatus, StreamChat } from 'stream-chat';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import { ChannelContext, ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
@@ -153,7 +153,7 @@ describe('Channel', () => {
     } as never);
     draft.initialized = true;
     const watchSpy = jest.spyOn(draft, 'watch');
-    const reloadSpy = jest.spyOn(draft.messagePaginator, 'reload');
+    const seedSpy = jest.spyOn(draft.messagePaginator, 'reload');
 
     renderComponent({ channel: draft });
     // let the mount effect run to its end
@@ -163,7 +163,7 @@ describe('Channel', () => {
 
     expect(draft.isProvisional).toBe(true);
     expect(watchSpy).not.toHaveBeenCalled();
-    expect(reloadSpy).not.toHaveBeenCalled();
+    expect(seedSpy).not.toHaveBeenCalled();
   });
 
   it('should set an error if channel watch fails and render a LoadingErrorIndicator', async () => {
@@ -236,8 +236,8 @@ describe('Channel', () => {
       }),
     );
 
-  it('should call the channel query method to load more messages', async () => {
-    const channelQuerySpy = jest.spyOn(channel, 'query');
+  it('should request the channel state to load more messages', async () => {
+    const channelQuerySpy = jest.spyOn(channel, 'requestChannelState');
 
     const newMessages = [generateMessage()];
 
@@ -757,6 +757,45 @@ describe('Channel initial load useEffect', () => {
     await waitFor(() => expect(Object.keys(channel.state.members)).toHaveLength(10));
   });
 
+  describe('watch on mount for an initialized channel at the head', () => {
+    const mountLoadedChannel = async (watchStatus: ChannelWatchStatus) => {
+      const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) }));
+      const mockedChannel = generateChannelResponse({ messages });
+      useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+      const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+      await channel.watch();
+      jest.spyOn(channel.messagePaginator, 'isActiveIntervalAtHead', 'get').mockReturnValue(true);
+      channel.watchStatus = watchStatus;
+      const watchSpy = jest.fn();
+      channel.watch = watchSpy;
+      const seedSpy = jest.spyOn(channel.messagePaginator, 'seedUnreadSnapshot');
+
+      renderComponent({ channel, markReadOnMount: false });
+      // The seed runs after the watch decision, so the mount effect has made it by then.
+      await waitFor(() => expect(seedSpy).toHaveBeenCalled());
+
+      return watchSpy;
+    };
+
+    it('watches a channel that was loaded without a watch, such as a search result', async () => {
+      const watchSpy = await mountLoadedChannel(ChannelWatchStatus.NotWatching);
+
+      expect(watchSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not watch a channel that is already watched', async () => {
+      const watchSpy = await mountLoadedChannel(ChannelWatchStatus.Watching);
+
+      expect(watchSpy).not.toHaveBeenCalled();
+    });
+
+    it('leaves a channel whose watch dropped with the connection to the connection recovery', async () => {
+      const watchSpy = await mountLoadedChannel(ChannelWatchStatus.WasWatching);
+
+      expect(watchSpy).not.toHaveBeenCalled();
+    });
+  });
+
   describe('message page size', () => {
     const mountChannel = async () => {
       const mockedChannel = generateChannelResponse({ messages: [] });
@@ -979,7 +1018,7 @@ describe('Channel initial load useEffect', () => {
     await channel.watch();
 
     // Call through to the real reload so the resync actually reconciles (and we can assert it ran).
-    const reloadSpy = jest.spyOn(channel, 'reload');
+    const seedSpy = jest.spyOn(channel, 'reload');
 
     renderComponent({ channel });
 
@@ -1007,8 +1046,8 @@ describe('Channel initial load useEffect', () => {
     // The reload re-watches and reconciles, but preserves the failed (locally-unsent) messages —
     // the 10 originals + 10 failed remain.
     await waitFor(() => {
-      expect(reloadSpy).toHaveBeenCalled();
-      expect(channel.messagePaginator.headItems.length).toBe(20);
+      expect(seedSpy).toHaveBeenCalled();
+      expect(channel.messagePaginator.anchoredHeadItems.length).toBe(20);
     });
   });
 

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

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import { ChannelWatchStatus } from 'stream-chat';
 import type { Channel, StreamChat } from 'stream-chat';
 
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
@@ -11,10 +12,9 @@ import { useNotificationApi } from '../../Notifications';
 const DEFAULT_MESSAGE_LIST_PAGE_SIZE = 25;
 
 /**
- * Whether the integrator registered a message page size through `client.config` — under
- * `channel.messagePaginator` or the general `messagePaginator` key, the two the paginator resolves its
- * own `pageSize` from. The default is applied only when neither did: the `pageSize` setter is a runtime
- * patch, which outranks every declarative layer and would silently discard the registration.
+ * Whether a message page size is registered through `client.config`, under
+ * `channel.messagePaginator` or `messagePaginator`. The default page size is applied only when none
+ * is, as the `pageSize` setter outranks every registered config.
  */
 const hasRegisteredMessagePageSize = (client: StreamChat) =>
   client.config.getConfig('channel')?.messagePaginator?.pageSize !== undefined ||
@@ -29,12 +29,18 @@ export type UseChannelLifecycleParams = Pick<TranslationContextValue, 't'> & {
 };
 
 /**
- * A hook encapsulating everything `<Channel>` does to a channel while it is mounted. The first load
- * (watch, a cold open's first page, the unread snapshot, the jump to the first unread, mark read on
- * open etc.), activation and mark read after a reconnect.
+ * Everything `<Channel>` does to its channel while mounted: the first load (watch, first page,
+ * unread snapshot, jump to the first unread, mark read), activation, and mark read after a
+ * reconnect.
  *
- * Returns whether the list is already aimed at a message, which the list reads to keep its initial
- * anchor from overriding that jump.
+ * @param params.channel The channel to manage.
+ * @param params.client The chat client.
+ * @param params.initialScrollToFirstUnreadMessage Jumps to the first unread message on open.
+ * @param params.initializeOnMount Calls `channel.watch()` on mount when the channel needs it.
+ * @param params.markReadOnMount Marks the channel as read on mount.
+ * @param params.t The translation function.
+ * @returns `hasPendingInitialTargetLoad`, which tells the list whether a jump to a message is
+ * pending so its initial anchor does not override it.
  */
 export const useChannelLifecycle = ({
   channel,
@@ -61,13 +67,9 @@ export const useChannelLifecycle = ({
     });
   });
 
-  /**
-   * Whether something already jumped the list to a message, i.e an integrator calling
-   * `channel.messagePaginator.jumpToMessage()` before or while the channel mounts. A jump leaves a
-   * focus signal on the paginator, and while it is set the channel does not jump to the first unread.
-   *
-   * Read on demand rather than subscribed to, since only effects ask.
-   */
+  // Whether something already jumped the list to a message, such as `jumpToMessage()` called
+  // before or while mounting. That leaves a focus signal on the paginator, which suppresses the
+  // jump to the first unread. Read on demand since only effects ask.
   const hasFocusTarget = useStableCallback(
     () => !!channel.messagePaginator.messageFocusSignal.getLatestValue().signal,
   );
@@ -84,9 +86,7 @@ export const useChannelLifecycle = ({
     return hasFocusTarget() || shouldLoadInitialChannelAtFirstUnreadMessage();
   });
 
-  // markRead is not placed on the ChannelContext; the message lists own their own throttled
-  // instance via useMarkRead(channel). The lifecycle needs its own for mark-read on open and after a
-  // reconnect.
+  // The message lists own their own throttled `markRead`, so the lifecycle needs its own.
   const markRead = useMarkRead(channel);
 
   useEffect(() => {
@@ -97,7 +97,7 @@ export const useChannelLifecycle = ({
         return;
       }
 
-      // a draft has no id and is marked initialized and querying it would create it on the server
+      // A draft has no ID and is marked initialized, and querying it would create it on the server.
       if (channel.isProvisional && channel.initialized) {
         return;
       }
@@ -108,7 +108,9 @@ export const useChannelLifecycle = ({
       }
 
       if (
-        (!channel.initialized || !channel.messagePaginator.isActiveIntervalAtHead) &&
+        (!channel.initialized ||
+          !channel.messagePaginator.isActiveIntervalAtHead ||
+          channel.watchStatus === ChannelWatchStatus.NotWatching) &&
         initializeOnMount
       ) {
         try {
@@ -119,14 +121,13 @@ export const useChannelLifecycle = ({
         }
       }
 
-      // we seed the paginator on cold open (push/deep link for example)
+      // Cold open (push or deep link): seed the paginator.
       if (!channel.messagePaginator.state.getLatestValue().items?.length) {
         await channel.messagePaginator.reload();
       }
 
-      // A reopened channel keeps its paginator and with it the unread snapshot from the first open.
-      // Seed it again from the current read state so the unread separator, the unread banner and
-      // the jump to the first unread match what is unread now.
+      // A reopened channel keeps its paginator and its first-open unread snapshot, so reseed it
+      // from the current read state.
       channel.messagePaginator.seedUnreadSnapshot();
 
       if (shouldLoadAtFirstUnread) {
@@ -140,7 +141,7 @@ export const useChannelLifecycle = ({
       }
 
       if (unreadCount > 0 && markReadOnMount) {
-        // needed to keep the unread banner stable
+        // Keeps the unread banner stable.
         await markRead({ updateChannelUnreadState: false });
       }
     };
@@ -152,10 +153,9 @@ export const useChannelLifecycle = ({
   useEffect(() => channel?.activate(), [channel]);
 
   useEffect(() => {
-    // Mark read has to wait for `connection.recovered`, as it is dispatched once the reloads have
-    // landed, so `hasMoreHead` read here reflects the refreshed window. Channel view only, and only
-    // when that window is at the newest, only if the user has paginated up into older history so leave
-    // their read state alone.
+    // Waits for `connection.recovered`, which fires after the reloads land, so `hasMoreHead`
+    // reflects the refreshed window. Marks read only when that window is at the newest message,
+    // leaving the read state alone when the user has paginated up into older history.
     const { unsubscribe } = client.on('connection.recovered', () => {
       if (channel.messagePaginator.hasMoreHead) {
         return;

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

@@ -25,7 +25,7 @@ export const useCreateChannelContext = ({
       maxTimeBetweenGroupedMessages,
       hasPendingInitialTargetLoad,
     }),
-    // Keyed on the instance as well, since a superseded instance shares its id with its successor
+    // Keyed on the instance too, as a superseded instance shares its ID with its successor.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [channel, disabled],
   );

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

@@ -26,9 +26,7 @@ export const useCreateInputMessageInputContext = ({
   setInputRef,
   showPollCreationDialog,
 }: InputMessageInputContextValue & {
-  /**
-   * To ensure we allow re-render, when channel is changed
-   */
+  /** Re-creates the context when the channel changes. */
   channelId?: string;
 }) => {
   const inputMessageInputContext: InputMessageInputContextValue = useMemo(

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

@@ -48,9 +48,7 @@ export const useCreateMessagesContext = ({
   supportedReactions,
   urlPreviewType,
 }: MessagesContextValue & {
-  /**
-   * To ensure we allow re-render, when channel is changed
-   */
+  /** Re-creates the context when the channel changes. */
   channelId?: string;
 }) => {
   const additionalTouchablePropsLength = Object.keys(additionalPressableProps || {}).length;

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

@@ -22,8 +22,7 @@ export const useCreateOwnCapabilitiesContext = ({
   channel: Channel;
   overrideCapabilities?: Partial<OwnCapabilitiesContextValue>;
 }) => {
-  // Sourced reactively from channel.state (kept up to date by the client
-  // on watch/query and `capabilities.changed`).
+  // Updated by the client on watch, query and `capabilities.changed`.
   const { ownCapabilities } = useStateStore(channel.state, selector);
 
   const overrideCapabilitiesKey = overrideCapabilities

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

@@ -7,16 +7,19 @@ const activeSelector = ({ active }: ChannelStateData) => ({ active });
 const editingAuditStateSelector = (state: EditingAuditState) => state;
 
 /**
- * The instance `<Channel>` renders: the one that superseded `channel` (it gets the events from then
- * on), as stream-chat-react's `SupersededChannelSwap` does. It waits while the successor is open
- * elsewhere and this composer isn't empty, as stream-chat only moves a composer into an unused one.
+ * The instance `<Channel>` renders: the one that superseded `channel`, which receives the events
+ * from then on. The swap waits while the successor is open elsewhere and this composer is not
+ * empty, as stream-chat only moves a composer into an unused instance.
+ *
+ * @param channel The channel, or `undefined` without one.
+ * @returns The successor when it supersedes `channel` and the swap is not waiting, else `channel`.
  */
 export const useSupersededChannelSwap = <T extends Channel | undefined>(
   channel: T,
 ): T | Channel => {
   const { supersededBy } = useStateStore(channel?.state, supersededBySelector) ?? {};
   const successorActive = useStateStore(supersededBy?.state, activeSelector)?.active ?? false;
-  // re-rendered on every composer change, so the emptiness read below stays current
+  // Re-renders on every composer change so the emptiness read below stays current.
   useStateStore(channel?.messageComposer.editingAuditState, editingAuditStateSelector);
   const composerIsEmpty = channel?.messageComposer.compositionIsEmpty ?? true;
 

package/src/components/ChannelDetails/ChannelDetails.tsx

@@ -10,9 +10,7 @@ import { NotificationList } from '../Notifications/NotificationList';
 import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 export type ChannelDetailsProps = {
-  /**
-   * Fired when the back button is pressed on the channel details header.
-   */
+  /** Fired when the back button in the header is pressed. */
   onBack?: () => void;
 };
 

package/src/components/ChannelDetails/__tests__/ChannelDetails.test.tsx

@@ -28,7 +28,7 @@ const Providers = ({ children }: PropsWithChildren) => (
       }}
     >
       <ChatContext.Provider
-        value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+        value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
       >
         {children}
       </ChatContext.Provider>

package/src/components/ChannelDetails/__tests__/ChannelDetailsActionsSection.test.tsx

@@ -69,7 +69,7 @@ const sectionElement = () => (
               mutedUsers: [],
               mutedUsersStore,
               on: () => ({ unsubscribe: () => undefined }),
-              userID: 'me',
+              userId: 'me',
             },
           } as never
         }

package/src/components/ChannelDetails/__tests__/ChannelDetailsEditButton.test.tsx

@@ -63,7 +63,7 @@ const Providers = ({ children }: PropsWithChildren) => (
         }}
       >
         <ChatContext.Provider
-          value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
         >
           {children}
         </ChatContext.Provider>

package/src/components/ChannelDetails/__tests__/ChannelDetailsMemberSection.test.tsx

@@ -99,7 +99,7 @@ const renderSection = ({
                   mutedUsers: [],
                   notifications: new NotificationManager(),
                   on: () => ({ unsubscribe: () => undefined }),
-                  userID: 'me',
+                  userId: 'me',
                 },
               } as never
             }

package/src/components/ChannelDetails/__tests__/ChannelDetailsNavHeader.test.tsx

@@ -39,7 +39,7 @@ const Providers = ({ children }: PropsWithChildren) => (
         }}
       >
         <ChatContext.Provider
-          value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+          value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
         >
           {children}
         </ChatContext.Provider>

package/src/components/ChannelDetails/__tests__/ChannelDetailsProfile.test.tsx

@@ -31,7 +31,7 @@ const buildChannel = () =>
   ({
     cid: 'messaging:test',
     data: {},
-    getClient: () => ({ userID: OWN_USER_ID }),
+    getClient: () => ({ userId: OWN_USER_ID }),
     on: () => ({ unsubscribe: () => undefined }),
   }) as unknown as Channel;
 
@@ -45,7 +45,7 @@ const renderProfile = ({ channel = buildChannel() }: { channel?: Channel } = {})
           userLanguage: 'en',
         }}
       >
-        <ChatProvider value={{ client: { userID: OWN_USER_ID } } as never}>
+        <ChatProvider value={{ client: { userId: OWN_USER_ID } } as never}>
           <ChannelDetailsContextProvider channel={channel}>
             <ChannelDetailsProfile />
           </ChannelDetailsContextProvider>

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsForm.test.tsx

@@ -73,7 +73,7 @@ const renderForm = ({ channel, onClose = jest.fn() }: { channel: Channel; onClos
           }}
         >
           <ChatContext.Provider
-            value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+            value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
           >
             <ChannelDetailsContextProvider channel={channel}>
               <WithComponents overrides={{ ChannelEditDetailsFormContent: EditDetailsProbe }}>

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsFormContent.test.tsx

@@ -80,7 +80,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
       >
         <ChatContext.Provider
           value={
-            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+            { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
           }
         >
           <ChannelDetailsContextProvider channel={channel}>
@@ -128,7 +128,7 @@ describe('ChannelEditDetailsFormContent', () => {
         >
           <ChatContext.Provider
             value={
-              { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+              { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
             }
           >
             <ChannelDetailsContextProvider channel={buildChannel()}>

package/src/components/ChannelDetails/__tests__/ChannelEditName.test.tsx

@@ -35,7 +35,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
       >
         <ChatContext.Provider
           value={
-            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+            { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
           }
         >
           <ChannelEditDetailsContext.Provider value={{ store, submit: jest.fn() }}>

package/src/components/ChannelDetails/__tests__/members/ChannelAddMembersForm.test.tsx

@@ -102,7 +102,7 @@ const renderForm = ({
           }}
         >
           <ChatContext.Provider
-            value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+            value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
           >
             <ChannelDetailsContextProvider channel={applyCapabilities(channel, capabilities)}>
               <WithComponents overrides={{ ChannelAddMembersFormContent: AddMembersProbe }}>

package/src/components/ChannelDetails/__tests__/members/ChannelMemberActionsSheet.test.tsx

@@ -76,7 +76,7 @@ const renderSheet = ({
               client: {
                 mutedUsers: [],
                 on: () => ({ unsubscribe: () => undefined }),
-                userID: 'me',
+                userId: 'me',
               },
             } as never
           }
@@ -156,7 +156,7 @@ describe('ChannelMemberActionsSheet', () => {
       <ChatContext.Provider
         value={
           {
-            client: { userID: 'me', mutedUsers: [], on: () => ({ unsubscribe: () => undefined }) },
+            client: { userId: 'me', mutedUsers: [], on: () => ({ unsubscribe: () => undefined }) },
           } as never
         }
       >

package/src/components/ChannelDetails/__tests__/members/ChannelMemberItem.test.tsx

@@ -75,7 +75,7 @@ const renderRow = ({
                 // `useMutedUsers` reads the mutes reactively off `client.mutedUsersStore`.
                 mutedUsersStore: new StateStore({ mutedUsers }),
                 on: () => ({ unsubscribe: () => undefined }),
-                userID: currentUserId,
+                userId: currentUserId,
               },
             } as never
           }

package/src/components/ChannelDetails/__tests__/useChannelDetailsMemberStatusText.test.tsx

@@ -55,7 +55,7 @@ const t = ((
 const OWN_USER_ID = 'own-user';
 const channel = {
   cid: 'messaging:test',
-  getClient: () => ({ userID: OWN_USER_ID }),
+  getClient: () => ({ userId: OWN_USER_ID }),
 } as unknown as Channel;
 
 const renderStatusText = () => {

package/src/components/ChannelDetails/__tests__/useEditChannelImage.test.tsx

@@ -88,7 +88,7 @@ describe('useEditChannelImage', () => {
       expect(Alert.alert).toHaveBeenCalledTimes(1);
       expect(Alert.alert).toHaveBeenCalledWith(
         'Allow camera access in device settings',
-        'Device camera is used to take photos or videos.',
+        'The camera is used to take the channel image.',
         expect.any(Array),
       );
       expect(returned).toBeUndefined();
@@ -202,7 +202,7 @@ describe('useEditChannelImage', () => {
       expect(Alert.alert).toHaveBeenCalledTimes(1);
       expect(Alert.alert).toHaveBeenCalledWith(
         'Allow access to your Gallery',
-        'Device gallery permissions is used to take photos or videos.',
+        'Gallery access is used to choose the channel image.',
         expect.any(Array),
       );
       expect(returned).toBeUndefined();

package/src/components/ChannelDetails/components/ChannelDetailsActionsSection.tsx

@@ -106,17 +106,12 @@ const UserMuteToggleRow = ({ item }: { item: ChannelActionItem }) => {
 
 export type ChannelDetailsActionsSectionProps = {
   /**
-   * Customize the list of action items rendered in the channel details actions section.
-   *
-   * Receives the default items the SDK produces for the current channel and returns the
-   * final list to render. Use this to filter, reorder, replace, or add items.
-   *
-   * The SDK still wires `onChannelDismiss` into the resulting `leave`, `deleteChannel`, and
-   * `block` items (matched by `id`) after this callback runs, so those actions continue to
-   * dismiss the screen on success regardless of how the items are customized.
+   * Receives the default action items for the channel and returns the list to render, to filter,
+   * reorder, replace or add items. `onChannelDismiss` is wired into the resulting `leave`,
+   * `deleteChannel` and `block` items (matched by `id`) after this callback runs.
    */
   getChannelActionItems?: GetChannelActionItems;
-  /** Fired after the channel is no longer available to the current user (delete, leave, or block actions). */
+  /** Fired once the channel is gone for the user (after delete, leave or block). */
   onChannelDismiss?: () => void;
 };