stream-chat-react-native-core 9.3.1-beta.9 → 9.4.0-beta.1

package/lib/typescript/utils/i18n/types.d.ts

@@ -62,6 +62,7 @@ export type TimestampFormatterOptions = {
 };
 export type PredefinedFormatters = {
     durationFormatter: FormatterFactory<string>;
+    fromNowFormatter: FormatterFactory<string | Date>;
     relativeCompactDateFormatter: FormatterFactory<string | Date>;
     timestampFormatter: FormatterFactory<string | Date>;
 };

package/lib/typescript/utils/i18n/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,UAAU,EAAE,UAAU,KACnB,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAKrF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IAEtC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,iBAAiB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC5C,4BAA4B,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9D,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAChC,UAAU,EAAE,UAAU,KACnB,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAKrF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IAEtC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,iBAAiB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC5C,gBAAgB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClD,4BAA4B,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9D,kBAAkB,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.3.1-beta.9",
+  "version": "9.4.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -78,7 +78,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
-    "stream-chat": "^9.44.2",
+    "stream-chat": "^9.45.3",
     "use-sync-external-store": "^1.5.0"
   },
   "peerDependencies": {

package/src/__tests__/offline-support/offline-feature.tsx

@@ -1576,22 +1576,16 @@ export const Generic = () => {
       await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
 
-      const oldMemberCount = targetChannel.channel.member_count;
       const newMember = generateMember();
       act(() => dispatchMemberAddedEvent(chatClient, newMember, targetChannel.channel));
 
       await waitFor(async () => {
         const membersRows = await BetterSqlite.selectFromTable('members');
-        const channelRows = await BetterSqlite.selectFromTable('channels');
         const matchingMembersRows = membersRows.filter(
           (m) => m.cid === targetChannel.channel.cid && m.userId === newMember.user_id,
         );
-        const targetChannelFromDb = channelRows.filter(
-          (c) => c.cid === targetChannel.channel.cid,
-        )[0];
 
         expect(matchingMembersRows.length).toBe(1);
-        expect(targetChannelFromDb.memberCount).toBe(oldMemberCount + 1);
       });
     });
 
