stream-chat-react-native-core 9.4.0-beta.11 → 9.4.0-beta.13

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

@@ -1,7 +1,19 @@
 import React from 'react';
+import { Modal } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import type { SharedValue } from 'react-native-reanimated';
 
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import {
+  ChannelDetailsContextProvider,
+  type ChannelDetailsContextValue,
+} from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  type Overlay,
+  OverlayContext,
+  type OverlayContextValue,
+} from '../../../contexts/overlayContext/OverlayContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
@@ -25,8 +37,45 @@ jest.mock('../components/ChannelDetailsActionItem', () => {
   };
 });
 
-const renderSection = () =>
-  render(
+const pinnedListProbe: object[] = [];
+
+jest.mock('../components/navigation-section/PinnedMessageList', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    PinnedMessageList: (props: object) => {
+      pinnedListProbe.push(props);
+      return ReactLib.createElement(RNText, { testID: 'pinned-message-list' }, 'list');
+    },
+  };
+});
+
+jest.mock('../components/navigation-section/MediaList', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    MediaList: () => ReactLib.createElement(RNText, { testID: 'media-list' }, 'media'),
+  };
+});
+
+jest.mock('../../ImageGallery/ImageGallery', () => {
+  const ReactLib = require('react');
+  const { Text: RNText } = require('react-native');
+  return {
+    ImageGallery: () => ReactLib.createElement(RNText, { testID: 'image-gallery' }, 'gallery'),
+  };
+});
+
+const renderSection = (
+  contextValue: Partial<ChannelDetailsContextValue> = {},
+  overlay: Overlay = 'none',
+) => {
+  const overlayContextValue: OverlayContextValue = {
+    overlay,
+    overlayOpacity: { value: overlay === 'none' ? 0 : 1 } as SharedValue<number>,
+    setOverlay: jest.fn(),
+  };
+  return render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
@@ -35,14 +84,20 @@ const renderSection = () =>
           userLanguage: 'en',
         }}
       >
-        <ChannelDetailsNavigationSection />
+        <OverlayContext.Provider value={overlayContextValue}>
+          <ChannelDetailsContextProvider value={contextValue as ChannelDetailsContextValue}>
+            <ChannelDetailsNavigationSection />
+          </ChannelDetailsContextProvider>
+        </OverlayContext.Provider>
       </TranslationProvider>
     </ThemeProvider>,
   );
