stream-chat-react-native-core 9.4.0-beta.11 → 9.4.0-beta.12

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type { ImageGalleryHeaderProps } from './types';
 
@@ -17,11 +18,6 @@ import { ImageGalleryState } from '../../../state-store/image-gallery-state-stor
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui/Button/Button';
-import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
-
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
@@ -35,6 +31,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const { imageGalleryStateStore } = useImageGalleryContext();
   const { asset } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { setOverlay } = useOverlayContext();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? 0;
 
   const date = useMemo(
     () =>
@@ -71,17 +68,19 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView edges={['top']} style={[styles.container, headerStyle]}>
+      <Animated.View style={[styles.container, { paddingTop: topInset }, headerStyle]}>
         <View style={styles.innerContainer}>
-          <Button
-            accessibilityLabelKey='a11y/Hide Overlay'
-            variant='secondary'
-            type='ghost'
-            size='md'
-            onPress={hideOverlay}
-            LeadingIcon={ChevronLeft}
-            iconOnly
-          />
+          <View style={styles.leftContainer}>
+            <Button
+              accessibilityLabelKey='a11y/Hide Overlay'
+              variant='secondary'
+              type='ghost'
+              size='md'
+              onPress={hideOverlay}
+              LeadingIcon={ChevronLeft}
+              iconOnly
+            />
+          </View>
           <View style={styles.centerContainer} accessibilityLabel='Center element'>
             <Text style={styles.userName}>
               {asset?.user?.name || asset?.user?.id || t('Unknown User')}
@@ -90,7 +89,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
           </View>
           <View style={styles.rightContainer} accessibilityLabel='Right element' />
         </View>
-      </ReanimatedSafeAreaView>
+      </Animated.View>
     </View>
   );
 };
@@ -114,7 +113,7 @@ const useStyles = () => {
         },
         centerContainer: {
           alignItems: 'center',
-          flex: 1,
+          flex: 2,
           justifyContent: 'center',
           gap: primitives.spacingXxs,
           ...header.centerContainer,
@@ -134,9 +133,13 @@ const useStyles = () => {
           borderBottomColor: semantics.borderCoreSubtle,
           ...header.innerContainer,
         },
+        leftContainer: {
+          flex: 1,
+        },
         rightContainer: {
           width: 24,
           height: 24,
+          flex: 1,
         },
         userName: {
           color: semantics.textPrimary,

package/src/components/UIComponents/EmptyList.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../icons/utils/base';
+import { primitives } from '../../theme';
+
+export type EmptyListProps = {
+  /**
+   * Icon component to render. Its size and color are set by `EmptyList`.
+   */
+  icon: React.ComponentType<IconProps>;
+  /**
+   * Title text shown below the icon.
+   */
+  title: string;
+  /**
+   * Optional supporting text shown below the title.
+   */
+  subtitle?: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const EmptyList = ({ icon: Icon, subtitle, title }: EmptyListProps) => {
+  const {
+    theme: {
+      emptyList: { container, subtitle: subtitleStyle, title: titleStyle },
+      semantics,
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]} testID='empty-list'>
+      <Icon stroke={semantics.textTertiary} size={32} />
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: semantics.textPrimary }, titleStyle]}>{title}</Text>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: semantics.textSecondary }, subtitleStyle]}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+EmptyList.displayName = 'EmptyList{emptyList}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: primitives.spacingSm,
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: primitives.spacingMd,
+    paddingVertical: primitives.spacing3xl,
+    width: '100%',
+  },
+  content: {
+    alignItems: 'center',
+    gap: primitives.spacingXs,
+    width: '100%',
+  },
+  subtitle: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightRegular,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+  title: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightSemiBold,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+});

package/src/components/UIComponents/__tests__/EmptyList.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { Pin } from '../../../icons/pin';
+import { EmptyList } from '../EmptyList';
+
+type EmptyListProps = React.ComponentProps<typeof EmptyList>;
+
+const renderComponent = (props: Partial<EmptyListProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <EmptyList icon={Pin} title='No pinned messages' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('EmptyList', () => {
+  it('renders the empty-list testID', () => {
+    renderComponent();
+    expect(screen.getByTestId('empty-list')).toBeTruthy();
+  });
+
+  it('renders the title text', () => {
+    renderComponent({ title: 'Nothing here' });
+    expect(screen.getByText('Nothing here')).toBeTruthy();
+  });
+
+  it('renders the subtitle when provided', () => {
+    renderComponent({ subtitle: 'Long-press a message to pin it to the chat' });
+    expect(screen.getByText('Long-press a message to pin it to the chat')).toBeTruthy();
+  });
+
+  it('does not render a subtitle when omitted', () => {
+    renderComponent({ subtitle: undefined });
+    expect(screen.queryByText('Long-press a message to pin it to the chat')).toBeNull();
+  });
+
+  it('honors a custom container style override from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: { backgroundColor: 'rgb(255, 0, 0)' },
+        subtitle: {},
+        title: {},
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} title='Empty' />
+      </ThemeProvider>,
+    );
+
+    const container = screen.getByTestId('empty-list');
+    const flattened = Array.isArray(container.props.style)
+      ? Object.assign({}, ...container.props.style.flat(Infinity).filter(Boolean))
+      : container.props.style;
+    expect(flattened.backgroundColor).toBe('rgb(255, 0, 0)');
+  });
+
+  it('honors custom title and subtitle style overrides from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: {},
+        subtitle: { color: 'rgb(0, 0, 255)' },
+        title: { color: 'rgb(0, 255, 0)' },
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} subtitle='Subtitle' title='Title' />
+      </ThemeProvider>,
+    );
+
+    const flatten = (node: { props: { style: unknown } }) =>
+      Array.isArray(node.props.style)
+        ? Object.assign({}, ...(node.props.style as unknown[]).flat(Infinity).filter(Boolean))
+        : node.props.style;
+
+    const title = screen.getByText('Title') as unknown as { props: { style: unknown } };
+    const subtitle = screen.getByText('Subtitle') as unknown as { props: { style: unknown } };
+
+    expect((flatten(title) as { color?: string }).color).toBe('rgb(0, 255, 0)');
+    expect((flatten(subtitle) as { color?: string }).color).toBe('rgb(0, 0, 255)');
+  });
+});

