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

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

@@ -9,9 +9,9 @@ import { useCanEditChannel } from '../../../hooks/useCanEditChannel';
 import { Button, ButtonProps } from '../../ui/Button/Button';
 
 export type ChannelDetailsEditButtonProps = {
-  /** Override the default behavior, which opens the Edit modal. */
+  /** Overrides the default behavior, which opens the edit modal. */
   onPress?: () => void;
-  /** Style forwarded to the underlying Button. */
+  /** Style forwarded to the underlying `Button`. */
   style?: ButtonProps['style'];
 };
 
@@ -25,9 +25,8 @@ export const ChannelDetailsEditButton = ({
   const isVisible = useCanEditChannel(channel);
   const [editModalVisible, setEditModalVisible] = useState(false);
 
-  // The built-in modal is only used by the default press behavior. When a custom handler
-  // (onPress prop) is provided, the consumer owns the navigation/modal, so we must not render
-  // the built-in one.
+  // With a custom `onPress` the consumer owns the navigation or modal, so the built-in modal is
+  // not rendered.
   const usesDefaultModal = !onPress;
 
   const handleEditPress = useCallback(() => {

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

@@ -14,9 +14,7 @@ import { primitives } from '../../../theme';
 import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembersPreview';
 
 export type ChannelDetailsMemberSectionProps = {
-  /**
-   * Fired when the user taps the "view all members" button. By default it opens the members bottom sheet.
-   */
+  /** Fired when the "view all members" button is pressed. Opens the built-in modal when unset. */
   onViewAllMembersPress?: () => void;
 };
 

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

@@ -12,11 +12,11 @@ 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). */
+  /** Content on the trailing side of the header, such as the edit button. */
   action?: React.ReactNode;
   /** Fired when the back button is pressed. The back button only renders when provided. */
   onBack?: () => void;
-  /** Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). */
+  /** Overrides the default title ("Contact Info" for direct chats, "Group Info" for groups). */
   title?: string;
 };
 

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

@@ -18,12 +18,9 @@ import {
 
 export type ChannelDetailsNavigationSectionProps = {
   /**
-   * Customize the navigation rows rendered in the channel details navigation section.
-   *
-   * Receives the built-in `defaultItems` (and a `context`) and returns the rows to render.
-   * Map over `defaultItems` to override a row's `onPress` (e.g. to push your own screen) or
-   * to add/remove rows. Any row whose `onPress` you leave untouched keeps its built-in
-   * behavior (opening the built-in modal), including sections added in future SDK versions.
+   * Receives the built-in `defaultItems` (and a `context`) and returns the rows to render. Override
+   * a row's `onPress` to push your own screen, or add and remove rows. A row whose `onPress` is
+   * untouched keeps opening the built-in modal.
    */
   getNavigationItems?: GetChannelDetailsNavigationItems;
 };

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

@@ -7,21 +7,17 @@ import type { GlobalFileUploadRequest } from '../../../types/types';
 import { NotificationList } from '../../Notifications/NotificationList';
 
 export type ChannelEditDetailsFormProps = {
-  /** Called when the form is dismissed via the close button or after a successful save. */
+  /** Called when the form is dismissed with the close button or after a successful save. */
   onClose: () => void;
-  /**
-   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
-   * to the channel image picked during editing.
-   */
+  /** Compression quality, from 0 to 1 (best), applied to the channel image picked while editing. */
   compressImageQuality?: number;
-  /** Override the upload request used to upload the channel image. */
+  /** Overrides the request that uploads the channel image. */
   doFileUploadRequest?: GlobalFileUploadRequest;
 };
 
 /**
- * Renders the channel edit details form: a header with a confirm action, the
- * editable fields, and the notification list. Wrap-free — mount it wherever the
- * edit UI should appear (e.g. inside a modal or a navigation screen).
+ * The channel edit form: a header with a confirm action, the editable fields and the notification
+ * list. Mount it wherever the edit UI should appear, such as a modal or a screen.
  */
 export const ChannelEditDetailsForm = ({
   compressImageQuality,

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

@@ -65,7 +65,8 @@ export const ChannelEditDetailsFormContent = () => {
     })();
   }, [pendingAction, pickImageFromNativePicker, sheetVisible, store, takePhoto]);
 
-  // `undefined` = untouched (show live channel image), `File` = picked uri, `null` = reset.
+  // `undefined` is untouched (shows the live channel image), a `File` is the picked image and
+  // `null` is a reset.
   const isPreview = updatedImage !== undefined;
   const previewUri = updatedImage ? updatedImage.uri : null;
 

package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx

@@ -17,7 +17,7 @@ const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number
 );
 
 export type ChannelEditDetailsFormHeaderProps = {
-  /** Called when the form is dismissed via the close button or after a successful save. */
+  /** Called when the form is dismissed with the close button or after a successful save. */
   onClose: () => void;
 };
 
@@ -37,7 +37,7 @@ export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsForm
       await submit();
       onClose();
     } catch {
-      // failure notification already surfaced by the channel action
+      // The channel action already surfaces a failure notification.
     } finally {
       setSaving(false);
     }