+};
 
 describe('ChannelDetailsNavigationSection', () => {
   beforeEach(() => {
     probeCalls.length = 0;
+    pinnedListProbe.length = 0;
   });
 
   it('renders the three navigation rows with their labels and testIDs', () => {
@@ -60,14 +115,13 @@ describe('ChannelDetailsNavigationSection', () => {
     expect(probeCalls.map((p) => p.label)).toEqual(['Pinned Messages', 'Photos & Videos', 'Files']);
   });
 
-  it('passes an Icon and a trailing chevron to every row and leaves them non-interactive', () => {
+  it('passes an Icon and a trailing chevron to every row', () => {
     renderSection();
 
     expect(probeCalls).toHaveLength(3);
     probeCalls.forEach((props) => {
       expect(props.Icon).toBeTruthy();
       expect(props.trailing).toBeTruthy();
-      expect(props.onPress).toBeUndefined();
     });
   });
 
@@ -78,4 +132,169 @@ describe('ChannelDetailsNavigationSection', () => {
     expect(first).toBe(second);
     expect(second).toBe(third);
   });
+
+  describe('without a getNavigationItems prop (default mode)', () => {
+    it('makes every row interactive', () => {
+      renderSection();
+
+      const [pinned, photos, files] = probeCalls;
+      expect(pinned.onPress).toBeDefined();
+      expect(photos.onPress).toBeDefined();
+      expect(files.onPress).toBeDefined();
+    });
+
+    it('renders a single modal that is hidden with no content until a section is selected', () => {
+      const { UNSAFE_getByType, queryByTestId } = renderSection();
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+
+    it('opens the modal with the pinned messages content when the pinned messages row is pressed', () => {
+      const { UNSAFE_getByType, getByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(getByTestId('pinned-message-list')).toBeTruthy();
+    });
+
+    it('opens an empty modal (no pinned list) for sections without a built-in screen', () => {
+      const { UNSAFE_getByType, getByTestId, queryByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+
+    it('closes the modal and clears its content when the modal requests it', () => {
+      const { UNSAFE_getByType, getByTestId, queryByTestId } = renderSection();
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+
+      act(() => {
+        UNSAFE_getByType(Modal).props.onRequestClose();
+      });
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+      expect(queryByTestId('pinned-message-list')).toBeNull();
+    });
+  });
+
+  describe('image gallery overlay', () => {
+    it('renders the gallery above the media list when the overlay is set to "gallery"', () => {
+      const { getByTestId } = renderSection({}, 'gallery');
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(getByTestId('media-list')).toBeTruthy();
+      expect(getByTestId('image-gallery')).toBeTruthy();
+    });
+
+    it('does not render the gallery while the overlay is "none"', () => {
+      const { getByTestId, queryByTestId } = renderSection({}, 'none');
+
+      fireEvent.press(getByTestId('channel-details-photos-and-videos'));
+
+      expect(getByTestId('media-list')).toBeTruthy();
+      expect(queryByTestId('image-gallery')).toBeNull();
+    });
+
+    it('does not render the gallery for non-media sections even when the overlay is "gallery"', () => {
+      const { getByTestId, queryByTestId } = renderSection({}, 'gallery');
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+      expect(queryByTestId('image-gallery')).toBeNull();
+
+      fireEvent.press(getByTestId('channel-details-files'));
+      expect(queryByTestId('image-gallery')).toBeNull();
+    });
+  });
+
+  describe('with a getNavigationItems prop', () => {
+    it('receives the built-in default items (section, label, Icon) and a context', () => {
+      const getNavigationItems = jest.fn(({ defaultItems }) => defaultItems);
+      renderSection({ getNavigationItems });
+
+      expect(getNavigationItems).toHaveBeenCalledWith(
+        expect.objectContaining({
+          context: expect.objectContaining({ t: expect.any(Function) }),
+          defaultItems: [
+            expect.objectContaining({
+              Icon: expect.any(Function),
+              label: 'Pinned Messages',
+              section: 'pinned-messages',
+            }),
+            expect.objectContaining({ label: 'Photos & Videos', section: 'photos-and-videos' }),
+            expect.objectContaining({ label: 'Files', section: 'files' }),
+          ],
+        }),
+      );
+      // Default items carry no onPress; the section component supplies the open-modal behavior.
+      const { defaultItems } = getNavigationItems.mock.calls[0][0];
+      expect(
+        defaultItems.every((item: { onPress?: () => void }) => item.onPress === undefined),
+      ).toBe(true);
+    });
+
+    it('renders exactly the items the customizer returns', () => {
+      const getNavigationItems = ({ defaultItems }: { defaultItems: { section: string }[] }) =>
+        defaultItems.filter((item) => item.section === 'pinned-messages');
+      const { getByTestId, queryByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      expect(getByTestId('channel-details-pinned-messages')).toBeTruthy();
+      expect(queryByTestId('channel-details-photos-and-videos')).toBeNull();
+      expect(queryByTestId('channel-details-files')).toBeNull();
+    });
+
+    it('runs a custom onPress instead of opening the built-in modal', () => {
+      const customOnPress = jest.fn();
+      const getNavigationItems = ({ defaultItems }: { defaultItems: { onPress: () => void }[] }) =>
+        defaultItems.map((item) => ({ ...item, onPress: customOnPress }));
+      const { UNSAFE_getByType, getByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(customOnPress).toHaveBeenCalledTimes(1);
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+    });
+
+    it('still opens the built-in modal when a row keeps its default onPress', () => {
+      const getNavigationItems = ({ defaultItems }: { defaultItems: unknown[] }) => defaultItems;
+      const { UNSAFE_getByType, getByTestId } = renderSection({
+        getNavigationItems: getNavigationItems as never,
+      });
+
+      fireEvent.press(getByTestId('channel-details-pinned-messages'));
+
+      expect(UNSAFE_getByType(Modal).props.visible).toBe(true);
+      expect(getByTestId('pinned-message-list')).toBeTruthy();
+    });
+
+    it('renders consumer-added rows with custom section identifiers', () => {
+      const customOnPress = jest.fn();
+      const getNavigationItems = ({ defaultItems }: { defaultItems: unknown[] }) => [
+        ...defaultItems,
+        {
+          Icon: () => null,
+          label: 'My Custom Row',
+          onPress: customOnPress,
+          section: 'my-custom-section',
+        },
+      ];
+      const { getByTestId } = renderSection({ getNavigationItems: getNavigationItems as never });
+
+      const customRow = getByTestId('channel-details-my-custom-section');
+      expect(customRow).toBeTruthy();
+
+      fireEvent.press(customRow);
+      expect(customOnPress).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -0,0 +1,159 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+
+import type { Attachment, MessageResponse } from 'stream-chat';
+
+import {
+  TranslationProvider,
+  type TranslationContextValue,
+} from '../../../contexts/translationContext/TranslationContext';
+import {
+  generateAudioAttachment,
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
+import { useFileAttachmentListSections } from '../hooks/useFileAttachmentListSections';
+
+let translators: TranslationContextValue;
+
+beforeAll(async () => {
+  const i18nInstance = new Streami18n();
+  translators = (await i18nInstance.getTranslators()) as unknown as TranslationContextValue;
+});
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <TranslationProvider value={translators}>{children}</TranslationProvider>
+);
+
+const messageAt = (
+  id: string,
+  createdAt: string,
+  attachments: Attachment[] = [generateFileAttachment()],
+): MessageResponse =>
+  generateMessage({
+    attachments: attachments as never,
+    created_at: new Date(createdAt),
+    id,
+  }) as unknown as MessageResponse;
+
+describe('useFileAttachmentListSections', () => {
+  it('returns an empty array when there are no messages', () => {
+    const { result } = renderHook(() => useFileAttachmentListSections(undefined), { wrapper });
+    expect(result.current).toEqual([]);
+
+    const { result: emptyResult } = renderHook(() => useFileAttachmentListSections([]), {
+      wrapper,
+    });
+    expect(emptyResult.current).toEqual([]);
+  });
+
+  it('gathers only file and audio attachments, skipping images', () => {
+    const message = messageAt('m-1', '2026-03-15T00:00:00.000Z', [
+      generateFileAttachment({ title: 'a-file.pdf' }),
+      generateImageAttachment({ title: 'a-photo.png' }),
+      generateAudioAttachment({ title: 'a-clip.mp3' }),
+    ]);
+
+    const { result } = renderHook(() => useFileAttachmentListSections([message]), { wrapper });
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].data.map((tile) => tile.attachment.title)).toEqual([
+      'a-file.pdf',
+      'a-clip.mp3',
+    ]);
+    expect(result.current[0].data.every((tile) => tile.message === message)).toBe(true);
+  });
+
+  it('skips OG/scraped link-preview attachments', () => {
+    const message = messageAt('m-og', '2026-03-15T00:00:00.000Z', [
+      generateFileAttachment({ title: 'a-file.pdf' }),
+      generateFileAttachment({
+        og_scrape_url: 'https://example.com',
+        title: 'link-preview',
+        title_link: 'https://example.com',
+      }),
+    ]);
+
+    const { result } = renderHook(() => useFileAttachmentListSections([message]), { wrapper });
+
+    expect(result.current[0].data.map((tile) => tile.attachment.title)).toEqual(['a-file.pdf']);
+  });
+
+  it('produces no section for a message without file or audio attachments', () => {
+    const message = messageAt('m-1', '2026-03-15T00:00:00.000Z', [generateImageAttachment()]);
+
+    const { result } = renderHook(() => useFileAttachmentListSections([message]), { wrapper });
+
+    expect(result.current).toEqual([]);
+  });
+
+  it('groups messages into month sections in newest-first order', () => {
+    const february = messageAt('m-feb', '2026-02-10T00:00:00.000Z');
+    const march = messageAt('m-mar', '2026-03-15T00:00:00.000Z');
+
+    // The search source returns messages newest-first; the hook only groups consecutive months.
+    const { result } = renderHook(() => useFileAttachmentListSections([march, february]), {
+      wrapper,
+    });
+
+    expect(result.current.map((section) => section.title)).toEqual(['March 2026', 'February 2026']);
+    expect(result.current[0].data.map((tile) => tile.message.id)).toEqual(['m-mar']);
+    expect(result.current[1].data.map((tile) => tile.message.id)).toEqual(['m-feb']);
+  });
+
+  it('keeps attachments from the same month under a single section', () => {
+    const early = messageAt('m-1', '2026-03-02T00:00:00.000Z');
+    const late = messageAt('m-2', '2026-03-28T00:00:00.000Z');
+
+    // Provided newest-first, as the search source returns them.
+    const { result } = renderHook(() => useFileAttachmentListSections([late, early]), { wrapper });
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].title).toBe('March 2026');
+    expect(result.current[0].data.map((tile) => tile.message.id)).toEqual(['m-2', 'm-1']);
+  });
+
+  it('emits one tile per file attachment within a message', () => {
+    const message = messageAt('m-1', '2026-03-15T00:00:00.000Z', [
+      generateFileAttachment({ title: 'one.pdf' }),
+      generateFileAttachment({ title: 'two.pdf' }),
+    ]);
+
+    const { result } = renderHook(() => useFileAttachmentListSections([message]), { wrapper });
+
+    expect(result.current[0].data.map((tile) => tile.attachment.title)).toEqual([
+      'one.pdf',
+      'two.pdf',
+    ]);
+  });
+
+  it('formats the section title via the timestamp/FileAttachmentListSection translation key', () => {
+    const customTranslators = {
+      t: jest.fn((key: string) =>
+        key === 'timestamp/FileAttachmentListSection' ? 'CUSTOM TITLE' : key,
+      ),
+      tDateTimeParser: translators.tDateTimeParser,
+      userLanguage: 'en',
+    } as unknown as TranslationContextValue;
+
+    const customWrapper = ({ children }: PropsWithChildren) => (
+      <TranslationProvider value={customTranslators}>{children}</TranslationProvider>
+    );
+
+    const { result } = renderHook(
+      () => useFileAttachmentListSections([messageAt('m-1', '2026-03-15T00:00:00.000Z')]),
+      { wrapper: customWrapper },
+    );
+
+    expect(result.current[0].title).toBe('CUSTOM TITLE');
+    // The MMMM YYYY format lives in the translation string itself, so the hook only forwards
+    // the timestamp to `t` — it does not pass a `format` option.
+    expect(customTranslators.t).toHaveBeenCalledWith(
+      'timestamp/FileAttachmentListSection',
+      expect.objectContaining({ timestamp: expect.any(Date) }),
+    );
+  });
+});

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

@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react-native';
+
+import type { MessageResponse } from 'stream-chat';
+
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { useMediaList } from '../hooks/useMediaList';
+
+const messageWithAttachments = (id: string, attachments: unknown[]): MessageResponse =>
+  generateMessage({ attachments: attachments as never, id }) as unknown as MessageResponse;
+
+describe('useMediaList', () => {
+  it('returns an empty array when there are no messages', () => {
+    const { result } = renderHook(() => useMediaList(undefined));
+    expect(result.current).toEqual([]);
+
+    const { result: emptyResult } = renderHook(() => useMediaList([]));
+    expect(emptyResult.current).toEqual([]);
+  });
+
+  it('returns one tile per image/video attachment and skips non-media and scraped attachments', () => {
+    const messageA = messageWithAttachments('m-1', [
+      generateImageAttachment(),
+      generateVideoAttachment(),
+    ]);
+    const messageB = messageWithAttachments('m-2', [
+      // excluded: image used as a link preview / og scrape
+      generateImageAttachment({ og_scrape_url: 'https://example.com' }),
+      generateImageAttachment({ title_link: 'https://example.com' }),
+      // excluded: not media
+      { type: 'file' },
+      // included
+      generateImageAttachment(),
+    ]);
+
+    const { result } = renderHook(() => useMediaList([messageA, messageB]));
+
+    expect(result.current.map((tile) => `${tile.message.id}-${tile.attachment.type}`)).toEqual([
+      'm-1-image',
+      'm-1-video',
+      'm-2-image',
+    ]);
+  });
+
+  it('skips messages without attachments', () => {
+    const message = generateMessage({ id: 'm-1' }) as unknown as MessageResponse;
+    const { result } = renderHook(() => useMediaList([message]));
+    expect(result.current).toEqual([]);
+  });
+});

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

@@ -77,7 +77,12 @@ export const ChannelDetailsActionItem = ({
       onPress={onPress}
       style={({ pressed }) => [
         styles.row,
-        pressed ? { backgroundColor: semantics.backgroundUtilityPressed } : null,
+        pressed
+          ? {
+              backgroundColor: semantics.backgroundUtilityPressed,
+              borderRadius: primitives.radiusLg,
+            }
+          : null,
       ]}
       testID={testID}
     >

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

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from 'react';
+
+import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
+import { Button } from '../../ui/Button/Button';
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetailsEditButton = () => {
+  const { channel, onEditChannelPress } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
+  const isDirect = useIsDirectChat(channel);
+  const [editModalVisible, setEditModalVisible] = useState(false);
+
+  const handleEditPress = useCallback(() => {
+    if (onEditChannelPress) {
+      onEditChannelPress();
+      return;
+    }
+    setEditModalVisible(true);
+  }, [onEditChannelPress]);
+
+  const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
+
+  if (!canUpdateChannel || isDirect) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        accessibilityLabelKey='a11y/Edit channel'
+        label={t('Edit')}
+        onPress={handleEditPress}
+        size='sm'
+        testID='channel-details-edit-button'
+        type='outline'
+        variant='secondary'
+      />
+      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+    </>
+  );
+};

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

@@ -1,20 +1,19 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
-
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
 import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
 import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui/Button/Button';
 
 export type ChannelDetailsNavHeaderProps = {
+  /** Content rendered on the trailing side of the header (e.g. the edit button). */
+  action?: React.ReactNode;
   /** Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). */
   title?: string;
 };
@@ -22,11 +21,9 @@ export type ChannelDetailsNavHeaderProps = {
 /**
  * @experimental This component is experimental and is subject to change.
  */
-export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps) => {
-  const { channel, onBack, onEditChannelPress } = useChannelDetailsContext();
+export const ChannelDetailsNavHeader = ({ action, title }: ChannelDetailsNavHeaderProps) => {
+  const { channel, onBack } = useChannelDetailsContext();
   const { t } = useTranslationContext();
-  const ownCapabilities = useChannelOwnCapabilities(channel);
-  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
   const {
     theme: {
       channelDetails: {
@@ -37,20 +34,9 @@ export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps)
   } = useTheme();
   const isDirect = useIsDirectChat(channel);
   const styles = useStyles();
-  const [editModalVisible, setEditModalVisible] = useState(false);
 
   const resolvedTitle = title ?? (isDirect ? t('Contact Info') : t('Group Info'));
 
-  const handleEditPress = useCallback(() => {
-    if (onEditChannelPress) {
-      onEditChannelPress();
-      return;
-    }
-    setEditModalVisible(true);
-  }, [onEditChannelPress]);
-
-  const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
-
   return (
     <View
       style={[
@@ -83,20 +69,7 @@ export const ChannelDetailsNavHeader = ({ title }: ChannelDetailsNavHeaderProps)
           {resolvedTitle}
         </Text>
       </View>
-      <View style={[styles.sideContainer, styles.sideContainerRight]}>
-        {canUpdateChannel && !isDirect ? (
-          <Button
-            accessibilityLabelKey='a11y/Edit channel'
-            label={t('Edit')}
-            onPress={handleEditPress}
-            size='sm'
-            testID='channel-details-edit-button'
-            type='outline'
-            variant='secondary'
-          />
-        ) : null}
-      </View>
-      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+      <View style={[styles.sideContainer, styles.sideContainerRight]}>{action ?? null}</View>
     </View>
   );
 };