stream-chat-react-native-core 9.5.0-beta.7 → 9.5.0-beta.9

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

@@ -1,7 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
 
-import type { ChannelMemberResponse, SearchSourceState } from 'stream-chat';
+import type {
+  ChannelMemberResponse,
+  ChannelMemberSearchSource,
+  SearchSourceState,
+} from 'stream-chat';
 
 import { MemberListLoadingSkeleton } from './MemberListLoadingSkeleton';
 
@@ -14,6 +18,7 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useChannelMemberCount } from '../../../../hooks/useChannelMemberCount';
 import { useStateStore } from '../../../../hooks/useStateStore';
 import { primitives } from '../../../../theme';
 import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
@@ -41,6 +46,12 @@ export type ChannelMemberListProps = {
    */
   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`).
+   */
+  searchSource?: ChannelMemberSearchSource;
 };
 
 const ChannelMemberListContent = ({
@@ -53,11 +64,11 @@ const ChannelMemberListContent = ({
       channelDetails: { memberList },
     },
   } = useTheme();
-  const { onMemberPress } = useChannelDetailsContext();
   const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
   const { addNotification } = useNotificationApi();
 
-  const { channel, searchSource } = useChannelMemberListContext();
+  const { channel } = useChannelDetailsContext();
+  const { searchSource } = useChannelMemberListContext();
   const { error, hasNext, loading, members, searchQuery } = useStateStore(
     searchSource.state,
     listStateSelector,
@@ -65,13 +76,16 @@ const ChannelMemberListContent = ({
 
   const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
 
-  const initialized = useRef(false);
+  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
   useEffect(() => {
-    if (!initialized.current) {
-      initialized.current = true;
+    if (!searchSource.state.getLatestValue().searchQuery) {
+      searchSource.resetStateAndActivate();
       searchSource.search();
     }
-  }, [searchSource]);
+  }, [memberCount, searchSource]);
 
   useEffect(() => {
     if (!error) {
@@ -91,14 +105,8 @@ const ChannelMemberListContent = ({
   const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
 
   const handleMemberPress = useCallback(
-    (member: ChannelMemberResponse) => {
-      if (onMemberPress) {
-        onMemberPress(member);
-        return;
-      }
-      setSelectedMember(member);
-    },
-    [onMemberPress],
+    (member: ChannelMemberResponse) => setSelectedMember(member),
+    [],
   );
 
   const renderItem = useCallback(
@@ -164,9 +172,8 @@ const ChannelMemberListContent = ({
 
 /**
  * Lists all channel members with the ability to search them.
- * @experimental This component is experimental and is subject to change.
  */
-export const ChannelMemberList = (props: ChannelMemberListProps = {}) => {
+export const ChannelMemberList = ({ searchSource, ...props }: ChannelMemberListProps = {}) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;
 
@@ -175,7 +182,7 @@ export const ChannelMemberList = (props: ChannelMemberListProps = {}) => {
   }
 
   return (
-    <ChannelMemberListProvider channel={channel}>
+    <ChannelMemberListProvider channel={channel} searchSource={searchSource}>
       <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
         <ChannelMemberListContent {...props} />
       </NotificationTargetProvider>

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

@@ -3,9 +3,6 @@ import React from 'react';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const MemberListLoadingSkeleton = () => {
   const {
     theme: { memberListSkeleton },

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

@@ -3,9 +3,6 @@ import React from 'react';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const UserListLoadingSkeleton = () => {
   const {
     theme: { userListSkeleton },

package/src/components/ChannelDetails/components/members/index.ts

@@ -1,7 +1,8 @@
 export * from './AddMemberSearchResultItem';
-export * from './ChannelAddMembers';
-export * from './ChannelAddMembersModal';
-export * from './ChannelAllMembersModal';
+export * from './ChannelAddMembersButton';
+export * from './ChannelAddMembersForm';
+export * from './ChannelAddMembersFormContent';
+export * from './ChannelAddMembersFormHeader';
 export * from './ChannelMemberActionsSheet';
 export * from './ChannelMemberItem';
 export * from './ChannelMemberList';

package/src/components/ChannelDetails/components/modal/Modal.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
-import { Modal } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import { Modal, Platform } from 'react-native';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 
 type ChannelDetailsModalProps = {
@@ -13,9 +14,6 @@ type ChannelDetailsModalProps = {
   presentationStyle?: 'pageSheet' | 'formSheet' | 'fullScreen';
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelDetailsModal = ({
   children,
   onClose,
@@ -31,6 +29,19 @@ export const ChannelDetailsModal = ({
   } = useTheme();
   const styles = useStyles();
   const { top } = useSafeAreaInsets();
+  const { signalStore } = useChannelDetailsContext();
+
+  useEffect(() => {
+    const unsubscribe = signalStore.state.subscribeWithSelector(
+      (state) => ({ signal: state.signal }),
+      ({ signal }) => {
+        if (signal) {
+          onClose();
+        }
+      },
+    );
+    return unsubscribe;
+  }, [signalStore, onClose]);
 
   return (
     <Modal
@@ -42,7 +53,9 @@ export const ChannelDetailsModal = ({
       <GestureHandlerRootView
         style={[
           styles.body,
-          presentationStyle === 'fullScreen' ? { paddingTop: top } : {},
+          presentationStyle === 'fullScreen' || Platform.OS === 'android'
+            ? { paddingTop: top }
+            : {},
           bodyOverride,
         ]}
       >

package/src/components/ChannelDetails/components/modal/ModalHeader.tsx

@@ -13,9 +13,6 @@ type ModalHeaderProps = {
   rightAction?: React.ReactNode;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ModalHeader = ({
   onClose,
   rightAction,

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

@@ -11,8 +11,6 @@ import { openUrlSafely } from '../../../Attachment/utils/openUrlSafely';
 /**
  * The shape passed to `FileAttachmentItem`'s `onPress` callback, identifying the rendered
  * attachment and the message it belongs to.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type FileAttachmentItemPressParams = {
   attachment: Attachment;
@@ -31,9 +29,6 @@ export type FileAttachmentItemProps = {
   onPress?: (params: FileAttachmentItemPressParams) => void;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const FileAttachmentItem = (props: FileAttachmentItemProps) => {
   const { attachment, message, onPress } = props;
   const {

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

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 
-import type { MessageResponse, SearchSourceState } from 'stream-chat';
+import type { MessageResponse, MessageSearchSource, SearchSourceState } from 'stream-chat';
 
 import { FileAttachmentListLoadingSkeleton } from './FileAttachmentListLoadingSkeleton';
 import { FileAttachmentListSectionHeader } from './FileAttachmentListSectionHeader';
@@ -42,6 +42,12 @@ export type FileAttachmentListProps = {
    * See https://reactnative.dev/docs/sectionlist#props for the full list.
    */
   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).
+   */
+  searchSource?: MessageSearchSource;
 };
 
 const keyExtractor = (item: FileAttachmentTile, index: number) => `${item.message.id}-${index}`;
@@ -65,7 +71,8 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
 
   const { addNotification } = useNotificationApi();
 
-  const { channel, searchSource } = useChannelFileAttachmentListContext();
+  const { channel } = useChannelDetailsContext();
+  const { searchSource } = useChannelFileAttachmentListContext();
   const { error, hasNext, loading, messages } = useStateStore(
     searchSource.state,
     listStateSelector,
@@ -164,10 +171,7 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const FileAttachmentList = (props: FileAttachmentListProps) => {
+export const FileAttachmentList = ({ searchSource, ...props }: FileAttachmentListProps) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `file-attachment-list:${channel.cid}` : undefined;
 
@@ -176,7 +180,7 @@ export const FileAttachmentList = (props: FileAttachmentListProps) => {
   }
 
   return (
-    <ChannelFileAttachmentListProvider channel={channel}>
+    <ChannelFileAttachmentListProvider channel={channel} searchSource={searchSource}>
       <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
         <FileAttachmentListContent {...props} />
       </NotificationTargetProvider>

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

@@ -3,9 +3,6 @@ import React from 'react';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const FileAttachmentListLoadingSkeleton = () => {
   const {
     theme: { fileAttachmentListSkeleton },

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

@@ -9,9 +9,6 @@ export type FileAttachmentListSectionHeaderProps = {
   title: string;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const FileAttachmentListSectionHeader = ({
   title,
 }: FileAttachmentListSectionHeaderProps) => {

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

@@ -18,8 +18,6 @@ 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).
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type MediaItemPressParams = {
   attachment: Attachment;
@@ -41,9 +39,6 @@ export type MediaItemProps = {
   onPress?: (params: MediaItemPressParams) => void;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const MediaItem = (props: MediaItemProps) => {
   const { ImageComponent: Image } = useComponentsContext();
   const { attachment, message, onPress, size } = props;

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

@@ -8,7 +8,12 @@ import {
   View,
 } from 'react-native';
 
-import { formatMessage, type MessageResponse, type SearchSourceState } from 'stream-chat';
+import {
+  formatMessage,
+  type MessageResponse,
+  type MessageSearchSource,
+  type SearchSourceState,
+} from 'stream-chat';
 
 import { type MediaItemPressParams } from './MediaItem';
 import { MediaListLoadingSkeleton } from './MediaListLoadingSkeleton';
@@ -48,6 +53,12 @@ export type MediaListProps = {
    * See https://reactnative.dev/docs/flatlist#props for the full list.
    */
   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).
+   */
+  searchSource?: MessageSearchSource;
 };
 
 const keyExtractor = (item: MediaTile, index: number) => `${item.message.id}-${index}`;
@@ -72,7 +83,8 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
 
   const { addNotification } = useNotificationApi();
 
-  const { channel, searchSource } = useChannelMediaListContext();
+  const { channel } = useChannelDetailsContext();
+  const { searchSource } = useChannelMediaListContext();
   const { imageGalleryStateStore } = useImageGalleryContext();
   const { setOverlay } = useOverlayContext();
   const { error, hasNext, loading, messages } = useStateStore(
@@ -201,10 +213,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const MediaList = (props: MediaListProps) => {
+export const MediaList = ({ searchSource, ...props }: MediaListProps) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `media-list:${channel.cid}` : undefined;
 
@@ -213,7 +222,7 @@ export const MediaList = (props: MediaListProps) => {
   }
 
   return (
-    <ChannelMediaListProvider channel={channel}>
+    <ChannelMediaListProvider channel={channel} searchSource={searchSource}>
       <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
         <MediaListContent {...props} />
       </NotificationTargetProvider>

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

@@ -12,8 +12,6 @@ const ANIMATION_TIME = 1000;
 
 /**
  * Grid of shimmering placeholder tiles shown while the media list is loading.
- *
- * @experimental This component is experimental and is subject to change.
  */
 export const MediaListLoadingSkeleton = () => {
   const {

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

@@ -16,9 +16,6 @@ export type PinnedMessageItemProps = {
   message: MessageResponse;
 } & { formatMessageDate?: ChannelPreviewStatusProps['formatLatestMessageDate'] };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const PinnedMessageItem = (props: PinnedMessageItemProps) => {
   const { channel, message, formatMessageDate } = props;
   const {

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
 
-import type { MessageResponse, SearchSourceState } from 'stream-chat';
+import type { MessageResponse, MessageSearchSource, SearchSourceState } from 'stream-chat';
 
 import { PinnedMessageListLoadingSkeleton } from './PinnedMessageListLoadingSkeleton';
 
@@ -33,6 +33,12 @@ export type PinnedMessageListProps = {
    */
   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`).