@@ -1605,21 +1599,15 @@ export const Generic = () => {
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
-      const oldMemberCount = targetChannel.channel.member_count;
       act(() => dispatchMemberRemovedEvent(chatClient, targetMember, targetChannel.channel));
 
       await waitFor(async () => {
         const membersRows = await BetterSqlite.selectFromTable('members');
-        const channelRows = await BetterSqlite.selectFromTable('channels');
         const matchingMembersRows = membersRows.filter(
           (m) => m.cid === targetChannel.channel.cid && m.userId === targetMember.user_id,
         );
-        const targetChannelFromDb = channelRows.filter(
-          (c) => c.cid === targetChannel.channel.cid,
-        )[0];
 
         expect(matchingMembersRows.length).toBe(0);
-        expect(targetChannelFromDb.memberCount).toBe(oldMemberCount - 1);
       });
     });
 

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -56,6 +56,9 @@ export const AttachmentPicker = () => {
 
   useEffect(() => {
     const backAction = () => {
+      if (currentIndexRef.current === -1) {
+        return false;
+      }
       if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
         attachmentPickerStore.setSelectedPicker(undefined);
         closePicker();

package/src/components/ChannelDetails/ChannelDetails.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import {
+  ChannelDetailsContextProvider,
+  type ChannelDetailsContextValue,
+} from '../../contexts/channelDetailsContext/channelDetailsContext';
+import { useChannelDetailsContext } from '../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
+import type { GetChannelActionItems } from '../../hooks/actions/useChannelActionItems';
+import type { GetChannelMemberActionItems } from '../../hooks/actions/useChannelMemberActionItems';
+import { useIsDirectChat } from '../../hooks/useIsDirectChat';
+import { primitives } from '../../theme';
+import { GlobalFileUploadRequest } from '../../types/types';
+import { NotificationList } from '../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
+
+/**
+ * Resolves the trailing role label rendered next to a member row in the channel details screen.
+ *
+ * Return `null` or `undefined` to render no label for the given member.
+ */
+export type GetMemberRoleLabel = (params: {
+  channel: Channel;
+  member: ChannelMemberResponse;
+  t: TranslationContextValue['t'];
+}) => string | null | undefined;
+
+export type ChannelDetailsProps = {
+  channel: Channel;
+  /**
+   * Compress image with quality (from 0 to 1, where 1 is best quality).
+   * On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images,
+   * while a value of 0.8 will reduce the file size by about half or less compared to a value of 1.
+   * Image picker defaults to 0.8 for iOS and 1 for Android
+   */
+  compressImageQuality?: number;
+  /**
+   * 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` and `deleteChannel`
+   * 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.
+   */
+  getChannelActionItems?: GetChannelActionItems;
+  /**
+   * Customize the list of action items rendered in the per-member actions bottom sheet
+   * (the sheet that opens when a member row is tapped).
+   *
+   * Receives the default items the SDK produces for the tapped member (e.g. `muteUser`,
+   * `block`) and returns the final list to render. Use this to filter, reorder, replace,
+   * or add items — for example, to inject a "Send Direct Message" action in your app.
+   */
+  getChannelMemberActionItems?: GetChannelMemberActionItems;
+  /**
+   * Override the role label shown next to each member in the channel details screen.
+   *
+   * The default implementation labels members as `Owner` (channel creator),
+   * `Admin` (`user.role === 'admin'`), or `Moderator` (`channel_role === 'channel_moderator'`),
+   * with priority Owner > Admin > Moderator. Return `null` to render no label.
+   */
+  getMemberRoleLabel?: GetMemberRoleLabel;
+  /**
+   * Fired when the user taps the "add members" button, by default it opens the add members bottom sheet. Only visible if the current user has the `update-channel-members` capability.
+   */
+  onAddMembersPress?: () => void;
+  /**
+   * Fired when the back button is pressed on the channel details header.
+   */
+  onBack?: () => void;
+  /** Fired after the channel is no longer available to the current user (delete, leave, or block actions). */
+  onChannelDismiss?: () => void;
+  /**
+   * Fired when the user taps the "Edit" button in the channel details header.
+   * The button is only rendered when the current user has the `update-channel`
+   * capability. By default it opens the channel edit details modal. Not shown in direct (1:1) channels.
+   */
+  onEditChannelPress?: () => void;
+  /**
+   * Fired when the user taps a member row. Receives the tapped member.
+   *
+   * Applies both to the member preview on the channel details screen and to the full
+   * list opened via the "view all members" modal. If omitted, the default behavior is
+   * to open the per-member actions bottom sheet (mute, block, etc.).
+   */
+  onMemberPress?: (member: ChannelMemberResponse) => void;
+  /**
+   * Fired when the user taps the "view all members" button, by default it opens the members bottom sheet.
+   */
+  onViewAllMembersPress?: () => void;
+  /**
+   * Override file upload request (used to upload channel image). By default it will use Stream's CDN.
+   * @param file File object to upload
+   */
+  doFileUploadRequest?: GlobalFileUploadRequest;
+};
+
+export const ChannelDetailsContent = () => {
+  const { channel } = useChannelDetailsContext();
+  const {
+    theme: {
+      channelDetails: { container: containerOverride, scrollContent: scrollContentOverride },
+      semantics,
+    },
+  } = useTheme();
+  const {
+    ChannelDetailsActionsSection,
+    ChannelDetailsMemberSection,
+    ChannelDetailsNavigationSection,
+    ChannelDetailsProfile,
+    ChannelDetailsNavHeader,
+  } = useComponentsContext();
+  const isDirect = useIsDirectChat(channel);
+  const styles = useStyles();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: semantics.backgroundCoreApp },
+        containerOverride,
+      ]}
+    >
+      <ChannelDetailsNavHeader />
+      <ScrollView contentContainerStyle={[styles.scrollContent, scrollContentOverride]}>
+        <ChannelDetailsProfile />
+        {ChannelDetailsNavigationSection ? <ChannelDetailsNavigationSection /> : null}
+        {isDirect ? null : <ChannelDetailsMemberSection />}
+        <ChannelDetailsActionsSection />
+      </ScrollView>
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetails = ({
+  channel,
+  compressImageQuality,
+  doFileUploadRequest,
+  getChannelActionItems,
+  getChannelMemberActionItems,
+  getMemberRoleLabel,
+  onAddMembersPress,
+  onBack,
+  onChannelDismiss,
+  onEditChannelPress,
+  onMemberPress,
+  onViewAllMembersPress,
+}: ChannelDetailsProps) => {
+  const { ChannelDetailsContent: ChannelDetailsContentOverride } = useComponentsContext();
+  const value = useMemo<ChannelDetailsContextValue>(
+    () => ({
+      channel,
+      compressImageQuality,
+      doFileUploadRequest,
+      getChannelActionItems,
+      getChannelMemberActionItems,
+      getMemberRoleLabel,
+      onAddMembersPress,
+      onBack,
+      onChannelDismiss,
+      onEditChannelPress,
+      onMemberPress,
+      onViewAllMembersPress,
+    }),
+    [
+      channel,
+      compressImageQuality,
+      doFileUploadRequest,
+      getChannelActionItems,
+      getChannelMemberActionItems,
+      getMemberRoleLabel,
+      onAddMembersPress,
+      onBack,
+      onChannelDismiss,
+      onEditChannelPress,
+      onMemberPress,
+      onViewAllMembersPress,
+    ],
+  );
+  const Content = ChannelDetailsContentOverride ?? ChannelDetailsContent;
+  const notificationHostId = channel?.cid ? `channel-details:${channel.cid}` : undefined;
+
+  return (
+    <ChannelDetailsContextProvider value={value}>
+      {notificationHostId ? (
+        <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+          <Content />
+          <NotificationList />
+        </NotificationTargetProvider>
+      ) : (
+        <Content />
+      )}
+    </ChannelDetailsContextProvider>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        scrollContent: {
+          gap: primitives.spacingMd,
+          paddingBottom: primitives.spacing3xl,
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacing2xl,
+        },
+      }),
+    [],
+  );
+};

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