package/src/components/UIComponents/index.ts

@@ -1,6 +1,7 @@
 export * from './BottomSheetModal';
 export * from './ClippingFadeBottom';
 export * from './StreamBottomSheetModalFlatList';
+export * from './EmptyList';
 export * from './EmptySearchResult';
 export * from './ImageBackground';
 export * from './SearchInput';

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -28,8 +28,8 @@ export type AvatarGroupProps = {
 // Sizes accounts for the border width as well
 const sizes = {
   '2xl': {
-    width: 64,
-    height: 64,
+    width: 80,
+    height: 80,
   },
   xl: {
     width: 48,
@@ -165,7 +165,7 @@ export type UserAvatarGroupProps = Pick<AvatarGroupProps, 'size'> & {
 };
 
 const userAvatarSize: Record<UserAvatarGroupProps['size'], UserAvatarProps['size']> = {
-  '2xl': 'lg',
+  '2xl': 'xl',
   xl: 'md',
   lg: 'sm',
 };

package/src/components/ui/Avatar/constants.ts

@@ -7,8 +7,8 @@ import { OnlineIndicatorProps } from '../Badge';
 
 const avatarSizes = {
   '2xl': {
-    height: 64,
-    width: 64,
+    height: 80,
+    width: 80,
   },
   xl: {
     height: 48,

package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+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 ChannelFileAttachmentListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelFileAttachmentListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelFileAttachmentListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelFileAttachmentListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      $or: [{ 'attachments.type': 'file' }, { 'attachments.type': 'audio' }],
+    };
+    // Newest first so the list groups cleanly under month section headers.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelFileAttachmentListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelFileAttachmentListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelFileAttachmentListContext = () => {
+  const contextValue = useContext(
+    ChannelFileAttachmentListContext,
+  ) as unknown as ChannelFileAttachmentListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelFileAttachmentListContext hook was called outside of the ChannelFileAttachmentListContext provider. Render the file attachment list UI inside a ChannelFileAttachmentListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx

@@ -0,0 +1,68 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+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 ChannelMediaListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelMediaListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelMediaListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelMediaListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      'attachments.type': { $in: ['image', 'video'] },
+      type: undefined,
+    };
+    // Newest media first so the grid reads top-to-bottom from most recent.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelMediaListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelMediaListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelMediaListContext = () => {
+  const contextValue = useContext(
+    ChannelMediaListContext,
+  ) as unknown as ChannelMediaListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelMediaListContext hook was called outside of the ChannelMediaListContext provider. Render the media list UI inside a ChannelMediaListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+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 ChannelPinnedMessageListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelPinnedMessageListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelPinnedMessageListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelPinnedMessageListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(
+      client,
+      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
+      {
+        messageSearch: {
+          initialFilterConfig: {
+            $or: {
+              enabled: true,
+              generate: ({ searchQuery }) => (searchQuery ? { text: { $q: searchQuery } } : {}),
+            },
+          },
+        },
+      },
+    );
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = { pinned: true, type: undefined };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelPinnedMessageListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelPinnedMessageListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelPinnedMessageListContext = () => {
+  const contextValue = useContext(
+    ChannelPinnedMessageListContext,
+  ) as unknown as ChannelPinnedMessageListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelPinnedMessageListContext hook was called outside of the ChannelPinnedMessageListContext provider. Render the pinned message list UI inside a ChannelPinnedMessageListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/componentsContext/defaultComponents.ts

@@ -36,7 +36,9 @@ import {
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsProfile,
+  ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
   ChannelEditDetails,
   ChannelEditImageSheet,
@@ -44,6 +46,12 @@ import {
   ChannelMemberActionsSheet,
   ChannelMemberItem,
   ChannelMemberList,
+  FileAttachmentItem,
+  FileAttachmentList,
+  MediaItem,
+  MediaList,
+  PinnedMessageItem,
+  PinnedMessageList,
 } from '../../components/ChannelDetails/components';
 import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
 import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
@@ -315,8 +323,10 @@ const components = {
   ChannelDetailsActionsSection,
   ChannelDetailsActionItem,
   ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsProfile,
   ChannelDetailsContent,
+  ChannelDetailsEditButton,
   ChannelDetailsNavHeader,
   ChannelEditDetails,
   ChannelEditImageSheet,
@@ -324,6 +334,12 @@ const components = {
   ChannelMemberActionsSheet,
   ChannelMemberItem,
   ChannelMemberList,
+  FileAttachmentItem,
+  FileAttachmentList,
+  MediaItem,
+  MediaList,
+  PinnedMessageItem,
+  PinnedMessageList,
 
   // Thread
   ThreadMessageComposer: MessageComposer,
@@ -363,7 +379,6 @@ 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

@@ -32,6 +32,9 @@ export * from './utils/getDisplayName';
 export * from './channelDetailsContext';
 export * from './channelAddMembersContext/ChannelAddMembersContext';
 export * from './channelEditDetailsContext';
+export * from './channelFileAttachmentListContext/ChannelFileAttachmentListContext';
+export * from './channelPinnedMessageListContext/ChannelPinnedMessageListContext';
+export * from './channelMediaListContext/ChannelMediaListContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';
 export * from './audioPlayerContext/AudioPlayerContext';