useChannelDetailsNavigationItems

A hook that builds the navigation rows rendered by the navigation section of ChannelDetails — the entry points to the PinnedMessageList, MediaList and FileAttachmentList. It returns the items as a plain array; the section component owns the built-in modal and supplies the default open-modal behavior for any row without a custom onPress.

Best Practices

• Customize rows by passing getNavigationItems, mapping over defaultItems to set a row's onPress (e.g. to push your own screen) or to add/remove rows.
• Leave a row's onPress unset to keep its built-in modal behavior — including sections added in future SDK versions.
• Use the already-translated label on defaultItems instead of re-translating section names.
• Keep your getNavigationItems reference stable (memoize it) to avoid unnecessary recomputation.
• Identify rows by section rather than by index, since the order can change.

Parameters

The hook accepts a single options object.

The GetChannelDetailsNavigationItems callback receives:

Return type

Returns an array of ChannelDetailsNavigationItem, each describing one row.

Icon

Icon rendered at the start of the row and reused in the built-in modal header.

label

Already-translated label rendered for the row and its built-in modal header.

section

Identifies which section the row represents. The built-in sections are pinned-messages, photos-and-videos and files; custom rows can use any string.

onPress

Fired when the user taps the row. Leave unset to keep the built-in modal behavior; set it to route the row elsewhere.

Example usage

import {
  ChannelDetails,
  GetChannelDetailsNavigationItems,
} from "stream-chat-react-native";

const getNavigationItems: GetChannelDetailsNavigationItems = ({
  defaultItems,
}) =>
  defaultItems.map((item) =>
    item.section === "files"
      ? { ...item, onPress: () => navigation.navigate("ChannelFiles") }
      : item,
  );

const ChannelDetailsScreen = () => (
  <ChannelDetails getNavigationItems={getNavigationItems} />
);