stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.3

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -53,11 +53,15 @@ export const useCreateMessagesContext = ({
   MessageActionList,
   MessageActionListItem,
   messageActions,
-  MessageAvatar,
+  MessageAuthor,
   MessageBlocked,
   MessageBounce,
   MessageContent,
+  MessageContentBottomView,
+  MessageContentLeadingView,
   messageContentOrder,
+  MessageContentTrailingView,
+  MessageContentTopView,
   MessageDeleted,
   MessageError,
   MessageFooter,
@@ -72,7 +76,8 @@ export const useCreateMessagesContext = ({
   MessageReactionPicker,
   MessageReplies,
   MessageRepliesAvatars,
-  MessageSimple,
+  MessageSpacer,
+  MessageItemView,
   MessageStatus,
   MessageSwipeContent,
   messageSwipeToReplyHitSlop,
@@ -177,11 +182,15 @@ export const useCreateMessagesContext = ({
       MessageActionList,
       MessageActionListItem,
       messageActions,
-      MessageAvatar,
+      MessageAuthor,
       MessageBlocked,
       MessageBounce,
       MessageContent,
+      MessageContentBottomView,
+      MessageContentLeadingView,
       messageContentOrder,
+      MessageContentTrailingView,
+      MessageContentTopView,
       MessageDeleted,
       MessageError,
       MessageFooter,
@@ -196,7 +205,8 @@ export const useCreateMessagesContext = ({
       MessageReactionPicker,
       MessageReplies,
       MessageRepliesAvatars,
-      MessageSimple,
+      MessageSpacer,
+      MessageItemView,
       MessageStatus,
       MessageSwipeContent,
       messageSwipeToReplyHitSlop,

package/src/components/ChannelList/ChannelList.tsx

@@ -15,7 +15,7 @@ import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingInd
 import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
-import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
+import { ChannelListView, ChannelListViewProps } from './ChannelListView';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -28,7 +28,7 @@ import {
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import type { ChannelListEventListenerOptions } from '../../types/types';
-import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
+import { ChannelPreviewView } from '../ChannelPreview/ChannelPreviewView';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
 
@@ -78,9 +78,9 @@ export type ChannelListProps = Partial<
   /**
    * Custom UI component to display the list of channels
    *
-   * Default: [ChannelListMessenger](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-messenger/)
+   * Default: [ChannelListView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-view/)
    */
-  List?: React.ComponentType<ChannelListMessengerProps>;
+  List?: React.ComponentType<ChannelListViewProps>;
   /**
    * If set to true, channels won't dynamically sort by most recent message, defaults to false
    */
@@ -248,7 +248,7 @@ const DEFAULT_SORT = {};
 /**
  * This component fetches a list of channels, allowing you to select the channel you want to open.
  * The ChannelList doesn't provide any UI for the underlying React Native FlatList. UI is determined by the `List` component which is
- * provided to the ChannelList component as a prop. By default, the ChannelListMessenger component is used as the list UI.
+ * provided to the ChannelList component as a prop. By default, the ChannelListView component is used as the list UI.
  *
  * @example ./ChannelList.md
  */
@@ -261,7 +261,7 @@ export const ChannelList = (props: ChannelListProps) => {
     FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     HeaderErrorIndicator = ChannelListHeaderErrorIndicator,
     HeaderNetworkDownIndicator = ChannelListHeaderNetworkDownIndicator,
-    List = ChannelListMessenger,
+    List = ChannelListView,
     ListHeaderComponent,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = ChannelListLoadingIndicator,
@@ -282,7 +282,7 @@ export const ChannelList = (props: ChannelListProps) => {
     onRemovedFromChannel,
     onSelect,
     options = DEFAULT_OPTIONS,
-    Preview = ChannelPreviewMessenger,
+    Preview = ChannelPreviewView,
     getChannelActionItems,
     PreviewAvatar,
     PreviewMessage,

package/src/components/ChannelList/{ChannelListMessenger.tsx → ChannelListView.tsx}

@@ -16,7 +16,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 
-export type ChannelListMessengerPropsWithContext = Omit<
+export type ChannelListViewPropsWithContext = Omit<
   ChannelsContextValue,
   | 'HeaderErrorIndicator'
   | 'HeaderNetworkDownIndicator'
@@ -61,7 +61,7 @@ const renderItem = ({ item }: { item: Channel }) => <ChannelPreview channel={ite
 
 const keyExtractor = (item: Channel) => item.cid;
 
-const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithContext) => {
+const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
   const onEndReachedCalledDuringCurrentScrollRef = useRef<boolean>(false);
   const {
     additionalFlatListProps,
@@ -159,7 +159,7 @@ const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithCon
         refreshing={refreshing}
         renderItem={renderItem}
         style={styles.flatList}
-        testID='channel-list-messenger'
+        testID='channel-list-view'
         {...additionalFlatListProps}
       />
       <StatusIndicator />
@@ -167,15 +167,15 @@ const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithCon
   );
 };
 
-export type ChannelListMessengerProps = Partial<ChannelListMessengerPropsWithContext>;
+export type ChannelListViewProps = Partial<ChannelListViewPropsWithContext>;
 
 /**
  * This UI component displays the preview list of channels and handles Channel navigation. It
  * receives all props from the ChannelList component.
  *
- * @example ./ChannelListMessenger.md
+ * @example ./ChannelListView.md
  */
-export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
+export const ChannelListView = (props: ChannelListViewProps) => {
   const {
     additionalFlatListProps,
     channelListInitialized,
@@ -199,7 +199,7 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   } = useChannelsContext();
 
   return (
-    <ChannelListMessengerWithContext
+    <ChannelListViewWithContext
       {...{
         additionalFlatListProps,
         channelListInitialized,
@@ -226,12 +226,12 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   );
 };
 
-ChannelListMessenger.displayName = 'ChannelListMessenger{channelListMessenger}';
+ChannelListView.displayName = 'ChannelListView{channelListView}';
 
 const useStyles = () => {
   const {
     theme: {
-      channelListMessenger: { flatList, flatListContent },
+      channelListView: { flatList, flatListContent },
     },
   } = useTheme();
   return useMemo(() => {

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -43,7 +43,7 @@ jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({
 
 /**
  * We are gonna use following custom UI components for preview and list.
- * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
+ * If we use ChannelPreviewView or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug.
  */
@@ -427,7 +427,7 @@ describe('ChannelList', () => {
         );
 
         await waitFor(() => {
-          expect(screen.getByTestId('channel-list-messenger')).toBeTruthy();
+          expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         });
 
         const newMessage = sendNewMessageOnChannel3();

package/src/components/ChannelList/__tests__/{ChannelListMessenger.test.js → ChannelListView.test.js}

@@ -14,7 +14,7 @@ import { generateChannelResponse } from '../../../mock-builders/generator/channe
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
-import { ChannelListMessenger } from '../ChannelListMessenger';
+import { ChannelListView } from '../ChannelListView';
 
 let mockChannels;
 let chatClient;
@@ -24,7 +24,7 @@ const ListMessenger = ({ error, loadingChannels, ...props }) => {
 
   return (
     <ChannelsProvider value={{ ...channelsContext, error, loadingChannels }}>
-      <ChannelListMessenger {...props} />
+      <ChannelListView {...props} />
     </ChannelsProvider>
   );
 };
@@ -54,7 +54,7 @@ const Component = ({ error = false, loadingChannels = false }) => {
   );
 };
 
-describe('ChannelListMessenger', () => {
+describe('ChannelListView', () => {
   beforeAll(async () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
     const c1 = generateChannelResponse();
@@ -71,7 +71,7 @@ describe('ChannelListMessenger', () => {
   it('renders without crashing', async () => {
     const { getByTestId } = render(<Component />);
     await waitFor(() => {
-      expect(getByTestId('channel-list-messenger')).toBeTruthy();
+      expect(getByTestId('channel-list-view')).toBeTruthy();
     });
   });
 

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { ChannelPreviewProps } from './ChannelPreview';
-import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
+import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -11,7 +11,7 @@ import { primitives } from '../../theme';
 import { getDateString } from '../../utils/i18n/getDateString';
 
 export type ChannelPreviewStatusProps = Pick<
-  ChannelPreviewMessengerPropsWithContext,
+  ChannelPreviewViewPropsWithContext,
   'formatLatestMessageDate' | 'lastMessage'
 > &
   Pick<ChannelPreviewProps, 'channel'>;

package/src/components/ChannelPreview/{ChannelPreviewMessenger.tsx → ChannelPreviewView.tsx}

@@ -20,7 +20,7 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 
-export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
+export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
   Pick<
     ChannelsContextValue,
     | 'maxUnreadCount'
@@ -50,7 +50,7 @@ export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps,
     lastMessage?: LastMessageType;
   };
 
-const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsWithContext) => {
+const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext) => {
   const {
     channel,
     formatLatestMessageDate,
@@ -146,20 +146,18 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
   );
 };
 
-export type ChannelPreviewMessengerProps = Partial<
-  Omit<ChannelPreviewMessengerPropsWithContext, 'channel'>
-> &
-  Pick<ChannelPreviewMessengerPropsWithContext, 'channel'>;
+export type ChannelPreviewViewProps = Partial<Omit<ChannelPreviewViewPropsWithContext, 'channel'>> &
+  Pick<ChannelPreviewViewPropsWithContext, 'channel'>;
 
-const MemoizedChannelPreviewMessengerWithContext = React.memo(
-  ChannelPreviewMessengerWithContext,
-) as typeof ChannelPreviewMessengerWithContext;
+const MemoizedChannelPreviewViewWithContext = React.memo(
+  ChannelPreviewViewWithContext,
+) as typeof ChannelPreviewViewWithContext;
 
 /**
  * This UI component displays an individual preview item for each channel in a list. It also receives all props
  * from the ChannelPreview component.
  */
-export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) => {
+export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
   const {
     forceUpdate,
     maxUnreadCount,
@@ -172,7 +170,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
     mutedStatusPosition,
   } = useChannelsContext();
   return (
-    <MemoizedChannelPreviewMessengerWithContext
+    <MemoizedChannelPreviewViewWithContext
       {...{
         forceUpdate,
         maxUnreadCount,
@@ -189,7 +187,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
   );
 };
 
-ChannelPreviewMessenger.displayName = 'ChannelPreviewMessenger{channelPreview}';
+ChannelPreviewView.displayName = 'ChannelPreviewView{channelPreview}';
 
 const useStyles = () => {
   const {

package/src/components/ChannelPreview/__tests__/{ChannelPreviewMessenger.test.js → ChannelPreviewView.test.js}

@@ -11,16 +11,16 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
-import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
+import { ChannelPreviewView } from '../ChannelPreviewView';
 
-describe('ChannelPreviewMessenger', () => {
+describe('ChannelPreviewView', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
 
   const getComponent = (props = {}) => (
     <Chat client={chatClient}>
-      <ChannelPreviewMessenger
+      <ChannelPreviewView
         channel={channel}
         client={chatClient}
         latestMessagePreview={{

package/src/components/Chat/Chat.tsx

@@ -109,7 +109,7 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * import type { DeepPartial, Theme } from 'stream-chat-react-native';
      *
      * const theme: DeepPartial<Theme> = {
-     *   messageSimple: {
+     *   messageItemView: {
      *     file: {
      *       container: {
      *         backgroundColor: 'red',

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -41,7 +41,7 @@ export class KeyboardCompatibleView extends React.Component<
   > = {
     behavior: Platform.OS === 'ios' ? 'padding' : 'position',
     enabled: true,
-    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageInput height
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
 
   _frame: LayoutRectangle | null = null;

package/src/components/Message/Message.tsx

@@ -209,7 +209,7 @@ export type MessagePropsWithContext = Pick<
     | 'messageContentOrder'
     | 'MessageBounce'
     | 'MessageBlocked'
-    | 'MessageSimple'
+    | 'MessageItemView'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
@@ -293,7 +293,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
-    MessageSimple,
+    MessageItemView,
     onLongPressMessage: onLongPressMessageProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
@@ -865,7 +865,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           hostName={overlayActive ? 'message-overlay' : undefined}
           style={overlayActive && rect ? { width: rect.w } : undefined}
         >
-          <MessageSimple ref={messageWrapperRef} />
+          <MessageItemView ref={messageWrapperRef} />
         </Portal>
         {showMessageReactions ? (
           <BottomSheetModal
@@ -1132,7 +1132,7 @@ export const Message = (props: MessageProps) => {
 const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
   const {
     theme: {
-      messageSimple: { wrapper, targetedMessageContainer, blockedMessageContainer },
+      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
       screenPadding,
       semantics,
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessagePinnedHeader.tsx

@@ -41,7 +41,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         pinnedHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageReminderHeader.tsx

@@ -65,7 +65,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reminderHeader: { container, label, dot, time },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageSavedForLaterHeader.tsx

@@ -26,7 +26,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         savedForLaterHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/SentToChannelHeader.tsx

@@ -111,7 +111,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         sentToChannelHeader: { container, label, dot, link },
       },
     },

package/src/components/Message/{MessageSimple/MessageAvatar.tsx → MessageItemView/MessageAuthor.tsx}

@@ -9,18 +9,18 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { AvatarProps, UserAvatar } from '../../ui';
 import { avatarSizes } from '../../ui/Avatar/constants';
 
-export type MessageAvatarPropsWithContext = Pick<
+export type MessageAuthorPropsWithContext = Pick<
   MessageContextValue,
   'lastGroupMessage' | 'message' | 'showAvatar'
 > &
   Partial<Pick<AvatarProps, 'size'>>;
 
-const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
+const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
   const { lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
-      messageSimple: {
-        avatarWrapper: { container },
+      messageItemView: {
+        authorWrapper: { container },
       },
     },
   } = useTheme();
@@ -28,7 +28,7 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
   return (
-    <View style={container} testID='message-avatar'>
+    <View style={container} testID='message-author'>
       {visible && message.user ? (
         <UserAvatar user={message.user} size={size ?? 'md'} />
       ) : (
@@ -39,8 +39,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageAvatarPropsWithContext,
-  nextProps: MessageAvatarPropsWithContext,
+  prevProps: MessageAuthorPropsWithContext,
+  nextProps: MessageAuthorPropsWithContext,
 ) => {
   const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;
   const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;
@@ -61,18 +61,18 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageAvatar = React.memo(
-  MessageAvatarWithContext,
+const MemoizedMessageAuthor = React.memo(
+  MessageAuthorWithContext,
   areEqual,
-) as typeof MessageAvatarWithContext;
+) as typeof MessageAuthorWithContext;
 
-export type MessageAvatarProps = Partial<MessageAvatarPropsWithContext>;
+export type MessageAuthorProps = Partial<MessageAuthorPropsWithContext>;
 
-export const MessageAvatar = (props: MessageAvatarProps) => {
+export const MessageAuthor = (props: MessageAuthorProps) => {
   const { lastGroupMessage, message, showAvatar } = useMessageContext();
 
   return (
-    <MemoizedMessageAvatar
+    <MemoizedMessageAuthor
       {...{
         lastGroupMessage,
         message,
@@ -83,4 +83,4 @@ export const MessageAvatar = (props: MessageAvatarProps) => {
   );
 };
 
-MessageAvatar.displayName = 'MessageAvatar{messageSimple{avatarWrapper}}';
+MessageAuthor.displayName = 'MessageAuthor{messageItemView{authorWrapper}}';

package/src/components/Message/{MessageSimple → MessageItemView}/MessageBlocked.tsx

@@ -35,7 +35,7 @@ MessageBlocked.displayName = 'MessageBlocked{messageList{messageBlocked}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,