package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx

@@ -8,9 +8,9 @@ import { Button, ButtonProps } from '../../../ui/Button/Button';
 import { ChannelDetailsModal } from '../modal/Modal';
 
 export type ChannelAddMembersButtonProps = {
-  /** Override the default behavior, which opens the Add-members modal. */
+  /** Overrides the default behavior, which opens the add-members modal. */
   onPress?: () => void;
-  /** Style forwarded to the underlying Button. */
+  /** Style forwarded to the underlying `Button`. */
   style?: ButtonProps['style'];
   testID?: string;
   variant?: 'icon' | 'text';
@@ -28,8 +28,7 @@ export const ChannelAddMembersButton = ({
   const isVisible = useCanAddMembersToChannel(channel);
   const [isAddMembersVisible, setAddMembersVisible] = useState(false);
 
-  // The built-in modal is only used by the default press behavior. When a custom handler
-  // (onPress prop) is provided, the consumer owns the modal, so we must not render the built-in one.
+  // With a custom `onPress` the consumer owns the modal, so the built-in one is not rendered.
   const usesDefaultModal = !onPress;
 
   const handlePress = useCallback(() => {

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

@@ -8,20 +8,15 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { NotificationList } from '../../../Notifications/NotificationList';
 
 export type ChannelAddMembersFormProps = {
-  /** Called when the form is dismissed via the close button or after members are added. */
+  /** Called when the form is dismissed with the close button or after members are added. */
   onClose: () => void;
-  /**
-   * A custom `UserSearchSource` used to query and paginate the users to add.
-   * Overrides the source the provider creates by default (pre-configured to
-   * autocomplete by `name`).
-   */
+  /** Overrides the default `UserSearchSource`, which autocompletes users by `name`. */
   searchSource?: UserSearchSource;
 };
 
 /**
- * Renders the add-members form: a header with a confirm action, the user search
- * list, and the notification list. Mount it wherever the add-members UI should
- * appear (e.g. inside a modal or a navigation screen).
+ * The add-members form: a header with a confirm action, the user search list and the notification
+ * list. Mount it wherever the add-members UI should appear, such as a modal or a screen.
  */
 export const ChannelAddMembersForm = ({ onClose, searchSource }: ChannelAddMembersFormProps) => {
   const { channel } = useChannelDetailsContext();

package/src/components/ChannelDetails/components/members/ChannelAddMembersFormContent.tsx

@@ -18,12 +18,7 @@ import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
 import { SearchInput } from '../../../UIComponents/SearchInput';
 
 export type ChannelAddMembersFormContentProps = {
-  /**
-   * Besides the existing default behavior of the user list, you can attach
-   * additional props to the underlying React Native FlatList.
-   *
-   * See https://reactnative.dev/docs/flatlist#props for the full list.
-   */
+  /** Additional props passed to the underlying `FlatList`. */
   additionalFlatListProps?: Partial<FlatListProps<UserResponse>>;
 };
 
@@ -93,7 +88,7 @@ export const ChannelAddMembersFormContent = ({
   );
 
   const loadMore = useCallback(() => {
-    // hasNext true by default, !!users prevents calling search on initial load
+    // `hasNext` starts true, so `users` is checked to avoid searching on the initial load.
     if (hasNext && !!users) {
       searchSource.search();
     }

package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx

@@ -17,7 +17,7 @@ const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number
 );
 
 export type ChannelAddMembersFormHeaderProps = {
-  /** Called when the form is dismissed via the close button or after members are added. */
+  /** Called when the form is dismissed with the close button or after members are added. */
   onClose: () => void;
 };
 
@@ -46,7 +46,7 @@ export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHe
       await submit();
       onClose();
     } catch {
-      // failure notification already surfaced by the channel action
+      // The channel action already surfaces a failure notification.
     } finally {
       setAddingMembers(false);
     }

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

@@ -19,11 +19,8 @@ export type ChannelMemberActionsSheetProps = {
   onClose: () => void;
   visible: boolean;
   /**
-   * Customize the list of action items rendered in the per-member actions bottom sheet.
-   *
-   * 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.
+   * Receives the default action items for the tapped member (such as `muteUser` and `block`) and
+   * returns the list to render, to filter, reorder, replace or add items.
    */
   getChannelMemberActionItems?: GetChannelMemberActionItems;
 };

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

@@ -19,17 +19,15 @@ export type ChannelMemberItemSize = 'sm' | 'lg';
 export type ChannelMemberItemProps = {
   member: ChannelMemberResponse;
   /**
-   * Override the roles shown next to the member. Receives `{ channel, defaultRoleLabels, member, t }`
-   * and returns an array of `{ key, label }` (or an empty array to render none). Defaults to the
-   * built-in Owner / Admin / Moderator logic, returning every role that applies.
+   * Overrides the roles shown next to the member. Receives
+   * `{ channel, defaultRoleLabels, member, t }` and returns `{ key, label }` roles, or an empty
+   * array for none. Defaults to the Owner, Admin and Moderator roles that apply.
    */
   getMemberRoles?: GetMemberRoles;
   onPress?: (member: ChannelMemberResponse) => void;
   /**
-   * Visual size of the row.
-   * - `'sm'` (default) renders the compact list row with a small avatar, regular-weight name, and a trailing role label.
-   * - `'lg'` renders a profile-style header with a larger avatar, semibold name, larger status, and no role label.
-   *   Useful for sheet / modal headers (e.g. the per-member actions bottom sheet).
+   * Size of the row. `'sm'` is the compact list row with a trailing role label. `'lg'` is a
+   * profile-style header with a larger avatar and no role label. Defaults to `'sm'`.
    */
   size?: ChannelMemberItemSize;
   testID?: string;
@@ -62,7 +60,7 @@ export const ChannelMemberItem = ({
   if (!user) return null;
 
   const isLarge = size === 'lg';
-  const isCurrentUser = !!client?.userID && user.id === client.userID;
+  const isCurrentUser = !!client?.userId && user.id === client.userId;
   const displayName = isCurrentUser ? t('common.you.label', 'You') : (user.name ?? user.id);
   const accessibilityLabel = composeAccessibilityLabel(
     displayName,

package/src/components/ChannelDetails/components/members/ChannelMemberList.tsx

@@ -38,19 +38,10 @@ const listStateSelector = (state: SearchSourceState<ChannelMemberResponse>) => (
 });
 
 export type ChannelMemberListProps = {
-  /**
-   * Besides the existing default behavior of the members list, you can attach
-   * additional props to the underlying React Native FlatList.
-   *
-   * See https://reactnative.dev/docs/flatlist#props for the full list.
-   */
+  /** Additional props passed to the underlying `FlatList`. */
   additionalFlatListProps?: Partial<FlatListProps<ChannelMemberResponse>>;
   searchInputProps?: SearchInputProps;
-  /**
-   * A custom `ChannelMemberSearchSource` used to query and paginate the member
-   * list. Overrides the source the provider creates by default (pre-configured
-   * to autocomplete by `name`).
-   */
+  /** Overrides the default `ChannelMemberSearchSource`, which autocompletes by `name`. */
   searchSource?: ChannelMemberSearchSource;
 };
 
@@ -78,8 +69,7 @@ const ChannelMemberListContent = ({
 
   const memberCount = useChannelMemberCount(channel);
 
-  // Fetch members on mount and when the member count changes
-  // Member count changes used when add member modal is opened above member list modal
+  // Refetches when the member count changes, as when the add-members modal opens over this list.
   useEffect(() => {
     if (!searchSource.state.getLatestValue().searchQuery) {
       searchSource.resetStateAndActivate();
@@ -117,7 +107,7 @@ const ChannelMemberListContent = ({
   );
 
   const loadMore = useCallback(() => {
-    // hasNext is true by default, !!members prevents calling search on initial load
+    // `hasNext` starts true, so `members` is checked to avoid searching on the initial load.
     if (hasNext && !!members) {
       searchSource.search();
     }
@@ -175,9 +165,7 @@ const ChannelMemberListContent = ({
   );
 };
 
-/**
- * Lists all channel members with the ability to search them.
- */
+/** Searchable list of the channel's members. */
 export const ChannelMemberList = ({ searchSource, ...props }: ChannelMemberListProps = {}) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentItem.tsx

@@ -9,8 +9,7 @@ import { FilePreview } from '../../../Attachment/FilePreview';
 import { openUrlSafely } from '../../../Attachment/utils/openUrlSafely';
 
 /**
- * The shape passed to `FileAttachmentItem`'s `onPress` callback, identifying the rendered
- * attachment and the message it belongs to.
+ * Passed to the `onPress` callback of `FileAttachmentItem`: the attachment and its message.
  */
 export type FileAttachmentItemPressParams = {
   attachment: Attachment;
@@ -18,14 +17,11 @@ export type FileAttachmentItemPressParams = {
 };
 
 export type FileAttachmentItemProps = {
-  /** The file/audio attachment to render. */
+  /** The file or audio attachment to render. */
   attachment: Attachment;
   /** The message the attachment belongs to. */
   message: MessageResponse;
-  /**
-   * Fired with the pressed attachment and its message. When provided, this overrides the default
-   * behavior of opening the attachment's `asset_url`.
-   */
+  /** Overrides the default behavior of opening the attachment's `asset_url`. */
   onPress?: (params: FileAttachmentItemPressParams) => void;
 };
 
@@ -72,7 +68,7 @@ const useStyles = () => {
           paddingVertical: primitives.spacingXs,
         },
       }),
-      // FilePreview's default container has a hardcoded width; stretch it to the row width.
+      // The default `FilePreview` container has a fixed width, so stretch it to the row.
       filePreview: StyleSheet.create({
         container: { width: '100%' },
         title: {

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx

@@ -34,18 +34,9 @@ import {
 } from '../../hooks/useFileAttachmentListSections';
 
 export type FileAttachmentListProps = {
-  /**
-   * Besides the existing default behavior of the file attachment list, you can attach
-   * additional props to the underlying React Native SectionList.
-   *
-   * See https://reactnative.dev/docs/sectionlist#props for the full list.
-   */
+  /** Additional props passed to the underlying `SectionList`. */
   additionalSectionListProps?: Partial<SectionListProps<FileAttachmentTile, FileAttachmentSection>>;
-  /**
-   * A custom `MessageSearchSource` used to query and paginate the file/audio
-   * attachments. Overrides the source the provider creates by default
-   * (pre-configured to fetch file/audio attachments, newest first).
-   */
+  /** Overrides the default `MessageSearchSource` (file and audio attachments, newest first). */
   searchSource?: MessageSearchSource;
 };
 
@@ -129,7 +120,7 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
   );
 
   const loadMore = useCallback(() => {
-    // hasNext is true by default, !!messages prevents calling search on initial load
+    // `hasNext` starts true, so `messages` is checked to avoid searching on the initial load.
     if (hasNext && !!messages) {
       searchSource.search();
     }

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentListSectionHeader.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 
 export type FileAttachmentListSectionHeaderProps = {
-  /** The already-formatted section title (e.g. "March 2026"). */
+  /** The formatted section title, such as "March 2026". */
   title: string;
 };
 

package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx

@@ -15,9 +15,8 @@ import { getDurationLabelFromDuration } from '../../../../utils/utils';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
 
 /**
- * The shape passed to `MediaItem`'s `onPress` callback, identifying the rendered attachment, the
- * message it belongs to, and the tile's native node handle (used as the open-animation origin when
- * launching the fullscreen image gallery).
+ * Passed to the `onPress` callback of `MediaItem`: the attachment, its message, and the tile's
+ * native node handle, which is the open-animation origin of the image gallery.
  */
 export type MediaItemPressParams = {
   attachment: Attachment;
@@ -26,16 +25,13 @@ export type MediaItemPressParams = {
 };
 
 export type MediaItemProps = {
-  /** The image/video attachment rendered by this tile. */
+  /** The image or video attachment rendered by this tile. */
   attachment: Attachment;
   /** The message the attachment belongs to. */
   message: MessageResponse;
   /** Side length of the square tile, in points. */
   size: number;
-  /**
-   * Fired with the tile's attachment and message when the tile is pressed. The media list passes
-   * its gallery-opening handler here via `renderItem`.
-   */
+  /** Fired when the tile is pressed. */
   onPress?: (params: MediaItemPressParams) => void;
 };
 

package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx

@@ -36,18 +36,9 @@ import { EmptyList } from '../../../UIComponents/EmptyList';
 import { type MediaTile, useMediaList } from '../../hooks/useMediaList';
 
 export type MediaListProps = {
-  /**
-   * Besides the existing default behavior of the media list, you can attach additional props to
-   * the underlying React Native FlatList.
-   *
-   * See https://reactnative.dev/docs/flatlist#props for the full list.
-   */
+  /** Additional props passed to the underlying `FlatList`. */
   additionalFlatListProps?: Partial<FlatListProps<MediaTile>>;
-  /**
-   * A custom `MessageSearchSource` used to query and paginate the media grid.
-   * Overrides the source the provider creates by default (pre-configured to
-   * fetch image/video attachments, newest first).
-   */
+  /** Overrides the default `MessageSearchSource` (image and video attachments, newest first). */
   searchSource?: MessageSearchSource;
 };
 
@@ -127,9 +118,8 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
     [width],
   );
 
-  // Opens the fullscreen gallery over the whole loaded collection, selecting the tapped attachment.
-  // Mirrors the in-message gallery (`components/Attachment/Gallery.tsx`), but passes every loaded
-  // message so the viewer can swipe across all media in the list rather than a single message.
+  // Opens the gallery over every loaded message, so the viewer can swipe across all the media in
+  // the list, with the tapped attachment selected.
   const handlePressItem = useCallback(
     ({ attachment, requesterNode }: MediaItemPressParams) => {
       const url = getUrlOfImageAttachment(attachment);
@@ -137,7 +127,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
         return;
       }
       if (attachment.type === FileTypes.Video && !isVideoPlayerAvailable()) {
-        // Safeguard for customizations that render videos without a player installed.
+        // Without a video player (possible with customizations), fall back to opening the URL.
         openUrlSafely(url);
         return;
       }
@@ -164,7 +154,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
   );
 
   const loadMore = useCallback(() => {
-    // hasNext is true by default, !!messages prevents calling search on initial load
+    // `hasNext` starts true, so `messages` is checked to avoid searching on the initial load.
     if (hasNext && !!messages) {
       searchSource.search();
     }

package/src/components/ChannelDetails/components/navigation-section/MediaListLoadingSkeleton.tsx

@@ -11,14 +11,12 @@ const NUMBER_OF_ROWS = 6;
 const GRID_GAP = primitives.spacingXxxs;
 const ANIMATION_TIME = 1000;
 
-/**
- * Grid of shimmering placeholder tiles shown while the media list is loading.
- */
+/** Grid of shimmering placeholder tiles shown while the media list loads. */
 export const MediaListLoadingSkeleton = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  // Same derivation as `MediaList`, so the skeleton's tiles match the grid that replaces it.
+  // Derived like in `MediaList`, so the tiles match the loaded grid.
   const width = useWindowContentWidth();
   const styles = useStyles();
 

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx

@@ -24,19 +24,10 @@ import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
 import { SearchInput, SearchInputProps } from '../../../UIComponents/SearchInput';
 
 export type PinnedMessageListProps = {
-  /**
-   * Besides the existing default behavior of the pinned message list, you can attach
-   * additional props to the underlying React Native FlatList.
-   *
-   * See https://reactnative.dev/docs/flatlist#props for the full list.
-   */
+  /** Additional props passed to the underlying `FlatList`. */
   additionalFlatListProps?: Partial<FlatListProps<MessageResponse>>;
   searchInputProps?: SearchInputProps;
-  /**
-   * A custom `MessageSearchSource` used to query and paginate the pinned
-   * messages. Overrides the source the provider creates by default
-   * (pre-configured to fetch pinned messages and search by `text`).
-   */
+  /** Overrides the default `MessageSearchSource` (pinned messages, searched by `text`). */
   searchSource?: MessageSearchSource;
 };
 
@@ -109,7 +100,7 @@ const PinnedMessageListContent = ({
   );
 
   const loadMore = useCallback(() => {
-    // hasNext is true by default, !!messages prevents calling search on initial load
+    // `hasNext` starts true, so `messages` is checked to avoid searching on the initial load.
     if (hasNext && !!messages) {
       searchSource.search();
     }

package/src/components/ChannelDetails/components/roles/RoleItem.tsx

@@ -8,15 +8,15 @@ import type { RoleLabel } from '../../hooks/members/useMemberRoles';
 
 export type RoleItemProps = {
   role: RoleLabel;
-  /** Style applied to the badge label, layered over the theme override. */
+  /** Style of the badge label, applied after the theme override. */
   textStyle?: StyleProp<TextStyle>;
-  /** Style applied to the badge container, layered over the theme override. */
+  /** Style of the badge container, applied after the theme override. */
   viewStyle?: StyleProp<ViewStyle>;
 };
 
 /**
- * Renders a single role badge (pill) next to a member row. `owner` roles use the accent
- * (blue) palette; every other role uses the neutral (grey) palette.
+ * A role badge shown next to a member row. The `owner` role uses the accent palette and every other
+ * role the neutral one.
  */
 export const RoleItem = ({ role, textStyle, viewStyle }: RoleItemProps) => {
   const {

package/src/components/ChannelDetails/components/roles/RoleList.tsx

@@ -11,8 +11,8 @@ export type RoleListProps = {
 };
 
 /**
- * Renders the horizontal list of role badges shown next to a member row. Each badge is
- * rendered by the overridable `RoleItem` component. Returns `null` when there are no roles.
+ * The role badges shown next to a member row, each rendered by `RoleItem`. Renders nothing without
+ * roles.
  */
 export const RoleList = ({ roles }: RoleListProps) => {
   const { RoleItem } = useComponentsContext();

package/src/components/ChannelDetails/hooks/members/useMemberRoles.ts

@@ -5,10 +5,8 @@ import type { TranslationContextValue } from '../../../../contexts/translationCo
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 
 /**
- * A single role shown next to a member row.
- *
- * - `key` is the raw role identifier (`'owner'`, `'admin'`, `'moderator'`, …).
- * - `label` is the translated, user-facing text.
+ * A role shown next to a member row. `key` is the role identifier (`'owner'`, `'admin'`,
+ * `'moderator'`, ...) and `label` the translated text.
  */
 export type RoleLabel = {
   key: string;
@@ -16,13 +14,10 @@ export type RoleLabel = {
 };
 
 /**
- * Override the roles shown next to each member in the channel details screen.
- *
- * Receives `defaultRoleLabels` — the roles the default implementation computed for this member —
- * so a custom implementation can reuse or extend them (e.g. `[...defaultRoleLabels, customRole]`),
- * and returns the list of roles to render (or an empty array to render none). The default
- * implementation marks members as `owner` (channel creator), `admin` (`user.role === 'admin'`)
- * and `moderator` (`channel_role === 'channel_moderator'`), returning every role that applies.
+ * Overrides the roles shown next to each member. Receives the `defaultRoleLabels` computed for the
+ * member, to reuse or extend, and returns the roles to render, or an empty array for none. The
+ * defaults are `owner` (channel creator), `admin` (`user.role === 'admin'`) and `moderator`
+ * (`channel_role === 'channel_moderator'`).
  */
 export type GetMemberRoles = (params: {
   channel: Channel;
@@ -32,10 +27,11 @@ export type GetMemberRoles = (params: {
 }) => RoleLabel[];
 
 /**
- * Resolves the trailing role badges for a channel member row in the channel details screen.
+ * Resolves the role badges of a channel member row, in the order Owner, Admin, Moderator.
  *
- * Returns every applicable role in the order Owner > Admin > Moderator. When a member matches
- * none of the rules (and no custom `getMemberRoles` is provided), returns an empty array.
+ * @param member The channel member.
+ * @param getMemberRoles Overrides the default roles.
+ * @returns The roles, or an empty array when none apply.
  */
 export const useMemberRoles = (
   member: ChannelMemberResponse,