useMemberRoles

A hook that resolves the trailing role badges shown next to a member row in the channel details screen (rendered by ChannelMemberItem via RoleList/RoleItem). The default implementation marks members as owner (channel creator), admin (user.role === 'admin') or moderator (channel_role === 'channel_moderator') and returns every role that applies, in the order Owner > Admin > Moderator. It resolves the channel from the ChannelDetailsContext.

Best Practices

  • Use it inside a ChannelDetailsContextProvider, since it resolves the channel from that context.
  • Pass a custom getMemberRoles to override the roles (e.g. localized or domain-specific roles) instead of forking the row component.
  • Return an empty array from a custom getMemberRoles to render no badges for a member.
  • Reuse or extend the provided defaultRoleLabels (the RoleLabel[] the hook computed for this member) — e.g. [...defaultRoleLabels, customRole] — or translate custom labels via the provided t function so they follow the configured locale.

Parameters

ParameterDescriptionType
memberThe channel member whose roles should be resolved.ChannelMemberResponse
getMemberRolesOptional override for the role resolution. Receives { channel, defaultRoleLabels, member, t } (where defaultRoleLabels is the computed default RoleLabel[] for the member) and returns an array of { key, label } (RoleLabel).GetMemberRoles

Return type

Returns the resolved roles as an array of RoleLabel ({ key, label }), or an empty array when no role applies.

Type
RoleLabel[]

Example usage

import { ChannelMemberItem, GetMemberRoles } from "stream-chat-react-native";

const getMemberRoles: GetMemberRoles = ({ defaultRoleLabels, member, t }) =>
  member.user?.id === "vip-user"
    ? [...defaultRoleLabels, { key: "vip", label: t("VIP") }]
    : defaultRoleLabels;

const Member = ({ member }) => (
  <ChannelMemberItem member={member} getMemberRoles={getMemberRoles} />
);