+   */
+  searchSource?: MessageSearchSource;
 };
 
 const keyExtractor = (message: MessageResponse) => message.id;
@@ -60,7 +66,8 @@ const PinnedMessageListContent = ({
 
   const { addNotification } = useNotificationApi();
 
-  const { channel, searchSource } = useChannelPinnedMessageListContext();
+  const { channel } = useChannelDetailsContext();
+  const { searchSource } = useChannelPinnedMessageListContext();
   const { error, hasNext, loading, messages, searchQuery } = useStateStore(
     searchSource.state,
     listStateSelector,
@@ -158,10 +165,7 @@ const PinnedMessageListContent = ({
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const PinnedMessageList = (props: PinnedMessageListProps) => {
+export const PinnedMessageList = ({ searchSource, ...props }: PinnedMessageListProps) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `pinned-message-list:${channel.cid}` : undefined;
 
@@ -170,7 +174,7 @@ export const PinnedMessageList = (props: PinnedMessageListProps) => {
   }
 
   return (
-    <ChannelPinnedMessageListProvider channel={channel}>
+    <ChannelPinnedMessageListProvider channel={channel} searchSource={searchSource}>
       <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
         <PinnedMessageListContent {...props} />
       </NotificationTargetProvider>

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

@@ -3,9 +3,6 @@ import React from 'react';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { GenericListLoadingSkeleton } from '../../../UIComponents/GenericListLoadingSkeleton';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const PinnedMessageListLoadingSkeleton = () => {
   const {
     theme: { pinnedMessageListSkeleton },

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

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+import type { RoleLabel } from '../../hooks/members/useMemberRoles';
+
+export type RoleItemProps = {
+  role: RoleLabel;
+  /** Style applied to the badge label, layered over the theme override. */
+  textStyle?: StyleProp<TextStyle>;
+  /** Style applied to the badge container, layered over 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.
+ */
+export const RoleItem = ({ role, textStyle, viewStyle }: RoleItemProps) => {
+  const {
+    theme: {
+      channelDetails: {
+        roleItem: {
+          container: containerOverride,
+          ownerBackgroundColor,
+          ownerColor,
+          roleBackgroundColor,
+          roleColor,
+          text: textOverride,
+        },
+      },
+      semantics,
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const isOwner = role.key === 'owner';
+  const backgroundColor = isOwner
+    ? ownerBackgroundColor || semantics.brand150
+    : roleBackgroundColor || semantics.backgroundCoreSurfaceStrong;
+  const color = isOwner ? ownerColor || semantics.brand900 : roleColor || semantics.textPrimary;
+
+  return (
+    <View style={[styles.container, { backgroundColor }, containerOverride, viewStyle]}>
+      <Text numberOfLines={1} style={[styles.text, { color }, textOverride, textStyle]}>
+        {role.label}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          borderRadius: 14,
+          flexShrink: 0,
+          justifyContent: 'center',
+          paddingHorizontal: primitives.spacingXs,
+          paddingVertical: 0,
+        },
+        text: {
+          fontSize: primitives.typographyFontSizeXs,
+          fontWeight: primitives.typographyFontWeightMedium,
+          lineHeight: primitives.typographyLineHeightNormal,
+          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+        },
+      }),
+    [],
+  );

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

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../../theme';
+import type { RoleLabel } from '../../hooks/members/useMemberRoles';
+
+export type RoleListProps = {
+  roles: RoleLabel[];
+};
+
+/**
+ * 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.
+ */
+export const RoleList = ({ roles }: RoleListProps) => {
+  const { RoleItem } = useComponentsContext();
+  const {
+    theme: {
+      channelDetails: {
+        roleList: { container: containerOverride },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  if (!roles.length) return null;
+
+  return (
+    <View style={[styles.container, containerOverride]}>
+      {roles.map((role) => (
+        <RoleItem key={role.key} role={role} />
+      ))}
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          flexShrink: 0,
+          gap: primitives.spacingXxs,
+        },
+      }),
+    [],
+  );

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

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { StyleSheet } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../../contexts';
+import { defaultTheme } from '../../../../../contexts/themeContext/utils/theme';
+import type { RoleLabel } from '../../../hooks/members/useMemberRoles';
+import { RoleItem, type RoleItemProps } from '../RoleItem';
+
+const renderItem = (role: RoleLabel, props: Partial<RoleItemProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <RoleItem role={role} {...props} />
+    </ThemeProvider>,
+  );
+
+const containerStyleOf = (label: string) =>
+  StyleSheet.flatten(screen.getByText(label).parent?.parent?.props.style);
+
+const textStyleOf = (label: string) => StyleSheet.flatten(screen.getByText(label).props.style);
+
+const backgroundColorOf = (label: string) => containerStyleOf(label).backgroundColor;
+
+describe('RoleItem', () => {
+  it('renders the role label', () => {
+    renderItem({ key: 'admin', label: 'Admin' });
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+
+  it('uses a distinct background color for owner vs other roles', () => {
+    renderItem({ key: 'owner', label: 'Owner' });
+    const ownerBg = backgroundColorOf('Owner');
+
+    screen.unmount();
+
+    renderItem({ key: 'admin', label: 'Admin' });
+    const roleBg = backgroundColorOf('Admin');
+
+    expect(ownerBg).toBeTruthy();
+    expect(roleBg).toBeTruthy();
+    expect(ownerBg).not.toBe(roleBg);
+  });
+
+  it('applies viewStyle to the container, taking precedence over the theme background', () => {
+    renderItem(
+      { key: 'admin', label: 'Admin' },
+      { viewStyle: { backgroundColor: 'rgb(1, 2, 3)' } },
+    );
+    expect(backgroundColorOf('Admin')).toBe('rgb(1, 2, 3)');
+  });
+
+  it('applies textStyle to the label, taking precedence over the theme color', () => {
+    renderItem({ key: 'admin', label: 'Admin' }, { textStyle: { color: 'rgb(4, 5, 6)' } });
+    expect(textStyleOf('Admin').color).toBe('rgb(4, 5, 6)');
+  });
+});