stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

package/src/components/ui/Avatar/__tests__/ChannelAvatar.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import * as useChannelImageModule from '../../../../hooks/useChannelImage';
+import * as useChannelNameModule from '../../../../hooks/useChannelName';
+import * as useChannelMembersStateModule from '../../../ChannelList/hooks/useChannelMembersState';
+import * as useChannelPreviewDisplayPresenceModule from '../../../ChannelPreview/hooks/useChannelPreviewDisplayPresence';
+import { ChannelAvatar } from '../ChannelAvatar';
+
+const avatarCalls: Array<{ imageUrl?: string }> = [];
+jest.mock('../Avatar', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    Avatar: (props: { imageUrl?: string }) => {
+      avatarCalls.push({ imageUrl: props.imageUrl });
+      return ReactActual.createElement(RN.View, { testID: 'avatar' });
+    },
+  };
+});
+
+jest.mock('../AvatarGroup', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    UserAvatarGroup: () => ReactActual.createElement(RN.View, { testID: 'user-avatar-group' }),
+  };
+});
+
+jest.mock('../UserAvatar', () => {
+  const RN = jest.requireActual('react-native');
+  const ReactActual = jest.requireActual('react');
+  return {
+    UserAvatar: () => ReactActual.createElement(RN.View, { testID: 'user-avatar' }),
+  };
+});
+
+const OWN_USER_ID = 'me';
+
+const buildChannel = (): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: {},
+    on: () => ({ unsubscribe: () => undefined }),
+  }) as unknown as Channel;
+
+const buildMembers = (...ids: string[]) =>
+  Object.fromEntries(ids.map((id) => [id, { user: { id } }]));
+
+const renderAvatar = (props: Partial<React.ComponentProps<typeof ChannelAvatar>> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <ChatProvider value={{ client: { user: { id: OWN_USER_ID } } } as never}>
+        <ChannelAvatar channel={buildChannel()} {...props} />
+      </ChatProvider>
+    </ThemeProvider>,
+  );
+
+describe('ChannelAvatar', () => {
+  beforeEach(() => {
+    avatarCalls.length = 0;
+    jest
+      .spyOn(useChannelPreviewDisplayPresenceModule, 'useChannelPreviewDisplayPresence')
+      .mockReturnValue(false);
+    jest.spyOn(useChannelNameModule, 'useChannelName').mockReturnValue('Channel Name');
+    jest.spyOn(useChannelImageModule, 'useChannelImage').mockReturnValue(undefined);
+    jest.spyOn(useChannelMembersStateModule, 'useChannelMembersState').mockReturnValue({});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('default (non-preview) mode', () => {
+    it('renders the stored channel image when present', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar();
+
+      expect(screen.getByTestId('avatar')).toBeTruthy();
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('https://example.com/live.png');
+    });
+
+    it('falls back to the user-avatar group when there is no image and 2+ other members', () => {
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a', 'b') as never);
+
+      renderAvatar();
+
+      expect(screen.getByTestId('user-avatar-group')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+
+    it('falls back to a single user avatar when there is no image and at most one other member', () => {
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a') as never);
+
+      renderAvatar();
+
+      expect(screen.getByTestId('user-avatar')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+
+    it('ignores previewUri when isPreview is false', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar({ isPreview: false, previewUri: 'file://picked.png' });
+
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('https://example.com/live.png');
+    });
+  });
+
+  describe('preview mode', () => {
+    it('renders the previewUri instead of the stored channel image', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+
+      renderAvatar({ isPreview: true, previewUri: 'file://picked.png' });
+
+      expect(screen.getByTestId('avatar')).toBeTruthy();
+      expect(avatarCalls[avatarCalls.length - 1].imageUrl).toBe('file://picked.png');
+    });
+
+    it('falls back to the member avatars when previewUri is null (reset), ignoring the stored image', () => {
+      jest
+        .spyOn(useChannelImageModule, 'useChannelImage')
+        .mockReturnValue('https://example.com/live.png');
+      jest
+        .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
+        .mockReturnValue(buildMembers(OWN_USER_ID, 'a', 'b') as never);
+
+      renderAvatar({ isPreview: true, previewUri: null });
+
+      expect(screen.getByTestId('user-avatar-group')).toBeTruthy();
+      expect(screen.queryByTestId('avatar')).toBeNull();
+    });
+  });
+});

package/src/components/ui/Input/Input.tsx

@@ -52,23 +52,26 @@ export type InputProps = TextInputProps & {
   containerStyle?: StyleProp<ViewStyle>;
 };
 
-export const Input = ({
-  title,
-  description,
-  variant = 'outline',
-  LeadingIcon,
-  TrailingIcon,
-  editable = true,
-  state = 'default',
-  helperText = true,
-  errorMessage,
-  successMessage,
-  infoText,
-  onFocus,
-  onBlur,
-  containerStyle,
-  ...props
-}: InputProps) => {
+export const Input = React.forwardRef<TextInput, InputProps>(function Input(
+  {
+    title,
+    description,
+    variant = 'outline',
+    LeadingIcon,
+    TrailingIcon,
+    editable = true,
+    state = 'default',
+    helperText = true,
+    errorMessage,
+    successMessage,
+    infoText,
+    onFocus,
+    onBlur,
+    containerStyle,
+    ...props
+  },
+  ref,
+) {
   const [isFocused, setIsFocused] = useState(false);
   const {
     theme: { semantics },
@@ -111,9 +114,8 @@ export const Input = ({
             borderWidth: variant === 'outline' ? 1 : 0,
             borderColor: !editable
               ? semantics.borderUtilityDisabled
-              : // TODO: V9: This should go away as it's the same style. In a separate PR though.
-                isFocused
-                ? semantics.borderCoreDefault
+              : isFocused
+                ? semantics.borderUtilityActive
                 : semantics.borderCoreDefault,
           },
           containerStyle,
@@ -128,6 +130,7 @@ export const Input = ({
           />
         ) : null}
         <TextInput
+          ref={ref}
           accessibilityHint={description}
           accessibilityLabel={props.accessibilityLabel ?? title}
           accessibilityState={accessibilityState}
@@ -186,7 +189,7 @@ export const Input = ({
       ) : null}
     </View>
   );
-};
+});
 
 const useStyles = () => {
   const {

package/src/contexts/bottomSheetContext/BottomSheetContext.tsx

@@ -6,7 +6,32 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type BottomSheetContextValue = {
+  /**
+   * Callback that will safely close the modal while preserving animation
+   * timing and respecting actions finishing before the close is invoked.
+   *
+   * @param closeAnimationFinishedCallback {function} - a callback that is
+   * going to be invoked when the closing animation finishes (but not necessarily
+   * when the modal is actually dismissed)
+   * @returns void
+   */
   close: (closeAnimationFinishedCallback?: () => void) => void;
+  /**
+   * A callback that will safely dismiss the modal, while preserving animation timing
+   * and respecting actions finishing before the close is invoked. Very similar to `close`,
+   * however it takes an extra step to make sure that the modal is actually dismissed
+   * before its callback is invoked. This is mostly useful for iOS, where for certain
+   * libraries (i.e `react-native-image-picker`) you aren't able to open both a RN modal
+   * and its internal `UIImagePickerController` at the same time and you have to wait
+   * for `onDismiss` to be fired internally.
+   *
+   * It will work exactly the same as `close` for Android as this is not an issue there.
+   *
+   * @param closeAnimationFinishedCallback {function} - a callback that is
+   * going to be invoked when the dismissal of the modal finishes
+   * @returns void
+   */
+  dismiss: (dismissFinishedCallback?: () => void) => void;
   currentSnapIndex: SharedValue<number>;
   topSnapIndex: SharedValue<number>;
 };

package/src/contexts/channelAddMembersContext/ChannelAddMembersContext.tsx

@@ -0,0 +1,73 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { UserSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { SelectionStore } from '../../state-store/selection-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelAddMembersContextValue = {
+  selectionStore: SelectionStore;
+  searchSource: UserSearchSource;
+};
+
+export const ChannelAddMembersContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelAddMembersContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelAddMembersProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const { client } = useChatContext();
+  const [selectionStore] = useState(() => new SelectionStore());
+  const [searchSource] = useState(() => {
+    const source = new UserSearchSource(
+      client,
+      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
+      {
+        initialFilterConfig: {
+          $or: {
+            enabled: true,
+            generate: ({ searchQuery }) =>
+              searchQuery
+                ? {
+                    name: { $autocomplete: searchQuery },
+                  }
+                : {},
+          },
+        },
+      },
+    );
+    source.activate();
+    source.sort = [{ name: 1 }];
+    return source;
+  });
+
+  return (
+    <ChannelAddMembersContext.Provider value={{ selectionStore, searchSource }}>
+      {children}
+    </ChannelAddMembersContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelAddMembersContext = () => {
+  const contextValue = useContext(
+    ChannelAddMembersContext,
+  ) as unknown as ChannelAddMembersContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelAddMembersContext hook was called outside of the ChannelAddMembersContext provider. Render the add-members UI inside a ChannelAddMembersProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelDetailsContext/channelDetailsContext.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { ChannelDetailsProps } from '../../components';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelDetailsContextValue = ChannelDetailsProps;
+export const ChannelDetailsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelDetailsContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelDetailsContextProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ChannelDetailsContextValue;
+}>) => (
+  <ChannelDetailsContext.Provider value={value as unknown as ChannelDetailsContextValue}>
+    {children}
+  </ChannelDetailsContext.Provider>
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelDetailsContext = () => {
+  const contextValue = useContext(ChannelDetailsContext) as unknown as ChannelDetailsContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelDetailsContext hook was called outside of the ChannelDetailsContext provider. Render the ChannelDetails component (or its content) inside a ChannelDetailsContextProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelDetailsContext/index.ts

@@ -0,0 +1 @@
+export * from './channelDetailsContext';

package/src/contexts/channelEditDetailsContext/ChannelEditDetailsContext.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel } from 'stream-chat';
+
+import { EditChannelDetailsStore } from '../../state-store/edit-channel-details-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelEditDetailsContextValue = {
+  store: EditChannelDetailsStore;
+};
+
+export const ChannelEditDetailsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelEditDetailsContextValue,
+);
+
+/**
+ * Creates and provides an {@link EditChannelDetailsStore} snapshotted from the
+ * given channel. Mount this once per edit session — the store captures the
+ * channel's name/image at construction and does not track later WebSocket
+ * updates, so an inbound `channel.updated` does not clobber in-progress edits.
+ *
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelEditDetailsProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const [store] = useState(() => new EditChannelDetailsStore(channel));
+
+  return (
+    <ChannelEditDetailsContext.Provider value={{ store }}>
+      {children}
+    </ChannelEditDetailsContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelEditDetailsContext = () => {
+  const contextValue = useContext(
+    ChannelEditDetailsContext,
+  ) as unknown as ChannelEditDetailsContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelEditDetailsContext hook was called outside of the ChannelEditDetailsContext provider. Render the channel edit UI inside a ChannelEditDetailsProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelEditDetailsContext/index.ts

@@ -0,0 +1 @@
+export * from './ChannelEditDetailsContext';

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -5,8 +5,8 @@ import type { FlatList } from 'react-native-gesture-handler';
 
 import type { Channel } from 'stream-chat';
 
-import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
+import type { GetChannelActionItems } from '../../hooks/actions/useChannelActionItems';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -118,6 +118,7 @@ export type ChannelsContextValue = {
   swipeActionsEnabled?: boolean;
 
   mutedStatusPosition?: 'trailingBottom' | 'inlineTitle';
+  pinnedStatusPosition?: 'trailingBottom' | 'inlineTitle';
 };
 
 export const ChannelsContext = React.createContext(

package/src/contexts/componentsContext/defaultComponents.ts

@@ -27,6 +27,21 @@ import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput
 import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import { InputView } from '../../components/AutoCompleteInput/InputView';
+import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
+import {
+  ChannelAddMembers,
+  ChannelDetailsActionsSection,
+  ChannelDetailsActionItem,
+  ChannelDetailsMemberSection,
+  ChannelDetailsProfile,
+  ChannelDetailsNavHeader,
+  ChannelEditDetails,
+  ChannelEditImageSheet,
+  ChannelEditName,
+  ChannelMemberActionsSheet,
+  ChannelMemberItem,
+  ChannelMemberList,
+} from '../../components/ChannelDetails/components';
 import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from '../../components/ChannelList/ChannelListHeaderNetworkDownIndicator';
@@ -38,6 +53,7 @@ import { ChannelLastMessagePreview } from '../../components/ChannelPreview/Chann
 import { ChannelMessagePreviewDeliveryStatus } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessage } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from '../../components/ChannelPreview/ChannelPreviewMutedStatus';
+import { ChannelPreviewPinnedStatus } from '../../components/ChannelPreview/ChannelPreviewPinnedStatus';
 import { ChannelPreviewStatus } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import { ChannelPreviewTitle } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicator } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
@@ -256,6 +272,7 @@ const components = {
   ChannelPreviewMessage,
   ChannelPreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
   ChannelPreviewMutedStatus,
+  ChannelPreviewPinnedStatus,
   ChannelPreviewStatus,
   ChannelPreviewTitle,
   ChannelPreviewTypingIndicator,
@@ -289,6 +306,21 @@ const components = {
   // Channel details
   ChannelDetailsHeader,
 
+  // Channel Details Screen
+  ChannelAddMembers,
+  ChannelDetailsActionsSection,
+  ChannelDetailsActionItem,
+  ChannelDetailsMemberSection,
+  ChannelDetailsProfile,
+  ChannelDetailsContent,
+  ChannelDetailsNavHeader,
+  ChannelEditDetails,
+  ChannelEditImageSheet,
+  ChannelEditName,
+  ChannelMemberActionsSheet,
+  ChannelMemberItem,
+  ChannelMemberList,
+
   // Thread
   ThreadMessageComposer: MessageComposer,
   ThreadListComponent,
@@ -327,6 +359,7 @@ const components = {
  */
 export interface OptionalComponentOverrides {
   AttachmentPickerIOSSelectMorePhotos?: React.ComponentType;
+  ChannelDetailsNavigationSection?: React.ComponentType;
   ChatLoadingIndicator?: React.ComponentType | null;
   CreatePollContent?: React.ComponentType;
   Input?: React.ComponentType<{

package/src/contexts/index.ts

@@ -29,6 +29,9 @@ export * from './threadsContext/ThreadListItemContext';
 export * from './translationContext';
 export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';
+export * from './channelDetailsContext';
+export * from './channelAddMembersContext/ChannelAddMembersContext';
+export * from './channelEditDetailsContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';
 export * from './audioPlayerContext/AudioPlayerContext';

package/src/contexts/messageInputContext/hooks/useCreateMessageComposer.ts

@@ -1,12 +1,10 @@
 import { useEffect, useMemo } from 'react';
 
-import { FixedSizeQueueCache, MessageComposer } from 'stream-chat';
+import { MessageComposer } from 'stream-chat';
 
 import { useChatContext } from '../../chatContext/ChatContext';
 import { MessageComposerContextValue } from '../../messageComposerContext/MessageComposerContext';
 
-const queueCache = new FixedSizeQueueCache<string, MessageComposer>(64);
-
 export const useCreateMessageComposer = ({
   editing: editedMessage,
   thread: parentMessage,
@@ -14,6 +12,7 @@ export const useCreateMessageComposer = ({
   channel,
 }: Pick<MessageComposerContextValue, 'channel' | 'threadInstance' | 'thread' | 'editing'>) => {
   const { client } = useChatContext();
+  const { messageComposerCache: queueCache } = client;
 
   const cachedEditedMessage = useMemo(() => {
     if (!editedMessage) return undefined;
@@ -69,7 +68,14 @@ export const useCreateMessageComposer = ({
     } else {
       return channel.messageComposer;
     }
-  }, [cachedEditedMessage, cachedParentMessage, channel, client, threadInstance]);
+  }, [
+    cachedEditedMessage,
+    cachedParentMessage,
+    channel.messageComposer,
+    client,
+    queueCache,
+    threadInstance,
+  ]);
 
   if (
     (['legacy_thread', 'message'] as MessageComposer['contextType'][]).includes(

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -21,6 +21,7 @@ export const allOwnCapabilities = {
   sendReply: 'send-reply',
   sendTypingEvents: 'send-typing-events',
   updateAnyMessage: 'update-any-message',
+  updateChannelMembers: 'update-channel-members',
   updateOwnMessage: 'update-own-message',
   uploadFile: 'upload-file',
 };