@@ -0,0 +1,174 @@
+import React, { PropsWithChildren } from 'react';
+import { Text } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel } from 'stream-chat';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
+import { ChannelDetails } from '../ChannelDetails';
+
+const Providers = ({ children }: PropsWithChildren) => (
+  <ThemeProvider theme={defaultTheme}>
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChatContext.Provider
+        value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+      >
+        {children}
+      </ChatContext.Provider>
+    </TranslationProvider>
+  </ThemeProvider>
+);
+
+const HeaderProbe = () => <Text testID='probe-header'>HEADER</Text>;
+const ProfileProbe = () => <Text testID='probe-profile'>PROFILE</Text>;
+const NavigationProbe = () => <Text testID='probe-navigation'>NAVIGATION</Text>;
+const MemberProbe = () => <Text testID='probe-member'>MEMBER</Text>;
+const ActionsProbe = () => <Text testID='probe-actions'>ACTIONS</Text>;
+
+const SECTION_OVERRIDES = {
+  ChannelDetailsActionsSection: ActionsProbe,
+  ChannelDetailsMemberSection: MemberProbe,
+  ChannelDetailsNavigationSection: NavigationProbe,
+  ChannelDetailsProfile: ProfileProbe,
+  ChannelDetailsNavHeader: HeaderProbe,
+};
+
+const channel = {
+  cid: 'messaging:test',
+  id: 'test',
+  on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+} as unknown as Channel;
+
+const renderContent = () =>
+  render(
+    <Providers>
+      <WithComponents overrides={SECTION_OVERRIDES}>
+        <ChannelDetails channel={channel} />
+      </WithComponents>
+    </Providers>,
+  );
+
+describe('ChannelDetailsContent', () => {
+  let useIsDirectChatSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    useIsDirectChatSpy = jest
+      .spyOn(useIsDirectChatModule, 'useIsDirectChat')
+      .mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('section composition', () => {
+    it('renders header, profile, navigation, and actions sections', () => {
+      renderContent();
+      expect(screen.getByTestId('probe-header')).toBeTruthy();
+      expect(screen.getByTestId('probe-profile')).toBeTruthy();
+      expect(screen.getByTestId('probe-navigation')).toBeTruthy();
+      expect(screen.getByTestId('probe-actions')).toBeTruthy();
+    });
+
+    it('renders the member section for group chats', () => {
+      useIsDirectChatSpy.mockReturnValue(false);
+      renderContent();
+      expect(screen.getByTestId('probe-member')).toBeTruthy();
+    });
+
+    it('hides the member section for direct chats', () => {
+      useIsDirectChatSpy.mockReturnValue(true);
+      renderContent();
+      expect(screen.queryByTestId('probe-member')).toBeNull();
+    });
+  });
+});
+
+describe('ChannelDetails', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('context provisioning', () => {
+    it('exposes channel and callbacks via ChannelDetailsContext', () => {
+      const onChannelDismiss = jest.fn();
+      const onBack = jest.fn();
+      let captured: ReturnType<typeof useChannelDetailsContext> | undefined;
+      const ContextProbe = () => {
+        captured = useChannelDetailsContext();
+        return null;
+      };
+
+      render(
+        <Providers>
+          <WithComponents
+            overrides={{
+              ...SECTION_OVERRIDES,
+              ChannelDetailsContent: ContextProbe,
+            }}
+          >
+            <ChannelDetails channel={channel} onBack={onBack} onChannelDismiss={onChannelDismiss} />
+          </WithComponents>
+        </Providers>,
+      );
+
+      expect(captured).toBeDefined();
+      expect(captured?.channel).toBe(channel);
+      expect(captured?.onChannelDismiss).toBe(onChannelDismiss);
+      expect(captured?.onBack).toBe(onBack);
+    });
+  });
+
+  describe('ChannelDetailsContent override', () => {
+    it('renders the override instead of the default content', () => {
+      const Override = () => <Text testID='custom-content'>CUSTOM</Text>;
+      render(
+        <Providers>
+          <WithComponents
+            overrides={{
+              ...SECTION_OVERRIDES,
+              ChannelDetailsContent: Override,
+            }}
+          >
+            <ChannelDetails channel={channel} />
+          </WithComponents>
+        </Providers>,
+      );
+
+      expect(screen.getByTestId('custom-content')).toBeTruthy();
+      // The default content's section probes should not render.
+      expect(screen.queryByTestId('probe-header')).toBeNull();
+      expect(screen.queryByTestId('probe-profile')).toBeNull();
+    });
+  });
+
+  describe('default content path', () => {
+    it('falls back to ChannelDetailsContent when no override is supplied', () => {
+      jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(false);
+      // Note: re-export the default Content via the override map so we can prove it
+      // wasn't swapped out — the section probes from SECTION_OVERRIDES should appear.
+      render(
+        <Providers>
+          <WithComponents overrides={SECTION_OVERRIDES}>
+            <ChannelDetails channel={channel} />
+          </WithComponents>
+        </Providers>,
+      );
+      expect(screen.getByTestId('probe-header')).toBeTruthy();
+      expect(screen.getByTestId('probe-actions')).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import type { IconProps } from '../../../icons/utils/base';
+import { ChannelDetailsActionItem } from '../components/ChannelDetailsActionItem';
+
+const TestIcon = jest.fn<null, [IconProps]>(() => null);
+
+const renderItem = (props: Partial<React.ComponentProps<typeof ChannelDetailsActionItem>> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <ChannelDetailsActionItem Icon={TestIcon} label='Pinned Messages' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('ChannelDetailsActionItem', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders the provided label', () => {
+      renderItem({ label: 'Mute Group' });
+      expect(screen.getByText('Mute Group')).toBeTruthy();
+    });
+
+    it('renders the icon', () => {
+      renderItem();
+      expect(TestIcon).toHaveBeenCalled();
+    });
+
+    it('renders the trailing slot when provided', () => {
+      renderItem({ trailing: <Text testID='trailing'>5</Text> });
+      expect(screen.getByTestId('trailing', { includeHiddenElements: true })).toBeTruthy();
+    });
+
+    it('omits the trailing slot when not provided', () => {
+      renderItem({ testID: 'item' });
+      expect(screen.queryByTestId('trailing', { includeHiddenElements: true })).toBeNull();
+    });
+  });
+
+  describe('interaction surface', () => {
+    it('renders as a non-interactive row when onPress is not provided', () => {
+      renderItem({ testID: 'item' });
+      const row = screen.getByTestId('item');
+      expect(row.props.accessibilityRole).toBeUndefined();
+      expect(row.props.accessibilityLabel).toBeUndefined();
+    });
+
+    it('renders as a button with the label as accessibilityLabel when onPress is provided', () => {
+      renderItem({ onPress: jest.fn(), testID: 'item' });
+      const row = screen.getByTestId('item');
+      expect(row.props.accessibilityRole).toBe('button');
+      expect(row.props.accessibilityLabel).toBe('Pinned Messages');
+    });
+
+    it('invokes onPress when the row is pressed', () => {
+      const onPress = jest.fn();
+      renderItem({ onPress, testID: 'item' });
+      fireEvent.press(screen.getByTestId('item'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw when pressed without an onPress (read-only row)', () => {
+      renderItem({ testID: 'item' });
+      expect(() => fireEvent.press(screen.getByTestId('item'))).not.toThrow();
+    });
+  });
+
+  describe('destructive variant', () => {
+    const lastIconProps = () => TestIcon.mock.calls[TestIcon.mock.calls.length - 1][0];
+    const labelColor = () => {
+      const styles = screen.getByText('Pinned Messages').props.style as Array<
+        { color?: string } | undefined
+      >;
+      return styles.find((s) => s?.color)?.color;
+    };
+
+    it('colors the icon via stroke', () => {
+      renderItem();
+      const icon = lastIconProps();
+      expect(icon.stroke).toBeTruthy();
+    });
+
+    it('paints the icon and label differently when destructive vs standard', () => {
+      const { rerender } = renderItem({ destructive: false });
+      const standardIcon = lastIconProps().stroke;
+      const standardLabelColor = labelColor();
+
+      TestIcon.mockClear();
+      rerender(
+        <ThemeProvider theme={defaultTheme}>
+          <ChannelDetailsActionItem Icon={TestIcon} destructive label='Pinned Messages' />
+        </ThemeProvider>,
+      );
+      const destructiveIcon = lastIconProps().stroke;
+      const destructiveLabelColor = labelColor();
+
+      expect(destructiveIcon).not.toBe(standardIcon);
+      expect(destructiveLabelColor).not.toBe(standardLabelColor);
+      expect(destructiveIcon).toBe(destructiveLabelColor);
+    });
+  });
+
+  describe('accessibility', () => {
+    it('leaves the trailing slot exposed to assistive tech (hiding is the caller’s job)', () => {
+      renderItem({ testID: 'item', trailing: <Text testID='trailing'>5</Text> });
+      // The component no longer force-hides the trailing slot — a plain node stays visible to a11y.
+      expect(screen.queryByTestId('trailing')).toBeTruthy();
+    });
+  });
+});