diff --git a/examples/ExpoMessaging/app/channel/[cid]/index.tsx b/examples/ExpoMessaging/app/channel/[cid]/index.tsx
index fd8c3d1861..e621096c42 100644
--- a/examples/ExpoMessaging/app/channel/[cid]/index.tsx
+++ b/examples/ExpoMessaging/app/channel/[cid]/index.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import type { Channel as StreamChatChannel } from 'stream-chat';
 import {
   Channel,
-  MessageInput,
+  MessageComposer,
   useChatContext,
   ThreadContextValue,
   MessageList,
@@ -84,7 +84,7 @@ export default function ChannelScreen() {
             router.push(`/channel/${channel.cid}/thread/${thread?.cid ?? ''}`);
           }}
         />
-        <MessageInput InputButtons={InputButtons} />
+        <MessageComposer InputButtons={InputButtons} />
       </Channel>
     </View>
   );
diff --git a/examples/SampleApp/src/components/ChannelPreview.tsx b/examples/SampleApp/src/components/ChannelPreview.tsx
index a455d79cd5..2146d9c11d 100644
--- a/examples/SampleApp/src/components/ChannelPreview.tsx
+++ b/examples/SampleApp/src/components/ChannelPreview.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
-  ChannelPreviewMessenger,
-  ChannelPreviewMessengerProps,
+  ChannelPreviewView,
+  ChannelPreviewViewProps,
   ChannelPreviewStatus,
   ChannelPreviewStatusProps,
   Pin,
@@ -54,6 +54,6 @@ const CustomChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   );
 };
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (props) => {
-  return <ChannelPreviewMessenger {...props} PreviewStatus={CustomChannelPreviewStatus} />;
+export const ChannelPreview: React.FC<ChannelPreviewViewProps> = (props) => {
+  return <ChannelPreviewView {...props} PreviewStatus={CustomChannelPreviewStatus} />;
 };
diff --git a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx
index 29b9587f8c..41b28767c9 100644
--- a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx
+++ b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx
@@ -30,7 +30,7 @@ const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithConte
   const {
     theme: {
       colors: { accent_blue, grey_gainsboro },
-      messageInput: { sendButton },
+      messageComposer: { sendButton },
     },
   } = useTheme();
 
@@ -89,7 +89,7 @@ const MemoizedNewDirectMessagingSendButton = React.memo(
 export type SendButtonProps = Partial<NewDirectMessagingSendButtonPropsWithContext>;
 
 /**
- * UI Component for send button in MessageInput component.
+ * UI Component for send button in MessageComposer component.
  */
 export const NewDirectMessagingSendButton = (props: SendButtonProps) => {
   const { chatClient } = useAppContext();
diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
index 9f5c174031..172f0edf0d 100644
--- a/examples/SampleApp/src/screens/ChannelScreen.tsx
+++ b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -4,7 +4,7 @@ import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/nati
 import {
   AlsoSentToChannelHeaderPressPayload,
   Channel,
-  MessageInput,
+  MessageComposer,
   MessageList,
   MessageFlashList,
   ThreadContextValue,
@@ -301,7 +301,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
           />
         )}
         <AITypingIndicatorView channel={channel} />
-        <MessageInput />
+        <MessageComposer />
         {modalVisible && (
           <MessageInfoBottomSheet
             visible={modalVisible}
diff --git a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx
index 0fff6220e0..ffa1e1180a 100644
--- a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx
+++ b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx
@@ -3,7 +3,7 @@ import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'r
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,
-  MessageInput,
+  MessageComposer,
   MessageList,
   User,
   UserAdd,
@@ -340,7 +340,7 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
         {results && results.length >= 0 && !focusOnSearchInput && focusOnMessageInput && (
           <MessageList />
         )}
-        <MessageInput />
+        <MessageComposer />
       </Channel>
     </SafeAreaView>
   );
diff --git a/examples/SampleApp/src/screens/SharedGroupsScreen.tsx b/examples/SampleApp/src/screens/SharedGroupsScreen.tsx
index 8067c2407f..a792b77488 100644
--- a/examples/SampleApp/src/screens/SharedGroupsScreen.tsx
+++ b/examples/SampleApp/src/screens/SharedGroupsScreen.tsx
@@ -3,9 +3,9 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { NavigationProp, RouteProp, useNavigation } from '@react-navigation/native';
 import {
   ChannelList,
-  ChannelListMessenger,
-  ChannelListMessengerProps,
-  ChannelPreviewMessengerProps,
+  ChannelListView,
+  ChannelListViewProps,
+  ChannelPreviewViewProps,
   getChannelPreviewDisplayAvatar,
   GroupAvatar,
   useChannelPreviewDisplayName,
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type CustomPreviewProps = ChannelPreviewMessengerProps;
+type CustomPreviewProps = ChannelPreviewViewProps;
 
 const CustomPreview: React.FC<CustomPreviewProps> = ({ channel }) => {
   const { chatClient } = useAppContext();
@@ -150,7 +150,7 @@ const EmptyListComponent = () => {
   );
 };
 
-type ListComponentProps = ChannelListMessengerProps;
+type ListComponentProps = ChannelListViewProps;
 
 // If the length of channels is 1, which means we only got 1:1-distinct channel,
 // And we don't want to show 1:1-distinct channel in this list.
@@ -161,7 +161,7 @@ const ListComponent: React.FC<ListComponentProps> = (props) => {
     return <EmptyListComponent />;
   }
 
-  return <ChannelListMessenger {...props} />;
+  return <ChannelListView {...props} />;
 };
 
 type SharedGroupsScreenRouteProp = RouteProp<StackNavigatorParamList, 'SharedGroupsScreen'>;
diff --git a/examples/TypeScriptMessaging/App.tsx b/examples/TypeScriptMessaging/App.tsx
index 49399cb22b..df137ebf31 100644
--- a/examples/TypeScriptMessaging/App.tsx
+++ b/examples/TypeScriptMessaging/App.tsx
@@ -16,7 +16,7 @@ import {
   Channel,
   ChannelList,
   Chat,
-  MessageInput,
+  MessageComposer,
   MessageList,
   OverlayProvider,
   SqliteClient,
@@ -132,7 +132,7 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
               }
             }}
           />
-          <MessageInput />
+          <MessageComposer />
         </View>
       </Channel>
     </SafeAreaView>
diff --git a/package/src/__tests__/offline-support/offline-feature.js b/package/src/__tests__/offline-support/offline-feature.js
index 39da50ad11..9bfbab93f9 100644
--- a/package/src/__tests__/offline-support/offline-feature.js
+++ b/package/src/__tests__/offline-support/offline-feature.js
@@ -44,7 +44,7 @@ import { BetterSqlite } from '../../test-utils/BetterSqlite';
 
 /**
  * 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.
  */
diff --git a/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx b/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx
index 489521c2c2..ee8305d608 100644
--- a/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx
+++ b/package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx
@@ -34,7 +34,7 @@ export const AITypingIndicatorView = ({
   ) : null;
 };
 
-AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
+AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageItemView{content}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Attachment/Audio/AudioAttachment.tsx b/package/src/components/Attachment/Audio/AudioAttachment.tsx
index a465ec40f2..14b4eca54f 100644
--- a/package/src/components/Attachment/Audio/AudioAttachment.tsx
+++ b/package/src/components/Attachment/Audio/AudioAttachment.tsx
@@ -187,7 +187,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
         rightContainer,
       },
       semantics,
-      messageInput: {
+      messageComposer: {
         fileAttachmentUploadPreview: { filenameText },
       },
     },
@@ -354,4 +354,4 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-AudioAttachment.displayName = 'AudioAttachment{messageInput{audioAttachment}}';
+AudioAttachment.displayName = 'AudioAttachment{messageComposer{audioAttachment}}';
diff --git a/package/src/components/Attachment/FileAttachment.tsx b/package/src/components/Attachment/FileAttachment.tsx
index 16fc95b084..4cc79069a4 100644
--- a/package/src/components/Attachment/FileAttachment.tsx
+++ b/package/src/components/Attachment/FileAttachment.tsx
@@ -120,7 +120,7 @@ export const FileAttachment = (props: FileAttachmentProps) => {
   );
 };
 
-FileAttachment.displayName = 'FileAttachment{messageSimple{file}}';
+FileAttachment.displayName = 'FileAttachment{messageItemView{file}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Attachment/FileAttachmentGroup.tsx b/package/src/components/Attachment/FileAttachmentGroup.tsx
index 43b1cc501b..5fd9ff78df 100644
--- a/package/src/components/Attachment/FileAttachmentGroup.tsx
+++ b/package/src/components/Attachment/FileAttachmentGroup.tsx
@@ -28,7 +28,7 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         fileAttachmentGroup: { attachmentContainer, container },
       },
     },
@@ -106,4 +106,4 @@ const styles = StyleSheet.create({
   },
 });
 
-FileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';
+FileAttachmentGroup.displayName = 'FileAttachmentGroup{messageItemView{fileAttachmentGroup}}';
diff --git a/package/src/components/Attachment/FileIcon.tsx b/package/src/components/Attachment/FileIcon.tsx
index 55891f5c44..7925de0d8c 100644
--- a/package/src/components/Attachment/FileIcon.tsx
+++ b/package/src/components/Attachment/FileIcon.tsx
@@ -421,7 +421,7 @@ const sizeToNumber = (size?: 'sm' | 'md' | 'lg') => {
 export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         file: { icon },
       },
     },
@@ -432,4 +432,4 @@ export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
   return <Icon {...(size ? sizeToNumber(size) : {})} {...icon} />;
 };
 
-FileIcon.displayName = 'FileIcon{messageSimple{file{icon}}}';
+FileIcon.displayName = 'FileIcon{messageItemView{file{icon}}}';
diff --git a/package/src/components/Attachment/FilePreview.tsx b/package/src/components/Attachment/FilePreview.tsx
index aac9b82eb3..5acf4550d0 100644
--- a/package/src/components/Attachment/FilePreview.tsx
+++ b/package/src/components/Attachment/FilePreview.tsx
@@ -43,7 +43,7 @@ export const FilePreview = (props: FilePreviewProps) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         file: { container, details, fileSize, title },
       },
     },
@@ -70,7 +70,7 @@ export const FilePreview = (props: FilePreviewProps) => {
   );
 };
 
-FilePreview.displayName = 'FilePreview{messageSimple{file}}';
+FilePreview.displayName = 'FilePreview{messageItemView{file}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Attachment/Gallery.tsx b/package/src/components/Attachment/Gallery.tsx
index 63be6b1442..936b90eac4 100644
--- a/package/src/components/Attachment/Gallery.tsx
+++ b/package/src/components/Attachment/Gallery.tsx
@@ -89,7 +89,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
@@ -261,7 +261,7 @@ const GalleryThumbnail = ({
 }: GalleryThumbnailProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         gallery: { image, imageBorderRadius, imageContainer, moreImagesContainer, moreImagesText },
       },
       semantics,
@@ -389,7 +389,7 @@ const GalleryImageThumbnail = ({
 
   const {
     theme: {
-      messageSimple: { gallery },
+      messageItemView: { gallery },
     },
   } = useTheme();
 
@@ -667,4 +667,4 @@ const useStyles = () => {
   }, [semantics, isMyMessage]);
 };
 
-Gallery.displayName = 'Gallery{messageSimple{gallery}}';
+Gallery.displayName = 'Gallery{messageItemView{gallery}}';
diff --git a/package/src/components/Attachment/Giphy/Giphy.tsx b/package/src/components/Attachment/Giphy/Giphy.tsx
index c07f4b821d..62cfe3eca8 100644
--- a/package/src/components/Attachment/Giphy/Giphy.tsx
+++ b/package/src/components/Attachment/Giphy/Giphy.tsx
@@ -45,7 +45,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         giphy: {
           actionButtonContainer,
           actionButton,
@@ -210,7 +210,7 @@ export const Giphy = (props: GiphyProps) => {
   );
 };
 
-Giphy.displayName = 'Giphy{messageSimple{giphy}}';
+Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Attachment/Giphy/GiphyImage.tsx b/package/src/components/Attachment/Giphy/GiphyImage.tsx
index f9c016283f..1cf9a650a8 100644
--- a/package/src/components/Attachment/Giphy/GiphyImage.tsx
+++ b/package/src/components/Attachment/Giphy/GiphyImage.tsx
@@ -49,7 +49,7 @@ const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         giphy: { giphyMask, giphy, imageIndicatorContainer },
       },
     },
diff --git a/package/src/components/Attachment/UnsupportedAttachment.tsx b/package/src/components/Attachment/UnsupportedAttachment.tsx
index 7b272a7a3f..a4ed9361bc 100644
--- a/package/src/components/Attachment/UnsupportedAttachment.tsx
+++ b/package/src/components/Attachment/UnsupportedAttachment.tsx
@@ -34,7 +34,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         unsupportedAttachment: { container, details, title },
       },
     },
@@ -53,7 +53,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
   );
 };
 
-UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageSimple{file}}';
+UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageItemView{file}}';
 
 const useStyles = ({ isMyMessage }: { isMyMessage: boolean }) => {
   const {
diff --git a/package/src/components/Attachment/UrlPreview/URLPreview.tsx b/package/src/components/Attachment/UrlPreview/URLPreview.tsx
index 8d25fd86d8..20191513ce 100644
--- a/package/src/components/Attachment/UrlPreview/URLPreview.tsx
+++ b/package/src/components/Attachment/UrlPreview/URLPreview.tsx
@@ -73,7 +73,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         card: {
           container,
           cover,
@@ -292,4 +292,4 @@ const useStyles = () => {
   );
 };
 
-URLPreview.displayName = 'URLPreview{messageSimple{card}}';
+URLPreview.displayName = 'URLPreview{messageItemView{card}}';
diff --git a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
index c6692e4236..e94e848c2f 100644
--- a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
+++ b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx
@@ -69,7 +69,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         compactUrlPreview: {
           wrapper,
           container,
@@ -296,4 +296,4 @@ const useStyles = () => {
   );
 };
 
-URLPreviewCompact.displayName = 'URLPreviewCompact{messageSimple{urlPreviewCompact}}';
+URLPreviewCompact.displayName = 'URLPreviewCompact{messageItemView{urlPreviewCompact}}';
diff --git a/package/src/components/Attachment/VideoThumbnail.tsx b/package/src/components/Attachment/VideoThumbnail.tsx
index 7c2a19f079..43210eea6f 100644
--- a/package/src/components/Attachment/VideoThumbnail.tsx
+++ b/package/src/components/Attachment/VideoThumbnail.tsx
@@ -22,7 +22,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         videoThumbnail: { container },
       },
     },
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx b/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
index e45cd56fb9..2dca35e341 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
@@ -50,7 +50,7 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<MessageInputContextValue, 'setInputBoxRef'> &
   Pick<TranslationContextValue, 't'> & {
     /**
-     * This is currently passed in from MessageInput to avoid rerenders
+     * This is currently passed in from MessageComposer to avoid rerenders
      * that would happen if we put this in the MessageInputContext
      */
     cooldownRemainingSeconds?: number;
@@ -134,7 +134,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   const {
     theme: {
-      messageInput: { inputBox },
+      messageComposer: { inputBox },
       semantics,
     },
   } = useTheme();
@@ -258,4 +258,4 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-AutoCompleteInput.displayName = 'AutoCompleteInput{messageInput{inputBox}}';
+AutoCompleteInput.displayName = 'AutoCompleteInput{messageComposer{inputBox}}';
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
index 74b0902af4..1102ce917a 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx
@@ -35,7 +35,7 @@ export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
 export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { iconContainer },
         },
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
index 3c05f50727..ce3a9fac2a 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx
@@ -15,7 +15,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -39,7 +39,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ queryText }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -102,7 +102,7 @@ export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeader
 );
 
 AutoCompleteSuggestionHeader.displayName =
-  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
+  'AutoCompleteSuggestionHeader{messageComposer{suggestions{Header}}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
index 8009749cad..8b27b5ef7f 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
@@ -21,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
         },
@@ -46,7 +46,7 @@ export const EmojiSuggestionItem = (item: Emoji) => {
   const { native, name } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           emoji: { container: emojiContainer, text },
         },
@@ -72,7 +72,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { args: argsStyle, container: commandContainer, title },
         },
@@ -128,7 +128,7 @@ const UnMemoizedAutoCompleteSuggestionItem = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: { item: itemStyle },
       },
     },
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
index 455d8efd3c..07988eaa55 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
@@ -62,7 +62,7 @@ export const AutoCompleteSuggestionList = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         container: { maxHeight },
       },
     },
@@ -116,7 +116,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestionsListContainer: { flatlist },
       },
     },
@@ -150,4 +150,4 @@ const useStyles = () => {
 };
 
 AutoCompleteSuggestionList.displayName =
-  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';
+  'AutoCompleteSuggestionList{messageComposer{suggestions{List}}}';
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
index 6f6bee61fe..01d5a54f81 100644
--- a/package/src/components/Channel/Channel.tsx
+++ b/package/src/components/Channel/Channel.tsx
@@ -144,31 +144,31 @@ import {
   KeyboardCompatibleViewProps,
 } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
-import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
-import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageSimple/Headers/MessageReminderHeader';
-import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageSimple/Headers/MessageSavedForLaterHeader';
-import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageSimple/Headers/SentToChannelHeader';
-import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
-import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
-import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
-import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
-import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
-import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
-import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
-import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
-import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
-import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
-import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
-import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
-import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageSimple/MessageSwipeContent';
-import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
-import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
-import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageSimple/ReactionList/ReactionListClustered';
-import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
-import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
-import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageSimple/ReactionList/ReactionListItemWrapper';
-import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
-import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
+import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageItemView/Headers/MessagePinnedHeader';
+import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageItemView/Headers/MessageReminderHeader';
+import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageItemView/Headers/MessageSavedForLaterHeader';
+import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageItemView/Headers/SentToChannelHeader';
+import { MessageAuthor as MessageAuthorDefault } from '../Message/MessageItemView/MessageAuthor';
+import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageItemView/MessageBlocked';
+import { MessageBounce as MessageBounceDefault } from '../Message/MessageItemView/MessageBounce';
+import { MessageContent as MessageContentDefault } from '../Message/MessageItemView/MessageContent';
+import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageItemView/MessageDeleted';
+import { MessageError as MessageErrorDefault } from '../Message/MessageItemView/MessageError';
+import { MessageFooter as MessageFooterDefault } from '../Message/MessageItemView/MessageFooter';
+import { MessageHeader as MessageHeaderDefault } from '../Message/MessageItemView/MessageHeader';
+import { MessageItemView as MessageItemViewDefault } from '../Message/MessageItemView/MessageItemView';
+import { MessageReplies as MessageRepliesDefault } from '../Message/MessageItemView/MessageReplies';
+import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageItemView/MessageRepliesAvatars';
+import { MessageStatus as MessageStatusDefault } from '../Message/MessageItemView/MessageStatus';
+import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageItemView/MessageSwipeContent';
+import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageItemView/MessageTimestamp';
+import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageItemView/ReactionList/ReactionListBottom';
+import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageItemView/ReactionList/ReactionListClustered';
+import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageItemView/ReactionList/ReactionListTop';
+import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageItemView/StreamingMessageView';
 import { AttachmentUploadPreviewList as AttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 import { FileUploadInProgressIndicator as FileUploadInProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
 import { FileUploadRetryIndicator as FileUploadRetryIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
@@ -367,11 +367,15 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageActionList'
       | 'MessageActionListItem'
       | 'messageActions'
-      | 'MessageAvatar'
+      | 'MessageAuthor'
       | 'MessageBounce'
       | 'MessageBlocked'
       | 'MessageContent'
+      | 'MessageContentBottomView'
+      | 'MessageContentLeadingView'
       | 'messageContentOrder'
+      | 'MessageContentTrailingView'
+      | 'MessageContentTopView'
       | 'MessageDeleted'
       | 'MessageError'
       | 'MessageFooter'
@@ -385,7 +389,8 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'SentToChannelHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
-      | 'MessageSimple'
+      | 'MessageSpacer'
+      | 'MessageItemView'
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
@@ -685,10 +690,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageActionList = MessageActionListDefault,
     MessageActionListItem = MessageActionListItemDefault,
     messageActions,
-    MessageAvatar = MessageAvatarDefault,
+    MessageAuthor = MessageAuthorDefault,
     MessageBlocked = MessageBlockedDefault,
     MessageBounce = MessageBounceDefault,
     MessageContent = MessageContentDefault,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageContentOrder = [
       'quoted_reply',
       'gallery',
@@ -699,6 +706,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       'text',
       'location',
     ],
+    MessageContentTrailingView,
+    MessageContentTopView,
     MessageDeleted = MessageDeletedDefault,
     MessageError = MessageErrorDefault,
     messageInputFloating = false,
@@ -719,7 +728,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
-    MessageSimple = MessageSimpleDefault,
+    MessageSpacer,
+    MessageItemView = MessageItemViewDefault,
     MessageStatus = MessageStatusDefault,
     MessageSwipeContent = MessageSwipeContentDefault,
     messageSwipeToReplyHitSlop,
@@ -1968,11 +1978,15 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageActionList,
     MessageActionListItem,
     messageActions,
-    MessageAvatar,
+    MessageAuthor,
     MessageBlocked,
     MessageBounce,
     MessageContent,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageContentOrder,
+    MessageContentTrailingView,
+    MessageContentTopView,
     MessageDeleted,
     MessageError,
     MessageFooter,
@@ -1987,7 +2001,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
-    MessageSimple,
+    MessageSpacer,
+    MessageItemView,
     MessageStatus,
     MessageSwipeContent,
     messageSwipeToReplyHitSlop,
@@ -2119,7 +2134,7 @@ export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'th
 /**
  *
  * The wrapper component for a chat channel. Channel needs to be placed inside a Chat component
- * to receive the StreamChat client instance. MessageList, Thread, and MessageInput must be
+ * to receive the StreamChat client instance. MessageList, Thread, and MessageComposer must be
  * children of the Channel component to receive the ChannelContext.
  *
  * @example ./Channel.md
diff --git a/package/src/components/Channel/__tests__/ownCapabilities.test.js b/package/src/components/Channel/__tests__/ownCapabilities.test.js
index b12e2f874d..6b6af3705d 100644
--- a/package/src/components/Channel/__tests__/ownCapabilities.test.js
+++ b/package/src/components/Channel/__tests__/ownCapabilities.test.js
@@ -17,7 +17,7 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { registerNativeHandlers } from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../../MessageInput/MessageInput';
+import { MessageComposer } from '../../MessageInput/MessageComposer';
 import { MessageList } from '../../MessageList/MessageList';
 
 describe('Own capabilities', () => {
@@ -54,7 +54,7 @@ describe('Own capabilities', () => {
         <Chat client={chatClient}>
           <Channel channel={channel} {...props}>
             <MessageList FlatList={FlatList} />
-            <MessageInput />
+            <MessageComposer />
           </Channel>
         </Chat>
       </OverlayProvider>
diff --git a/package/src/components/Channel/hooks/useCreateMessagesContext.ts b/package/src/components/Channel/hooks/useCreateMessagesContext.ts
index f5a4848605..2f21318b6d 100644
--- a/package/src/components/Channel/hooks/useCreateMessagesContext.ts
+++ b/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,
diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx
index cbb860bf54..79196f1bb7 100644
--- a/package/src/components/ChannelList/ChannelList.tsx
+++ b/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,
diff --git a/package/src/components/ChannelList/ChannelListMessenger.tsx b/package/src/components/ChannelList/ChannelListView.tsx
similarity index 91%
rename from package/src/components/ChannelList/ChannelListMessenger.tsx
rename to package/src/components/ChannelList/ChannelListView.tsx
index f98ce6502b..5655904571 100644
--- a/package/src/components/ChannelList/ChannelListMessenger.tsx
+++ b/package/src/components/ChannelList/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(() => {
diff --git a/package/src/components/ChannelList/__tests__/ChannelList.test.js b/package/src/components/ChannelList/__tests__/ChannelList.test.js
index 8ea4a368d0..2b1228ae99 100644
--- a/package/src/components/ChannelList/__tests__/ChannelList.test.js
+++ b/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();
diff --git a/package/src/components/ChannelList/__tests__/ChannelListMessenger.test.js b/package/src/components/ChannelList/__tests__/ChannelListView.test.js
similarity index 94%
rename from package/src/components/ChannelList/__tests__/ChannelListMessenger.test.js
rename to package/src/components/ChannelList/__tests__/ChannelListView.test.js
index f6367c2fa2..17491b1629 100644
--- a/package/src/components/ChannelList/__tests__/ChannelListMessenger.test.js
+++ b/package/src/components/ChannelList/__tests__/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();
     });
   });
 
diff --git a/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx b/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx
index 643e9cef99..6e7eb96f82 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx
+++ b/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'>;
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewView.tsx
similarity index 89%
rename from package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
rename to package/src/components/ChannelPreview/ChannelPreviewView.tsx
index 7379fe2fe7..acf231abcd 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
+++ b/package/src/components/ChannelPreview/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 {
diff --git a/package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js b/package/src/components/ChannelPreview/__tests__/ChannelPreviewView.test.js
similarity index 95%
rename from package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
rename to package/src/components/ChannelPreview/__tests__/ChannelPreviewView.test.js
index 09471b4b13..a023b9bc1e 100644
--- a/package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js
+++ b/package/src/components/ChannelPreview/__tests__/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={{
diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
index 6dbd045e9c..8efe65ff4b 100644
--- a/package/src/components/Chat/Chat.tsx
+++ b/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',
diff --git a/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx b/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx
index a66df1de77..913761fdec 100644
--- a/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx
+++ b/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;
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
index b6f97e2e5a..fa82ed8079 100644
--- a/package/src/components/Message/Message.tsx
+++ b/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,
     },
diff --git a/package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx
rename to package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
index 0178715f0a..646dd10408 100644
--- a/package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx
@@ -41,7 +41,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         pinnedHeader: { container, label },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/Headers/MessageReminderHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/Headers/MessageReminderHeader.tsx
rename to package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
index 897d3dd5bf..578e417e2b 100644
--- a/package/src/components/Message/MessageSimple/Headers/MessageReminderHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx
@@ -65,7 +65,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reminderHeader: { container, label, dot, time },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/Headers/MessageSavedForLaterHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/Headers/MessageSavedForLaterHeader.tsx
rename to package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
index 75fd97ef81..7cb41a6164 100644
--- a/package/src/components/Message/MessageSimple/Headers/MessageSavedForLaterHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx
@@ -26,7 +26,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         savedForLaterHeader: { container, label },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/Headers/SentToChannelHeader.tsx b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/Headers/SentToChannelHeader.tsx
rename to package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
index cee7b0a02c..d890cc94cf 100644
--- a/package/src/components/Message/MessageSimple/Headers/SentToChannelHeader.tsx
+++ b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx
@@ -111,7 +111,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         sentToChannelHeader: { container, label, dot, link },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/Headers/index.tsx b/package/src/components/Message/MessageItemView/Headers/index.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/Headers/index.tsx
rename to package/src/components/Message/MessageItemView/Headers/index.tsx
diff --git a/package/src/components/Message/MessageSimple/MessageAvatar.tsx b/package/src/components/Message/MessageItemView/MessageAuthor.tsx
similarity index 72%
rename from package/src/components/Message/MessageSimple/MessageAvatar.tsx
rename to package/src/components/Message/MessageItemView/MessageAuthor.tsx
index 032e8fa66d..369b27bc10 100644
--- a/package/src/components/Message/MessageSimple/MessageAvatar.tsx
+++ b/package/src/components/Message/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}}';
diff --git a/package/src/components/Message/MessageSimple/MessageBlocked.tsx b/package/src/components/Message/MessageItemView/MessageBlocked.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/MessageBlocked.tsx
rename to package/src/components/Message/MessageItemView/MessageBlocked.tsx
index b4465ed8a2..d4869e838d 100644
--- a/package/src/components/Message/MessageSimple/MessageBlocked.tsx
+++ b/package/src/components/Message/MessageItemView/MessageBlocked.tsx
@@ -35,7 +35,7 @@ MessageBlocked.displayName = 'MessageBlocked{messageList{messageBlocked}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,
diff --git a/package/src/components/Message/MessageSimple/MessageBounce.tsx b/package/src/components/Message/MessageItemView/MessageBounce.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/MessageBounce.tsx
rename to package/src/components/Message/MessageItemView/MessageBounce.tsx
diff --git a/package/src/components/Message/MessageSimple/MessageBubble.tsx b/package/src/components/Message/MessageItemView/MessageBubble.tsx
similarity index 97%
rename from package/src/components/Message/MessageSimple/MessageBubble.tsx
rename to package/src/components/Message/MessageItemView/MessageBubble.tsx
index 29eff6e8e8..78f5514437 100644
--- a/package/src/components/Message/MessageSimple/MessageBubble.tsx
+++ b/package/src/components/Message/MessageItemView/MessageBubble.tsx
@@ -11,7 +11,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { MessageContentProps } from './MessageContent';
-import { MessageSimplePropsWithContext } from './MessageSimple';
+import { MessageItemViewPropsWithContext } from './MessageItemView';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
@@ -36,7 +36,7 @@ export type MessageBubbleProps = Pick<
     | 'message'
     | 'setMessageContentWidth'
   > &
-  Pick<MessageSimplePropsWithContext, 'alignment'> & {
+  Pick<MessageItemViewPropsWithContext, 'alignment'> & {
     messageContentWidth: number;
   };
 
@@ -93,7 +93,7 @@ export const SwipableMessageBubble = React.memo(
     props: MessageBubbleProps &
       Pick<MessagesContextValue, 'MessageSwipeContent'> &
       Pick<
-        MessageSimplePropsWithContext,
+        MessageItemViewPropsWithContext,
         'shouldRenderSwipeableWrapper' | 'messageSwipeToReplyHitSlop'
       > & { onSwipe: () => void },
   ) => {
@@ -216,7 +216,7 @@ export const SwipableMessageBubble = React.memo(
 const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
         contentWrapper,
         swipeContentContainer,
diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageItemView/MessageContent.tsx
similarity index 77%
rename from package/src/components/Message/MessageSimple/MessageContent.tsx
rename to package/src/components/Message/MessageItemView/MessageContent.tsx
index 377aac46a0..73af2ae56a 100644
--- a/package/src/components/Message/MessageSimple/MessageContent.tsx
+++ b/package/src/components/Message/MessageItemView/MessageContent.tsx
@@ -57,6 +57,7 @@ const useReplyStyles = () => {
 
 export type MessageContentPropsWithContext = Pick<
   MessageContextValue,
+  | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
   | 'isMyMessage'
@@ -78,7 +79,11 @@ export type MessageContentPropsWithContext = Pick<
     | 'FileAttachmentGroup'
     | 'Gallery'
     | 'isAttachmentEqual'
+    | 'MessageContentBottomView'
+    | 'MessageContentLeadingView'
     | 'MessageLocation'
+    | 'MessageContentTrailingView'
+    | 'MessageContentTopView'
     | 'myMessageTheme'
     | 'Reply'
     | 'StreamingMessageView'
@@ -112,11 +117,12 @@ export type MessageContentPropsWithContext = Pick<
   };
 
 /**
- * Child of MessageSimple that displays a message's content
+ * Child of MessageItemView that displays a message's content
  */
 const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
+    alignment,
     Attachment,
     backgroundColor,
     enableMessageGroupingByUser,
@@ -128,8 +134,12 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     isVeryLastMessage,
     message,
     messageContentOrder,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageGroupedSingleOrBottom = false,
     MessageLocation,
+    MessageContentTrailingView,
+    MessageContentTopView,
     noBorder,
     onLongPress,
     onPress,
@@ -149,7 +159,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         content: {
           container: {
             borderBottomLeftRadius,
@@ -227,6 +237,83 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   };
 
   const { setNativeScrollability } = useMessageListItemContext();
+  const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
+
+  const contentBody = (
+    <>
+      <View
+        style={[
+          {
+            gap: primitives.spacingXs,
+            paddingTop: hidePaddingTop ? 0 : primitives.spacingXs,
+            paddingHorizontal: hidePaddingHorizontal ? 0 : primitives.spacingXs,
+            paddingBottom: hidePaddingBottom ? 0 : primitives.spacingXs,
+          },
+          contentContainer,
+        ]}
+      >
+        {messageContentOrder.map((messageContentType, messageContentOrderIndex) => {
+          switch (messageContentType) {
+            case 'quoted_reply':
+              return (
+                message.quoted_message && (
+                  <View
+                    key={`quoted_reply_${messageContentOrderIndex}`}
+                    style={[styles.replyContainer, replyContainer]}
+                  >
+                    <Reply mode='reply' styles={replyStyles} />
+                  </View>
+                )
+              );
+            case 'attachments':
+              return otherAttachments.map((attachment, attachmentIndex) => (
+                <Attachment attachment={attachment} key={`${message.id}-${attachmentIndex}`} />
+              ));
+            case 'files':
+              return (
+                <FileAttachmentGroup key={`file_attachment_group_${messageContentOrderIndex}`} />
+              );
+            case 'gallery':
+              return (
+                <View key={`gallery_${messageContentOrderIndex}`} style={styles.galleryContainer}>
+                  <Gallery />
+                </View>
+              );
+            case 'poll': {
+              const pollId = message.poll_id;
+              const poll = pollId && client.polls.fromState(pollId);
+              return pollId && poll ? (
+                <Poll
+                  key={`poll_${message.poll_id}`}
+                  message={message}
+                  poll={poll}
+                  PollContent={PollContentOverride}
+                />
+              ) : null;
+            }
+            case 'location':
+              return MessageLocation ? (
+                <MessageLocation
+                  key={`message_location_${messageContentOrderIndex}`}
+                  message={message}
+                />
+              ) : null;
+            case 'ai_text':
+              return isAIGenerated ? (
+                <StreamingMessageView
+                  key={`ai_message_text_container_${messageContentOrderIndex}`}
+                />
+              ) : null;
+            default:
+              return null;
+          }
+        })}
+      </View>
+      {(otherAttachments.length && otherAttachments[0].actions) || isAIGenerated ? null : (
+        <MessageTextContainer />
+      )}
+    </>
+  );
 
   return (
     <Pressable
@@ -284,82 +371,23 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           ]}
           testID='message-content-wrapper'
         >
-          <View
-            style={[
-              {
-                gap: primitives.spacingXs,
-                paddingTop: hidePaddingTop ? 0 : primitives.spacingXs,
-                paddingHorizontal: hidePaddingHorizontal ? 0 : primitives.spacingXs,
-                paddingBottom: hidePaddingBottom ? 0 : primitives.spacingXs,
-              },
-              contentContainer,
-            ]}
-          >
-            {messageContentOrder.map((messageContentType, messageContentOrderIndex) => {
-              switch (messageContentType) {
-                case 'quoted_reply':
-                  return (
-                    message.quoted_message && (
-                      <View
-                        key={`quoted_reply_${messageContentOrderIndex}`}
-                        style={[styles.replyContainer, replyContainer]}
-                      >
-                        <Reply mode='reply' styles={replyStyles} />
-                      </View>
-                    )
-                  );
-                case 'attachments':
-                  return otherAttachments.map((attachment, attachmentIndex) => (
-                    <Attachment attachment={attachment} key={`${message.id}-${attachmentIndex}`} />
-                  ));
-                case 'files':
-                  return (
-                    <FileAttachmentGroup
-                      key={`file_attachment_group_${messageContentOrderIndex}`}
-                    />
-                  );
-                case 'gallery':
-                  return (
-                    <View
-                      key={`gallery_${messageContentOrderIndex}`}
-                      style={styles.galleryContainer}
-                    >
-                      <Gallery />
-                    </View>
-                  );
-                case 'poll': {
-                  const pollId = message.poll_id;
-                  const poll = pollId && client.polls.fromState(pollId);
-                  return pollId && poll ? (
-                    <Poll
-                      key={`poll_${message.poll_id}`}
-                      message={message}
-                      poll={poll}
-                      PollContent={PollContentOverride}
-                    />
-                  ) : null;
-                }
-                case 'location':
-                  return MessageLocation ? (
-                    <MessageLocation
-                      key={`message_location_${messageContentOrderIndex}`}
-                      message={message}
-                    />
-                  ) : null;
-                case 'ai_text':
-                  return isAIGenerated ? (
-                    <StreamingMessageView
-                      key={`ai_message_text_container_${messageContentOrderIndex}`}
-                    />
-                  ) : null;
-                default:
-                  return null;
-              }
-            })}
-          </View>
-          {(otherAttachments.length && otherAttachments[0].actions) || isAIGenerated ? null : (
-            <MessageTextContainer />
+          {MessageContentTopView ? <MessageContentTopView /> : null}
+          {hasContentSideViews ? (
+            <View
+              style={[
+                styles.contentRow,
+                alignment === 'right' ? styles.rightAlignContentRow : undefined,
+              ]}
+              testID='message-content-row'
+            >
+              {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
+              <View style={styles.contentBody}>{contentBody}</View>
+              {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
+            </View>
+          ) : (
+            contentBody
           )}
+          {MessageContentBottomView ? <MessageContentBottomView /> : null}
         </View>
       </View>
     </Pressable>
@@ -371,6 +399,7 @@ const areEqual = (
   nextProps: MessageContentPropsWithContext,
 ) => {
   const {
+    alignment: prevAlignment,
     backgroundColor: prevBackgroundColor,
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
@@ -383,6 +412,7 @@ const areEqual = (
     t: prevT,
   } = prevProps;
   const {
+    alignment: nextAlignment,
     backgroundColor: nextBackgroundColor,
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
@@ -398,6 +428,10 @@ const areEqual = (
     return false;
   }
 
+  if (prevAlignment !== nextAlignment) {
+    return false;
+  }
+
   if (prevPreventPress !== nextPreventPress) {
     return false;
   }
@@ -523,10 +557,11 @@ export type MessageContentProps = Partial<
   Pick<MessageContentPropsWithContext, 'setMessageContentWidth'>;
 
 /**
- * Child of MessageSimple that displays a message's content
+ * Child of MessageItemView that displays a message's content
  */
 export const MessageContent = (props: MessageContentProps) => {
   const {
+    alignment,
     goToMessage,
     groupStyles,
     isMessageAIGenerated,
@@ -550,7 +585,11 @@ export const MessageContent = (props: MessageContentProps) => {
     FileAttachmentGroup,
     Gallery,
     isAttachmentEqual,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     MessageLocation,
+    MessageContentTrailingView,
+    MessageContentTopView,
     myMessageTheme,
     Reply,
     StreamingMessageView,
@@ -593,6 +632,7 @@ export const MessageContent = (props: MessageContentProps) => {
     <MemoizedMessageContent
       {...{
         additionalPressableProps,
+        alignment,
         Attachment,
         enableMessageGroupingByUser,
         FileAttachmentGroup,
@@ -604,7 +644,11 @@ export const MessageContent = (props: MessageContentProps) => {
         isMyMessage,
         message,
         messageContentOrder,
+        MessageContentBottomView,
+        MessageContentLeadingView,
         MessageLocation,
+        MessageContentTrailingView,
+        MessageContentTopView,
         myMessageTheme,
         onLongPress,
         onPress,
@@ -633,6 +677,16 @@ const styles = StyleSheet.create({
     borderTopRightRadius: components.messageBubbleRadiusGroupBottom,
     overflow: 'hidden',
   },
+  contentBody: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  contentRow: {
+    flexDirection: 'row',
+  },
+  rightAlignContentRow: {
+    flexDirection: 'row-reverse',
+  },
   leftAlignContent: {
     justifyContent: 'flex-start',
   },
diff --git a/package/src/components/Message/MessageSimple/MessageDeleted.tsx b/package/src/components/Message/MessageItemView/MessageDeleted.tsx
similarity index 97%
rename from package/src/components/Message/MessageSimple/MessageDeleted.tsx
rename to package/src/components/Message/MessageItemView/MessageDeleted.tsx
index 2866c6d5ad..4325d9e6c7 100644
--- a/package/src/components/Message/MessageSimple/MessageDeleted.tsx
+++ b/package/src/components/Message/MessageItemView/MessageDeleted.tsx
@@ -28,7 +28,7 @@ const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         deleted: { containerInner, deletedText, container },
       },
       semantics,
@@ -125,13 +125,13 @@ export const MessageDeleted = (props: MessageDeletedProps) => {
   );
 };
 
-MessageDeleted.displayName = 'MessageDeleted{messageSimple{content}}';
+MessageDeleted.displayName = 'MessageDeleted{messageItemView{content}}';
 
 const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         deleted: { containerInner, deletedText, container },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/MessageError.tsx b/package/src/components/Message/MessageItemView/MessageError.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/MessageError.tsx
rename to package/src/components/Message/MessageItemView/MessageError.tsx
diff --git a/package/src/components/Message/MessageSimple/MessageFooter.tsx b/package/src/components/Message/MessageItemView/MessageFooter.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/MessageFooter.tsx
rename to package/src/components/Message/MessageItemView/MessageFooter.tsx
index b439fbc74c..d5b06caf18 100644
--- a/package/src/components/Message/MessageSimple/MessageFooter.tsx
+++ b/package/src/components/Message/MessageItemView/MessageFooter.tsx
@@ -56,7 +56,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         footer: { container, name, editedText },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/MessageHeader.tsx b/package/src/components/Message/MessageItemView/MessageHeader.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/MessageHeader.tsx
rename to package/src/components/Message/MessageItemView/MessageHeader.tsx
diff --git a/package/src/components/Message/MessageSimple/MessageSimple.tsx b/package/src/components/Message/MessageItemView/MessageItemView.tsx
similarity index 64%
rename from package/src/components/Message/MessageSimple/MessageSimple.tsx
rename to package/src/components/Message/MessageItemView/MessageItemView.tsx
index 5a43f45af8..5f778db1ba 100644
--- a/package/src/components/Message/MessageSimple/MessageSimple.tsx
+++ b/package/src/components/Message/MessageItemView/MessageItemView.tsx
@@ -41,7 +41,7 @@ const useStyles = ({
 }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         container,
         contentContainer,
         repliesContainer,
@@ -157,7 +157,7 @@ const useStyles = ({
   };
 };
 
-export type MessageSimplePropsWithContext = Pick<
+export type MessageItemViewPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
   | 'channel'
@@ -176,13 +176,14 @@ export type MessageSimplePropsWithContext = Pick<
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
-    | 'MessageAvatar'
+    | 'MessageAuthor'
     | 'MessageContent'
     | 'MessageDeleted'
     | 'MessageError'
     | 'MessageFooter'
     | 'MessageHeader'
     | 'MessageReplies'
+    | 'MessageSpacer'
     | 'MessageSwipeContent'
     | 'messageSwipeToReplyHitSlop'
     | 'ReactionListBottom'
@@ -200,170 +201,174 @@ export type MessageSimplePropsWithContext = Pick<
     shouldRenderSwipeableWrapper: boolean;
   };
 
-const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>((props, ref) => {
-  const [messageContentWidth, setMessageContentWidth] = useState(0);
-  const { width } = Dimensions.get('screen');
-  const {
-    alignment,
-    channel,
-    customMessageSwipeAction,
-    enableMessageGroupingByUser,
-    enableSwipeToReply,
-    groupStyles,
-    isMyMessage,
-    message,
-    MessageAvatar,
-    MessageContent,
-    MessageDeleted,
-    MessageError,
-    MessageFooter,
-    MessageHeader,
-    MessageReplies,
-    MessageSwipeContent,
-    messageSwipeToReplyHitSlop = { left: width, right: width },
-    onlyEmojis,
-    otherAttachments,
-    ReactionListBottom,
-    reactionListPosition,
-    reactionListType,
-    ReactionListTop,
-    shouldRenderSwipeableWrapper,
-    setQuotedMessage,
-  } = props;
-
-  const {
-    theme: {
-      semantics,
-      messageSimple: {
-        content: { errorContainer },
+const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithContext>(
+  (props, ref) => {
+    const [messageContentWidth, setMessageContentWidth] = useState(0);
+    const { width } = Dimensions.get('screen');
+    const {
+      alignment,
+      channel,
+      customMessageSwipeAction,
+      enableMessageGroupingByUser,
+      enableSwipeToReply,
+      groupStyles,
+      isMyMessage,
+      message,
+      MessageAuthor,
+      MessageContent,
+      MessageDeleted,
+      MessageError,
+      MessageFooter,
+      MessageHeader,
+      MessageReplies,
+      MessageSpacer,
+      MessageSwipeContent,
+      messageSwipeToReplyHitSlop = { left: width, right: width },
+      onlyEmojis,
+      otherAttachments,
+      ReactionListBottom,
+      reactionListPosition,
+      reactionListType,
+      ReactionListTop,
+      shouldRenderSwipeableWrapper,
+      setQuotedMessage,
+    } = props;
+
+    const {
+      theme: {
+        semantics,
+        messageItemView: {
+          content: { errorContainer },
+        },
       },
-    },
-  } = useTheme();
-
-  const {
-    isMessageErrorType,
-    isMessageReceivedOrErrorType,
-    isMessageTypeDeleted,
-    isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
-    messageGroupedSingleOrBottom,
-    messageGroupedMiddle,
-  } = useMessageData({});
-
-  const styles = useStyles({
-    alignment,
-    isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
-    messageGroupedMiddle,
-    enableMessageGroupingByUser,
-  });
-
-  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
-
-  let noBorder = onlyEmojis && !message.quoted_message;
-  if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
-      noBorder = false;
-    } else {
-      noBorder = true;
+    } = useTheme();
+
+    const {
+      isMessageErrorType,
+      isMessageReceivedOrErrorType,
+      isMessageTypeDeleted,
+      isVeryLastMessage,
+      messageGroupedSingle,
+      messageGroupedBottom,
+      messageGroupedTop,
+      messageGroupedSingleOrBottom,
+      messageGroupedMiddle,
+    } = useMessageData({});
+
+    const styles = useStyles({
+      alignment,
+      isVeryLastMessage,
+      messageGroupedSingle,
+      messageGroupedBottom,
+      messageGroupedTop,
+      messageGroupedMiddle,
+      enableMessageGroupingByUser,
+    });
+
+    const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+
+    let noBorder = onlyEmojis && !message.quoted_message;
+    if (otherAttachments.length) {
+      if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+        noBorder = false;
+      } else {
+        noBorder = true;
+      }
     }
-  }
 
-  let backgroundColor = semantics.chatBgOutgoing;
-  if (onlyEmojis && !message.quoted_message) {
-    backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
+    let backgroundColor = semantics.chatBgOutgoing;
+    if (onlyEmojis && !message.quoted_message) {
       backgroundColor = 'transparent';
+    } else if (otherAttachments.length) {
+      if (otherAttachments[0].type === 'giphy') {
+        backgroundColor = 'transparent';
+      }
+    } else if (isMessageReceivedOrErrorType) {
+      backgroundColor = semantics.chatBgIncoming;
     }
-  } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = semantics.chatBgIncoming;
-  }
 
-  const onSwipeActionHandler = useStableCallback(() => {
-    if (customMessageSwipeAction) {
-      customMessageSwipeAction({ channel, message });
-      return;
-    }
-    setQuotedMessage(message);
-  });
-
-  return (
-    <View ref={ref}>
-      <View pointerEvents='box-none' style={styles.container} testID='message-simple-wrapper'>
-        {alignment === 'left' ? <MessageAvatar /> : null}
-        {isMessageTypeDeleted ? (
-          <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
-        ) : (
-          <View
-            style={[
-              styles.contentContainer,
-              isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
-              isMessageErrorType ? errorContainer : {},
-            ]}
-            testID='message-components'
-          >
-            <MessageHeader />
-            {enableSwipeToReply ? (
-              <SwipableMessageBubble
-                alignment={alignment}
-                backgroundColor={backgroundColor}
-                isVeryLastMessage={isVeryLastMessage}
-                MessageContent={MessageContent}
-                messageContentWidth={messageContentWidth}
-                messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                MessageSwipeContent={MessageSwipeContent}
-                MessageError={MessageError}
-                messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
-                noBorder={noBorder}
-                onSwipe={onSwipeActionHandler}
-                reactionListPosition={reactionListPosition}
-                reactionListType={reactionListType}
-                ReactionListTop={ReactionListTop}
-                setMessageContentWidth={setMessageContentWidth}
-                shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
-                message={message}
-              />
-            ) : (
-              <MessageBubble
-                alignment={alignment}
-                backgroundColor={backgroundColor}
-                isVeryLastMessage={isVeryLastMessage}
-                MessageContent={MessageContent}
-                MessageError={MessageError}
-                messageContentWidth={messageContentWidth}
-                messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                noBorder={noBorder}
-                reactionListPosition={reactionListPosition}
-                ReactionListTop={ReactionListTop}
-                reactionListType={reactionListType}
-                setMessageContentWidth={setMessageContentWidth}
-                message={message}
-              />
-            )}
-
-            <View style={styles.repliesContainer}>
-              <MessageReplies />
+    const onSwipeActionHandler = useStableCallback(() => {
+      if (customMessageSwipeAction) {
+        customMessageSwipeAction({ channel, message });
+        return;
+      }
+      setQuotedMessage(message);
+    });
+
+    return (
+      <View ref={ref}>
+        <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
+          {alignment === 'left' ? <MessageAuthor /> : null}
+          {isMessageTypeDeleted ? (
+            <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
+          ) : (
+            <View
+              style={[
+                styles.contentContainer,
+                isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
+                isMessageErrorType ? errorContainer : {},
+              ]}
+              testID='message-components'
+            >
+              <MessageHeader />
+              {enableSwipeToReply ? (
+                <SwipableMessageBubble
+                  alignment={alignment}
+                  backgroundColor={backgroundColor}
+                  isVeryLastMessage={isVeryLastMessage}
+                  MessageContent={MessageContent}
+                  messageContentWidth={messageContentWidth}
+                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+                  MessageSwipeContent={MessageSwipeContent}
+                  MessageError={MessageError}
+                  messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+                  noBorder={noBorder}
+                  onSwipe={onSwipeActionHandler}
+                  reactionListPosition={reactionListPosition}
+                  reactionListType={reactionListType}
+                  ReactionListTop={ReactionListTop}
+                  setMessageContentWidth={setMessageContentWidth}
+                  shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
+                  message={message}
+                />
+              ) : (
+                <MessageBubble
+                  alignment={alignment}
+                  backgroundColor={backgroundColor}
+                  isVeryLastMessage={isVeryLastMessage}
+                  MessageContent={MessageContent}
+                  MessageError={MessageError}
+                  messageContentWidth={messageContentWidth}
+                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+                  noBorder={noBorder}
+                  reactionListPosition={reactionListPosition}
+                  ReactionListTop={ReactionListTop}
+                  reactionListType={reactionListType}
+                  setMessageContentWidth={setMessageContentWidth}
+                  message={message}
+                />
+              )}
+
+              <View style={styles.repliesContainer}>
+                <MessageReplies />
+              </View>
+
+              {reactionListPosition === 'bottom' && ReactionListBottom ? (
+                <ReactionListBottom type={reactionListType} />
+              ) : null}
+              <MessageFooter date={message.created_at} />
             </View>
-
-            {reactionListPosition === 'bottom' && ReactionListBottom ? (
-              <ReactionListBottom type={reactionListType} />
-            ) : null}
-            <MessageFooter date={message.created_at} />
-          </View>
-        )}
+          )}
+          {MessageSpacer ? <MessageSpacer /> : null}
+        </View>
       </View>
-    </View>
-  );
-});
+    );
+  },
+);
 
 const areEqual = (
-  prevProps: MessageSimplePropsWithContext,
-  nextProps: MessageSimplePropsWithContext,
+  prevProps: MessageItemViewPropsWithContext,
+  nextProps: MessageItemViewPropsWithContext,
 ) => {
   const {
     channel: prevChannel,
@@ -479,18 +484,18 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageSimple = React.memo(
-  MessageSimpleWithContext,
+const MemoizedMessageItemView = React.memo(
+  MessageItemViewWithContext,
   areEqual,
-) as typeof MessageSimpleWithContext;
+) as typeof MessageItemViewWithContext;
 
-export type MessageSimpleProps = Partial<MessageSimplePropsWithContext>;
+export type MessageItemViewProps = Partial<MessageItemViewPropsWithContext>;
 
 /**
  *
  * Message UI component
  */
-export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) => {
+export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, ref) => {
   const {
     alignment,
     channel,
@@ -509,13 +514,14 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
-    MessageAvatar,
+    MessageAuthor,
     MessageContent,
     MessageDeleted,
     MessageError,
     MessageFooter,
     MessageHeader,
     MessageReplies,
+    MessageSpacer,
     MessageSwipeContent,
     messageSwipeToReplyHitSlop,
     myMessageTheme,
@@ -531,7 +537,7 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
   const shouldRenderSwipeableWrapper = (message?.attachments || []).length > 0 || isAIGenerated;
 
   return (
-    <MemoizedMessageSimple
+    <MemoizedMessageItemView
       {...{
         alignment,
         channel,
@@ -541,13 +547,14 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         groupStyles,
         isMyMessage,
         message,
-        MessageAvatar,
+        MessageAuthor,
         MessageContent,
         MessageDeleted,
         MessageError,
         MessageFooter,
         MessageHeader,
         MessageReplies,
+        MessageSpacer,
         MessageSwipeContent,
         messageSwipeToReplyHitSlop,
         myMessageTheme,
@@ -568,4 +575,4 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
   );
 });
 
-MessageSimple.displayName = 'MessageSimple{messageSimple{container}}';
+MessageItemView.displayName = 'MessageItemView{messageItemView{container}}';
diff --git a/package/src/components/Message/MessageSimple/MessageReplies.tsx b/package/src/components/Message/MessageItemView/MessageReplies.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/MessageReplies.tsx
rename to package/src/components/Message/MessageItemView/MessageReplies.tsx
index 1c4df86f00..9571ef4eed 100644
--- a/package/src/components/Message/MessageSimple/MessageReplies.tsx
+++ b/package/src/components/Message/MessageItemView/MessageReplies.tsx
@@ -49,7 +49,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         replies: { container, messageRepliesText, content },
       },
       semantics,
@@ -201,7 +201,7 @@ export const MessageReplies = (props: MessageRepliesProps) => {
   );
 };
 
-MessageReplies.displayName = 'MessageReplies{messageSimple{replies}}';
+MessageReplies.displayName = 'MessageReplies{messageItemView{replies}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx b/package/src/components/Message/MessageItemView/MessageRepliesAvatars.tsx
similarity index 97%
rename from package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx
rename to package/src/components/Message/MessageItemView/MessageRepliesAvatars.tsx
index dedb86e502..7194ca9335 100644
--- a/package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx
+++ b/package/src/components/Message/MessageItemView/MessageRepliesAvatars.tsx
@@ -15,7 +15,7 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         replies: { avatarStackContainer },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/MessageStatus.tsx b/package/src/components/Message/MessageItemView/MessageStatus.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/MessageStatus.tsx
rename to package/src/components/Message/MessageItemView/MessageStatus.tsx
index 05cde7d730..348cd07e15 100644
--- a/package/src/components/Message/MessageSimple/MessageStatus.tsx
+++ b/package/src/components/Message/MessageItemView/MessageStatus.tsx
@@ -34,7 +34,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
       semantics,
@@ -174,7 +174,7 @@ export const MessageStatus = (props: MessageStatusProps) => {
   );
 };
 
-MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';
+MessageStatus.displayName = 'MessageStatus{messageItemView{status}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/Message/MessageSimple/MessageSwipeContent.tsx b/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
similarity index 97%
rename from package/src/components/Message/MessageSimple/MessageSwipeContent.tsx
rename to package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
index 1310ee6067..b1ffe3b5c9 100644
--- a/package/src/components/Message/MessageSimple/MessageSwipeContent.tsx
+++ b/package/src/components/Message/MessageItemView/MessageSwipeContent.tsx
@@ -21,7 +21,7 @@ export const MessageSwipeContent = () => {
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         swipeLeftContent: { container },
       },
       semantics,
diff --git a/package/src/components/Message/MessageSimple/MessageTextContainer.tsx b/package/src/components/Message/MessageItemView/MessageTextContainer.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/MessageTextContainer.tsx
rename to package/src/components/Message/MessageItemView/MessageTextContainer.tsx
index db7b011a65..704121be4a 100644
--- a/package/src/components/Message/MessageSimple/MessageTextContainer.tsx
+++ b/package/src/components/Message/MessageItemView/MessageTextContainer.tsx
@@ -63,7 +63,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         content: {
           markdown,
           textContainer: { onlyEmojiMarkdown, ...textContainer },
@@ -208,4 +208,4 @@ export const MessageTextContainer = (props: MessageTextContainerProps) => {
   );
 };
 
-MessageTextContainer.displayName = 'MessageTextContainer{messageSimple{content}}';
+MessageTextContainer.displayName = 'MessageTextContainer{messageItemView{content}}';
diff --git a/package/src/components/Message/MessageSimple/MessageTimestamp.tsx b/package/src/components/Message/MessageItemView/MessageTimestamp.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/MessageTimestamp.tsx
rename to package/src/components/Message/MessageItemView/MessageTimestamp.tsx
index 9883a4d90e..d074af5544 100644
--- a/package/src/components/Message/MessageSimple/MessageTimestamp.tsx
+++ b/package/src/components/Message/MessageItemView/MessageTimestamp.tsx
@@ -62,7 +62,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         content: { timestampText },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/MessageWrapper.tsx b/package/src/components/Message/MessageItemView/MessageWrapper.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/MessageWrapper.tsx
rename to package/src/components/Message/MessageItemView/MessageWrapper.tsx
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx
rename to package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx
index 641b0a8d44..efabd0da4a 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx
@@ -161,7 +161,7 @@ const useStyles = ({
 }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListBottom: { contentContainer, columnWrapper, rowSeparator },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListClustered.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/ReactionList/ReactionListClustered.tsx
rename to package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
index 1419b66bcf..9e0725e7be 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListClustered.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx
@@ -59,7 +59,7 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListClustered: { icon },
       },
     },
@@ -181,7 +181,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListClustered: { contentContainer, reactionCount, iconStyle },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItem.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/ReactionList/ReactionListItem.tsx
rename to package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
index 28e1e91d90..5f45a5a20a 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItem.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx
@@ -60,7 +60,7 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
   } = props;
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListItem: { icon },
       },
     },
@@ -200,7 +200,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListItem: { reactionCount },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItemWrapper.tsx
similarity index 98%
rename from package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx
rename to package/src/components/Message/MessageItemView/ReactionList/ReactionListItemWrapper.tsx
index f86962a090..00876e4505 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListItemWrapper.tsx
@@ -42,7 +42,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListItemWrapper: { wrapper, container },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx b/package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx
similarity index 99%
rename from package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx
rename to package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx
index 7393f392f7..eaad1d5bde 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx
+++ b/package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx
@@ -157,7 +157,7 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
 const useStyles = ({ alignment }: { alignment: 'left' | 'right' }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListTop: { container, position, contentContainer, list },
       },
     },
diff --git a/package/src/components/Message/MessageSimple/StreamingMessageView.tsx b/package/src/components/Message/MessageItemView/StreamingMessageView.tsx
similarity index 97%
rename from package/src/components/Message/MessageSimple/StreamingMessageView.tsx
rename to package/src/components/Message/MessageItemView/StreamingMessageView.tsx
index c9566c21b6..ddd36c918e 100644
--- a/package/src/components/Message/MessageSimple/StreamingMessageView.tsx
+++ b/package/src/components/Message/MessageItemView/StreamingMessageView.tsx
@@ -25,4 +25,4 @@ export const StreamingMessageView = (props: StreamingMessageViewProps) => {
   return <MessageTextContainer message={{ ...message, text: streamedMessageText }} />;
 };
 
-StreamingMessageView.displayName = 'StreamingMessageView{messageSimple{content}}';
+StreamingMessageView.displayName = 'StreamingMessageView{messageItemView{content}}';
diff --git a/package/src/components/Message/MessageSimple/__tests__/Message.test.js b/package/src/components/Message/MessageItemView/__tests__/Message.test.js
similarity index 91%
rename from package/src/components/Message/MessageSimple/__tests__/Message.test.js
rename to package/src/components/Message/MessageItemView/__tests__/Message.test.js
index 1ea9467329..ebafc968c9 100644
--- a/package/src/components/Message/MessageSimple/__tests__/Message.test.js
+++ b/package/src/components/Message/MessageItemView/__tests__/Message.test.js
@@ -15,7 +15,7 @@ import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
-import { MessageInput } from '../../../MessageInput/MessageInput';
+import { MessageComposer } from '../../../MessageInput/MessageComposer';
 import { Message } from '../../Message';
 
 describe('Message', () => {
@@ -44,7 +44,7 @@ describe('Message', () => {
             <Chat client={chatClient}>
               <Channel channel={channel}>
                 <Message groupStyles={['bottom']} {...options} />
-                <MessageInput />
+                <MessageComposer />
               </Channel>
             </Chat>
           </OverlayProvider>
@@ -57,14 +57,14 @@ describe('Message', () => {
     cleanup();
   });
 
-  it('renders the Message and MessageSimple components', async () => {
+  it('renders the Message and MessageItemView components', async () => {
     const message = generateMessage({ user });
 
     const { getByTestId } = renderMessage({ message });
 
     await waitFor(() => {
       expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-simple-wrapper')).toBeTruthy();
+      expect(getByTestId('message-item-view-wrapper')).toBeTruthy();
     });
   });
 
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js
similarity index 80%
rename from package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js
index 62ef3248e6..115c505911 100644
--- a/package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js
+++ b/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js
@@ -10,35 +10,35 @@ import {
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Chat } from '../../../Chat/Chat';
-import { MessageAvatar } from '../MessageAvatar';
+import { MessageAuthor } from '../MessageAuthor';
 
 afterEach(cleanup);
 
-describe('MessageAvatar', () => {
+describe('MessageAuthor', () => {
   let chatClient;
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser({ id: 'me' });
   });
 
-  it('should render message avatar', async () => {
+  it('should render message author', async () => {
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
     render(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
+        <MessageAuthor alignment='right' groupStyles={['bottom']} message={message} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('message-author')).toBeTruthy();
     });
 
     screen.rerender(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar alignment='right' groupStyles={[]} message={message} />
+        <MessageAuthor alignment='right' groupStyles={[]} message={message} />
       </Chat>,
     );
 
@@ -53,7 +53,7 @@ describe('MessageAvatar', () => {
 
     screen.rerender(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar
+        <MessageAuthor
           alignment='left'
           groupStyles={['single']}
           message={staticMessage}
@@ -63,7 +63,7 @@ describe('MessageAvatar', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('message-author')).toBeTruthy();
       expect(screen.getByTestId('user-avatar')).toBeTruthy();
       expect(screen.toJSON()).toMatchSnapshot();
     });
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js
similarity index 70%
rename from package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js
index e18f11202d..f6a9f8bf76 100644
--- a/package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js
+++ b/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js
@@ -149,6 +149,106 @@ describe('MessageContent', () => {
     });
   });
 
+  it('renders MessageContentTopView and MessageContentBottomView when provided', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentBottomView={() => <View testID='message-content-bottom-view' />}
+            MessageContentTopView={() => <View testID='message-content-top-view' />}
+          >
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-top-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-bottom-view')).toBeTruthy();
+    });
+  });
+
+  it('renders MessageContentLeadingView and MessageContentTrailingView when provided', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+  });
+
+  it('orders leading and trailing content views based on alignment', async () => {
+    const otherUser = generateUser({ id: 'other-user' });
+    const leftAlignedMessage = generateMessage({ user: otherUser });
+    const rightAlignedMessage = generateMessage({ user });
+
+    const { rerender } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={leftAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    let contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row');
+
+    rerender(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={rightAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row-reverse');
+  });
+
   it('renders a time component when MessageFooter does not exist', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageSimple.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js
similarity index 86%
rename from package/src/components/Message/MessageSimple/__tests__/MessageSimple.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js
index d4d00b73d6..360844d634 100644
--- a/package/src/components/Message/MessageSimple/__tests__/MessageSimple.test.js
+++ b/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js
@@ -17,7 +17,7 @@ import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
 
-describe('MessageSimple', () => {
+describe('MessageItemView', () => {
   let channel;
   let chatClient;
   let renderMessage;
@@ -53,35 +53,35 @@ describe('MessageSimple', () => {
     cleanup();
   });
 
-  it('renders the MessageSimple component', async () => {
+  it('renders the MessageItemView component', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-item-view-wrapper')).toBeTruthy();
     });
   });
 
-  it('renders MessageAvatar when alignment is left', async () => {
+  it('renders MessageAuthor when alignment is left', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeDefined();
+      expect(screen.queryByTestId('message-author')).toBeDefined();
     });
   });
 
-  it('do not renders MessageAvatar when alignment is right', async () => {
+  it('do not renders MessageAuthor when alignment is right', async () => {
     const user = generateUser({ id: 'id', name: 'name' });
     const message = generateMessage({ user });
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeNull();
+      expect(screen.queryByTestId('message-author')).toBeNull();
     });
   });
 
@@ -107,6 +107,17 @@ describe('MessageSimple', () => {
     });
   });
 
+  it('renders MessageSpacer component if defined', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message }, { MessageSpacer: () => <Text>Message Spacer</Text> });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Message Spacer')).not.toBeNull();
+    });
+  });
+
   it('renders ReactionListTop when reactionListPosition is top', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
@@ -160,7 +171,7 @@ describe('MessageSimple', () => {
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper').props.style).toMatchObject({
+      expect(screen.getByTestId('message-item-view-wrapper').props.style).toMatchObject({
         alignItems: 'flex-end',
         gap: 8,
         flexDirection: 'row',
@@ -177,7 +188,7 @@ describe('MessageSimple', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      const data = screen.getByTestId('message-simple-wrapper').props.style;
+      const data = screen.getByTestId('message-item-view-wrapper').props.style;
 
       expect(data).toMatchObject({
         alignItems: 'flex-end',
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js b/package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.js
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.js
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageReplies.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.js
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/MessageReplies.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.js
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.js
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js
rename to package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.js
diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx b/package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.tsx
rename to package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx
diff --git a/package/src/components/Message/MessageSimple/__tests__/ReactionListBottom.test.js b/package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.js
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/ReactionListBottom.test.js
rename to package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.js
diff --git a/package/src/components/Message/MessageSimple/__tests__/ReactionListTop.test.js b/package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/ReactionListTop.test.js
rename to package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js
diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap
similarity index 91%
rename from package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
rename to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap
index 9599074cc2..c24942ac84 100644
--- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
+++ b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`MessageAvatar should render message avatar 1`] = `
+exports[`MessageAuthor should render message author 1`] = `
 <View
   style={{}}
-  testID="message-avatar"
+  testID="message-author"
 >
   <View
     testID="user-avatar"
diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap
rename to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap
diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
similarity index 100%
rename from package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
rename to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
diff --git a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts b/package/src/components/Message/MessageItemView/utils/generateMarkdownText.test.ts
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts
rename to package/src/components/Message/MessageItemView/utils/generateMarkdownText.test.ts
diff --git a/package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts b/package/src/components/Message/MessageItemView/utils/generateMarkdownText.ts
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts
rename to package/src/components/Message/MessageItemView/utils/generateMarkdownText.ts
diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.test.ts b/package/src/components/Message/MessageItemView/utils/parseLinks.test.ts
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/parseLinks.test.ts
rename to package/src/components/Message/MessageItemView/utils/parseLinks.test.ts
diff --git a/package/src/components/Message/MessageSimple/utils/parseLinks.ts b/package/src/components/Message/MessageItemView/utils/parseLinks.ts
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/parseLinks.ts
rename to package/src/components/Message/MessageItemView/utils/parseLinks.ts
diff --git a/package/src/components/Message/MessageSimple/utils/renderText.test.tsx b/package/src/components/Message/MessageItemView/utils/renderText.test.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/renderText.test.tsx
rename to package/src/components/Message/MessageItemView/utils/renderText.test.tsx
diff --git a/package/src/components/Message/MessageSimple/utils/renderText.tsx b/package/src/components/Message/MessageItemView/utils/renderText.tsx
similarity index 100%
rename from package/src/components/Message/MessageSimple/utils/renderText.tsx
rename to package/src/components/Message/MessageItemView/utils/renderText.tsx
diff --git a/package/src/components/Message/hooks/useStreamingMessage.ts b/package/src/components/Message/hooks/useStreamingMessage.ts
index 506ba99fe0..2c8605857b 100644
--- a/package/src/components/Message/hooks/useStreamingMessage.ts
+++ b/package/src/components/Message/hooks/useStreamingMessage.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { StreamingMessageViewProps } from '../MessageSimple/StreamingMessageView';
+import { StreamingMessageViewProps } from '../MessageItemView/StreamingMessageView';
 
 export type UseStreamingMessageProps = Pick<
   StreamingMessageViewProps,
diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageComposer.tsx
similarity index 96%
rename from package/src/components/MessageInput/MessageInput.tsx
rename to package/src/components/MessageInput/MessageComposer.tsx
index cbb4da12a2..5be0b587f8 100644
--- a/package/src/components/MessageInput/MessageInput.tsx
+++ b/package/src/components/MessageInput/MessageComposer.tsx
@@ -149,7 +149,7 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
+type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
   Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> &
   Pick<
     MessageInputContextValue,
@@ -205,7 +205,7 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
-const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
+const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   const {
     additionalTextInputProps,
     asyncMessagesLockDistance,
@@ -250,7 +250,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         container,
         floatingWrapper,
         focusedInputBoxContainer,
@@ -385,10 +385,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         }
         layout={LinearTransition.duration(200)}
       >
-        <PortalWhileClosingView
-          portalHostName='overlay-composer'
-          portalName='message-input-composer'
-        >
+        <PortalWhileClosingView portalHostName='overlay-composer' portalName='message-composer'>
           <View
             onLayout={({
               nativeEvent: {
@@ -510,8 +507,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageInputPropsWithContext,
-  nextProps: MessageInputPropsWithContext,
+  prevProps: MessageComposerPropsWithContext,
+  nextProps: MessageComposerPropsWithContext,
 ) => {
   const {
     additionalTextInputProps: prevAdditionalTextInputProps,
@@ -633,15 +630,15 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageInput = React.memo(
-  MessageInputWithContext,
+const MemoizedMessageComposer = React.memo(
+  MessageComposerWithContext,
   areEqual,
-) as typeof MessageInputWithContext;
+) as typeof MessageComposerWithContext;
 
-export type MessageInputProps = Partial<MessageInputPropsWithContext>;
+export type MessageComposerProps = Partial<MessageComposerPropsWithContext>;
 
 /**
- * UI Component for message input
+ * UI Component for message composer
  * It's a consumer of
  * [Channel Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/),
  * [Chat Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/chat-context/),
@@ -649,7 +646,7 @@ export type MessageInputProps = Partial<MessageInputPropsWithContext>;
  * [Suggestions Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/suggestions-context/), and
  * [Translation Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
  */
-export const MessageInput = (props: MessageInputProps) => {
+export const MessageComposer = (props: MessageComposerProps) => {
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -716,7 +713,7 @@ export const MessageInput = (props: MessageInputProps) => {
   }
 
   return (
-    <MemoizedMessageInput
+    <MemoizedMessageComposer
       {...{
         audioRecorderManager,
         isRecordingStateIdle,
@@ -772,4 +769,4 @@ export const MessageInput = (props: MessageInputProps) => {
   );
 };
 
-MessageInput.displayName = 'MessageInput{messageInput}';
+MessageComposer.displayName = 'MessageComposer{messageComposer}';
diff --git a/package/src/components/MessageInput/MessageComposerLeadingView.tsx b/package/src/components/MessageInput/MessageComposerLeadingView.tsx
index e45e927757..e4918d5d58 100644
--- a/package/src/components/MessageInput/MessageComposerLeadingView.tsx
+++ b/package/src/components/MessageInput/MessageComposerLeadingView.tsx
@@ -13,7 +13,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 export const MessageComposerLeadingView = () => {
   const {
     theme: {
-      messageInput: { inputButtonsContainer },
+      messageComposer: { inputButtonsContainer },
     },
   } = useTheme();
   const { audioRecorderManager, messageInputFloating } = useMessageInputContext();
diff --git a/package/src/components/MessageInput/MessageInputHeaderView.tsx b/package/src/components/MessageInput/MessageInputHeaderView.tsx
index 309838f725..e554f1d7fb 100644
--- a/package/src/components/MessageInput/MessageInputHeaderView.tsx
+++ b/package/src/components/MessageInput/MessageInputHeaderView.tsx
@@ -21,7 +21,7 @@ import { primitives } from '../../theme';
 export const MessageInputHeaderView = () => {
   const {
     theme: {
-      messageInput: { contentContainer },
+      messageComposer: { contentContainer },
     },
   } = useTheme();
   const messageComposer = useMessageComposer();
diff --git a/package/src/components/MessageInput/MessageInputTrailingView.tsx b/package/src/components/MessageInput/MessageInputTrailingView.tsx
index 03480f6685..7b1a38fe21 100644
--- a/package/src/components/MessageInput/MessageInputTrailingView.tsx
+++ b/package/src/components/MessageInput/MessageInputTrailingView.tsx
@@ -15,7 +15,7 @@ import { primitives } from '../../theme';
 export const MessageInputTrailingView = () => {
   const {
     theme: {
-      messageInput: { outputButtonsContainer },
+      messageComposer: { outputButtonsContainer },
     },
   } = useTheme();
   const { audioRecorderManager } = useMessageInputContext();
diff --git a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
index 1011181ccc..e32ff582ff 100644
--- a/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
+++ b/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx
@@ -21,7 +21,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         sendMessageDisallowedIndicator: { container, text },
       },
     },
diff --git a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
index ec29221e6a..bab94bfdaf 100644
--- a/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
+++ b/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx
@@ -40,7 +40,7 @@ export const ShowThreadMessageInChannelButtonWithContext = (
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         showThreadMessageInChannelButton: {
           check,
           checkBoxActive,
@@ -152,7 +152,7 @@ export const ShowThreadMessageInChannelButton = (props: ShowThreadMessageInChann
 };
 
 ShowThreadMessageInChannelButton.displayName =
-  'ShowThreadMessageInChannelButton{messageInput{showThreadMessageInChannelButton}}';
+  'ShowThreadMessageInChannelButton{messageComposer{showThreadMessageInChannelButton}}';
 
 const useStyles = () => {
   const {
diff --git a/package/src/components/MessageInput/StopMessageStreamingButton.tsx b/package/src/components/MessageInput/StopMessageStreamingButton.tsx
index 19cfd65544..84f698980e 100644
--- a/package/src/components/MessageInput/StopMessageStreamingButton.tsx
+++ b/package/src/components/MessageInput/StopMessageStreamingButton.tsx
@@ -15,7 +15,7 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
   const {
     theme: {
       semantics,
-      messageInput: { stopMessageStreamingButton, stopMessageStreamingIcon },
+      messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon },
     },
   } = useTheme();
 
@@ -31,4 +31,4 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
   );
 };
 
-StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageInput}';
+StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}';
diff --git a/package/src/components/MessageInput/__tests__/MessageInput.test.js b/package/src/components/MessageInput/__tests__/MessageComposer.test.js
similarity index 96%
rename from package/src/components/MessageInput/__tests__/MessageInput.test.js
rename to package/src/components/MessageInput/__tests__/MessageComposer.test.js
index 57ff764466..ede84902ce 100644
--- a/package/src/components/MessageInput/__tests__/MessageInput.test.js
+++ b/package/src/components/MessageInput/__tests__/MessageComposer.test.js
@@ -14,7 +14,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -38,14 +38,14 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
   );
 };
 
-describe('MessageInput', () => {
+describe('MessageComposer', () => {
   let client;
   let channel;
 
@@ -63,7 +63,7 @@ describe('MessageInput', () => {
     });
   });
 
-  it('should render MessageInput', async () => {
+  it('should render MessageComposer', async () => {
     const channelProps = { channel };
 
     renderComponent({
diff --git a/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js b/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js
index 4cfd83d62b..c1feb7d108 100644
--- a/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js
+++ b/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js
@@ -4,7 +4,7 @@ import { Alert } from 'react-native';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import { MessageComposer } from 'stream-chat';
+import { MessageComposer as StreamMessageComposer } from 'stream-chat';
 
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import * as UseMessageComposerHooks from '../../../contexts/messageInputContext/hooks/useMessageComposer';
@@ -21,7 +21,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -45,7 +45,7 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
@@ -56,7 +56,7 @@ const editedMessageSetup = async ({ composerConfig, composition } = {}) => {
   const { client: chatClient, channels } = await initiateClientWithChannels();
   const channel = channels[0];
 
-  const messageComposer = new MessageComposer({
+  const messageComposer = new StreamMessageComposer({
     client: chatClient,
     composition,
     compositionContext: composition,
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
index 3096c593d2..58e2245a2c 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx
@@ -12,7 +12,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         dismissAttachmentUpload: { dismiss, dismissIcon, dismissIconColor },
       },
     },
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx
index a94132552b..88e964931c 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx
@@ -64,7 +64,7 @@ const AttachmentPreviewCell = ({ children }: { children: React.ReactNode }) => (
 const ItemSeparatorComponent = () => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { itemSeparator },
       },
     },
@@ -110,7 +110,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { audioAttachmentsContainer, flatList },
       },
     },
@@ -360,4 +360,4 @@ const styles = StyleSheet.create({
 });
 
 AttachmentUploadPreviewList.displayName =
-  'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}';
+  'AttachmentUploadPreviewList{messageComposer{attachmentUploadPreviewList}}';
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
index 4c19380a2b..fe8c0657f2 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
@@ -13,7 +13,7 @@ export const FileUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadInProgressIndicator },
+      messageComposer: { fileUploadInProgressIndicator },
     },
   } = useTheme();
 
@@ -38,7 +38,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadRetryIndicator },
+      messageComposer: { fileUploadRetryIndicator },
     },
   } = useTheme();
   const styles = useFileUploadRetryStyles();
@@ -83,7 +83,7 @@ export const FileUploadNotSupportedIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadNotSupportedIndicator },
+      messageComposer: { fileUploadNotSupportedIndicator },
     },
   } = useTheme();
 
@@ -107,7 +107,7 @@ export const ImageUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadInProgressIndicator },
+      messageComposer: { imageUploadInProgressIndicator },
     },
   } = useTheme();
   const styles = useImageUploadInProgressIndicatorStyles();
@@ -140,7 +140,7 @@ export const ImageUploadNotSupportedIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadNotSupportedIndicator },
+      messageComposer: { imageUploadNotSupportedIndicator },
     },
   } = useTheme();
   return (
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx
index 064c8480cf..36bdd66f09 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx
@@ -40,7 +40,7 @@ export const FileAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         fileAttachmentUploadPreview: { wrapper },
       },
     },
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
index 5ef92794eb..5149b86cee 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
@@ -36,7 +36,7 @@ export const ImageAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         imageAttachmentUploadPreview: { upload, wrapper },
       },
     },
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
index 5568a5d2bb..184c484672 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx
@@ -75,7 +75,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         videoAttachmentUploadPreview: { durationContainer, durationText },
       },
     },
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
index 76b3a79cb3..d0dc8768b8 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx
@@ -131,7 +131,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecorder: { arrowLeftIcon, micContainer, micIcon, slideToCancelContainer },
       },
     },
@@ -275,4 +275,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecorder.displayName = 'AudioRecorder{messageInput}';
+AudioRecorder.displayName = 'AudioRecorder{messageComposer}';
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
index 265d20a022..0bb0dbe0a9 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
@@ -85,7 +85,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const { t } = useTranslationContext();
   const {
     theme: {
-      messageInput: { micButtonContainer },
+      messageComposer: { micButtonContainer },
       semantics,
     },
   } = useTheme();
@@ -294,7 +294,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
   );
 };
 
-AudioRecordingButton.displayName = 'AudioRecordingButton{messageInput}';
+AudioRecordingButton.displayName = 'AudioRecordingButton{messageComposer}';
 
 const styles = StyleSheet.create({
   container: {
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
index 1e2aeefcc5..d6322ac8ce 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx
@@ -32,7 +32,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingInProgress: { container, durationText },
       },
     },
@@ -115,4 +115,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageInput}';
+AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageComposer}';
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
index 4402bc349b..f0c9609027 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx
@@ -48,7 +48,7 @@ export const AudioRecordingLockIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingLockIndicator: { arrowUpIcon, container, lockIcon },
       },
     },
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
index 3dfe62c452..5fa94cbc50 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
@@ -74,7 +74,7 @@ export const AudioRecordingPreview = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingPreview: {
           container,
           currentTime,
@@ -177,4 +177,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageInput}';
+AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageComposer}';
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx
index aec5ceab64..cb3260d194 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx
@@ -22,7 +22,7 @@ export const AudioRecordingWaveform = (props: AudioRecordingWaveformProps) => {
   const styles = useStyles();
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingWaveform: { container, waveform: waveformTheme },
       },
     },
@@ -70,4 +70,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageInput}';
+AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageComposer}';
diff --git a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
index bf0f379896..3f22f62d96 100644
--- a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
+++ b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx
@@ -80,7 +80,7 @@ const MemoizedAttachButton = React.memo(
 export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
 
 /**
- * UI Component for attach button in MessageInput component.
+ * UI Component for attach button in MessageComposer component.
  */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
@@ -107,4 +107,4 @@ export const AttachButton = (props: AttachButtonProps) => {
   );
 };
 
-AttachButton.displayName = 'AttachButton{messageInput}';
+AttachButton.displayName = 'AttachButton{messageComposer}';
diff --git a/package/src/components/MessageInput/components/InputButtons/index.tsx b/package/src/components/MessageInput/components/InputButtons/index.tsx
index fcfd708b2b..bb792302f0 100644
--- a/package/src/components/MessageInput/components/InputButtons/index.tsx
+++ b/package/src/components/MessageInput/components/InputButtons/index.tsx
@@ -42,7 +42,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
 
   const {
     theme: {
-      messageInput: { attachButtonContainer },
+      messageComposer: { attachButtonContainer },
     },
   } = useTheme();
 
diff --git a/package/src/components/MessageInput/components/LinkPreviewList.tsx b/package/src/components/MessageInput/components/LinkPreviewList.tsx
index a4c56bfe38..cf526745fb 100644
--- a/package/src/components/MessageInput/components/LinkPreviewList.tsx
+++ b/package/src/components/MessageInput/components/LinkPreviewList.tsx
@@ -97,7 +97,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: { linkPreviewList },
+      messageComposer: { linkPreviewList },
     },
   } = useTheme();
 
diff --git a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
index 61a196bb57..4fbd16500a 100644
--- a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx
@@ -38,4 +38,4 @@ export const EditButton = (props: EditButtonProps) => {
   );
 };
 
-EditButton.displayName = 'EditButton{messageInput}';
+EditButton.displayName = 'EditButton{messageComposer}';
diff --git a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
index 3a9f6962b9..4981413b67 100644
--- a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx
@@ -38,4 +38,4 @@ export const SendButton = (props: SendButtonProps) => {
   );
 };
 
-SendButton.displayName = 'SendButton{messageInput}';
+SendButton.displayName = 'SendButton{messageComposer}';
diff --git a/package/src/components/MessageInput/components/OutputButtons/index.tsx b/package/src/components/MessageInput/components/OutputButtons/index.tsx
index b4a92c904c..bd39ed3e71 100644
--- a/package/src/components/MessageInput/components/OutputButtons/index.tsx
+++ b/package/src/components/MessageInput/components/OutputButtons/index.tsx
@@ -63,7 +63,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } = props;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingButtonContainer,
         cooldownButtonContainer,
         editButtonContainer,
diff --git a/package/src/components/MessageInput/contexts/MicPositionContext.tsx b/package/src/components/MessageInput/contexts/MicPositionContext.tsx
index 854b602bc4..c12ef6a314 100644
--- a/package/src/components/MessageInput/contexts/MicPositionContext.tsx
+++ b/package/src/components/MessageInput/contexts/MicPositionContext.tsx
@@ -26,7 +26,7 @@ export const useMicPositionContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageInput wraps the subtree where mic positions are used.',
+      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageComposer wraps the subtree where mic positions are used.',
     );
   }
 
diff --git a/package/src/components/MessageList/MessageFlashList.tsx b/package/src/components/MessageList/MessageFlashList.tsx
index e9538f9165..adf408fcca 100644
--- a/package/src/components/MessageList/MessageFlashList.tsx
+++ b/package/src/components/MessageList/MessageFlashList.tsx
@@ -55,7 +55,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 import { useStableCallback, useStateStore } from '../../hooks';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
+import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 let FlashList;
 
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
index 2f77ad5900..47429cc6a9 100644
--- a/package/src/components/MessageList/MessageList.tsx
+++ b/package/src/components/MessageList/MessageList.tsx
@@ -68,7 +68,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { MessageWrapper } from '../Message/MessageSimple/MessageWrapper';
+import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
diff --git a/package/src/components/MessageList/MessageSystem.tsx b/package/src/components/MessageList/MessageSystem.tsx
index 8d44325f4d..6a31a4eed5 100644
--- a/package/src/components/MessageList/MessageSystem.tsx
+++ b/package/src/components/MessageList/MessageSystem.tsx
@@ -65,7 +65,7 @@ MessageSystem.displayName = 'MessageSystem{messageList{messageSystem}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,
diff --git a/package/src/components/Thread/Thread.tsx b/package/src/components/Thread/Thread.tsx
index e12108745f..9643b44a74 100644
--- a/package/src/components/Thread/Thread.tsx
+++ b/package/src/components/Thread/Thread.tsx
@@ -11,9 +11,9 @@ import {
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import {
-  MessageInput as DefaultMessageInput,
-  MessageInputProps,
-} from '../MessageInput/MessageInput';
+  MessageComposer as DefaultMessageComposer,
+  MessageComposerProps,
+} from '../MessageInput/MessageComposer';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
 
@@ -37,10 +37,10 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
     | 'threadInstance'
   > & {
     /**
-     * Additional props for underlying MessageInput component.
+     * Additional props for underlying MessageComposer component.
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input/#props
      * */
-    additionalMessageInputProps?: Partial<MessageInputProps>;
+    additionalMessageComposerProps?: Partial<MessageComposerProps>;
     /**
      * Additional props for underlying MessageList component.
      * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-list/#props
@@ -57,13 +57,13 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
     closeThreadOnDismount?: boolean;
-    /** Disables the thread UI. So MessageInput and MessageList will be disabled. */
+    /** Disables the thread UI. So MessageComposer and MessageList will be disabled. */
     disabled?: boolean;
     /**
-     * **Customized MessageInput component to used within Thread instead of default MessageInput
-     * **Available from [MessageInput](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input)**
+     * **Customized MessageComposer component to used within Thread instead of default MessageComposer
+     * **Available from [MessageComposer](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input)**
      */
-    MessageInput?: React.ComponentType<MessageInputProps>;
+    MessageComposer?: React.ComponentType<MessageComposerProps>;
     /**
      * Call custom function on closing thread if handling thread state elsewhere
      */
@@ -73,7 +73,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
 
 const ThreadWithContext = (props: ThreadPropsWithContext) => {
   const {
-    additionalMessageInputProps,
+    additionalMessageComposerProps,
     additionalMessageListProps,
     additionalMessageFlashListProps,
     autoFocus = false,
@@ -81,7 +81,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
-    MessageInput = DefaultMessageInput,
+    MessageComposer = DefaultMessageComposer,
     MessageList,
     onThreadDismount,
     parentMessagePreventPress = true,
@@ -148,10 +148,10 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
           {...additionalMessageListProps}
         />
       )}
-      <MessageInput
+      <MessageComposer
         additionalTextInputProps={additionalTextInputProps}
         threadList
-        {...additionalMessageInputProps}
+        {...additionalMessageComposerProps}
       />
     </React.Fragment>
   );
@@ -164,9 +164,9 @@ export type ThreadProps = Partial<ThreadPropsWithContext>;
  * The thread is only used for the list of replies to a message.
  *
  * Thread is a consumer of [channel context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/)
- * Underlying MessageList, MessageInput and Message components can be customized using props:
+ * Underlying MessageList, MessageComposer and Message components can be customized using props:
  * - additionalMessageListProps
- * - additionalMessageInputProps
+ * - additionalMessageComposerProps
  */
 export const Thread = (props: ThreadProps) => {
   const { client } = useChatContext();
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index 222aa4da26..107301f3ca 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -379,11 +379,11 @@ exports[`Thread should match thread snapshot 1`] = `
                             "paddingVertical": 8,
                           }
                         }
-                        testID="message-simple-wrapper"
+                        testID="message-item-view-wrapper"
                       >
                         <View
                           style={{}}
-                          testID="message-avatar"
+                          testID="message-author"
                         >
                           <View
                             testID="user-avatar"
@@ -706,11 +706,11 @@ exports[`Thread should match thread snapshot 1`] = `
                             "paddingVertical": 8,
                           }
                         }
-                        testID="message-simple-wrapper"
+                        testID="message-item-view-wrapper"
                       >
                         <View
                           style={{}}
-                          testID="message-avatar"
+                          testID="message-author"
                         >
                           <View
                             testID="user-avatar"
@@ -1066,11 +1066,11 @@ exports[`Thread should match thread snapshot 1`] = `
                             "paddingVertical": 8,
                           }
                         }
-                        testID="message-simple-wrapper"
+                        testID="message-item-view-wrapper"
                       >
                         <View
                           style={{}}
-                          testID="message-avatar"
+                          testID="message-author"
                         >
                           <View
                             testID="user-avatar"
@@ -1384,11 +1384,11 @@ exports[`Thread should match thread snapshot 1`] = `
                           "paddingVertical": 8,
                         }
                       }
-                      testID="message-simple-wrapper"
+                      testID="message-item-view-wrapper"
                     >
                       <View
                         style={{}}
-                        testID="message-avatar"
+                        testID="message-author"
                       >
                         <View
                           testID="user-avatar"
@@ -1706,7 +1706,7 @@ exports[`Thread should match thread snapshot 1`] = `
       style={null}
     >
       <View
-        name="message-input-composer"
+        name="message-composer"
       >
         <View
           collapsable={false}
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
index 47cfc54590..d4fe5f1bce 100644
--- a/package/src/components/index.ts
+++ b/package/src/components/index.ts
@@ -38,7 +38,7 @@ export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
 export * from './ChannelList/ChannelListHeaderNetworkDownIndicator';
 export * from './ChannelList/ChannelListLoadingIndicator';
-export * from './ChannelList/ChannelListMessenger';
+export * from './ChannelList/ChannelListView';
 export * from './ChannelList/Skeleton';
 export * from './ChannelList/hooks';
 
@@ -48,7 +48,7 @@ export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
-export * from './ChannelPreview/ChannelPreviewMessenger';
+export * from './ChannelPreview/ChannelPreviewView';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
@@ -85,27 +85,27 @@ export * from './Message/hooks/useStreamingMessage';
 export * from './Message/hooks/useMessageDeliveryData';
 export * from './Message/hooks/useMessageReadData';
 export * from './Message/Message';
-export * from './Message/MessageSimple/MessageAvatar';
-export * from './Message/MessageSimple/MessageBounce';
-export * from './Message/MessageSimple/MessageBlocked';
-export * from './Message/MessageSimple/MessageContent';
-export * from './Message/MessageSimple/MessageDeleted';
-export * from './Message/MessageSimple/MessageError';
-export * from './Message/MessageSimple/MessageFooter';
-export * from './Message/MessageSimple/MessageHeader';
-export * from './Message/MessageSimple/Headers';
-export * from './Message/MessageSimple/MessageReplies';
-export * from './Message/MessageSimple/MessageRepliesAvatars';
-export * from './Message/MessageSimple/MessageSimple';
-export * from './Message/MessageSimple/MessageStatus';
-export * from './Message/MessageSimple/MessageTextContainer';
-export * from './Message/MessageSimple/MessageTimestamp';
-export * from './Message/MessageSimple/ReactionList/ReactionListBottom';
-export * from './Message/MessageSimple/ReactionList/ReactionListTop';
-export * from './Message/MessageSimple/ReactionList/ReactionListClustered';
-export * from './Message/MessageSimple/ReactionList/ReactionListItem';
-export * from './Message/MessageSimple/ReactionList/ReactionListItemWrapper';
-export * from './Message/MessageSimple/utils/renderText';
+export * from './Message/MessageItemView/MessageAuthor';
+export * from './Message/MessageItemView/MessageBounce';
+export * from './Message/MessageItemView/MessageBlocked';
+export * from './Message/MessageItemView/MessageContent';
+export * from './Message/MessageItemView/MessageDeleted';
+export * from './Message/MessageItemView/MessageError';
+export * from './Message/MessageItemView/MessageFooter';
+export * from './Message/MessageItemView/MessageHeader';
+export * from './Message/MessageItemView/Headers';
+export * from './Message/MessageItemView/MessageReplies';
+export * from './Message/MessageItemView/MessageRepliesAvatars';
+export * from './Message/MessageItemView/MessageItemView';
+export * from './Message/MessageItemView/MessageStatus';
+export * from './Message/MessageItemView/MessageTextContainer';
+export * from './Message/MessageItemView/MessageTimestamp';
+export * from './Message/MessageItemView/ReactionList/ReactionListBottom';
+export * from './Message/MessageItemView/ReactionList/ReactionListTop';
+export * from './Message/MessageItemView/ReactionList/ReactionListClustered';
+export * from './Message/MessageItemView/ReactionList/ReactionListItem';
+export * from './Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+export * from './Message/MessageItemView/utils/renderText';
 export * from './Message/utils/messageActions';
 export * from '../utils/removeReservedFields';
 
@@ -113,7 +113,7 @@ export * from './MessageInput/components/InputButtons/AttachButton';
 export * from './MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 export * from './MessageInput/components/OutputButtons/CooldownTimer';
 export * from './MessageInput/components/InputButtons';
-export * from './MessageInput/MessageInput';
+export * from './MessageInput/MessageComposer';
 export * from './MessageInput/MessageComposerLeadingView';
 export * from './MessageInput/MessageComposerTrailingView';
 export * from './MessageInput/MessageInputFooterView';
@@ -186,5 +186,5 @@ export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
 export * from './ThreadList/ThreadList';
 
-export * from './Message/MessageSimple/StreamingMessageView';
+export * from './Message/MessageItemView/StreamingMessageView';
 export * from './AITypingIndicatorView';
diff --git a/package/src/contexts/channelsContext/ChannelsContext.tsx b/package/src/contexts/channelsContext/ChannelsContext.tsx
index fd7dd26b04..98b834222b 100644
--- a/package/src/contexts/channelsContext/ChannelsContext.tsx
+++ b/package/src/contexts/channelsContext/ChannelsContext.tsx
@@ -12,11 +12,11 @@ import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPre
 import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
 import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
-import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
 import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
 import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
+import type { ChannelPreviewViewProps } from '../../components/ChannelPreview/ChannelPreviewView';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
@@ -28,7 +28,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue = {
   /**
-   * Besides the existing default behavior of the ChannelListMessenger component, you can attach
+   * Besides the existing default behavior of the ChannelListView component, you can attach
    * additional props to the underlying React Native FlatList.
    *
    * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
@@ -36,7 +36,7 @@ export type ChannelsContextValue = {
    * **EXAMPLE:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  channels={channels}
    *  additionalFlatListProps={{ bounces: true }}
    * />
@@ -124,9 +124,9 @@ export type ChannelsContextValue = {
   /**
    * Custom UI component to display individual channel list items
    *
-   * Default: [ChannelPreviewMessenger](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-messenger/)
+   * Default: [ChannelPreviewView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-view/)
    */
-  Preview: React.ComponentType<ChannelPreviewMessengerProps>;
+  Preview: React.ComponentType<ChannelPreviewViewProps>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -152,7 +152,7 @@ export type ChannelsContextValue = {
    * **Example:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  setFlatListRef={(ref) => {
    *    // Use ref for your own good
    *  }}
diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx
index 509294a49b..e288a1b1ec 100644
--- a/package/src/contexts/messageInputContext/MessageInputContext.tsx
+++ b/package/src/contexts/messageInputContext/MessageInputContext.tsx
@@ -36,7 +36,7 @@ import {
 } from '../../components';
 import type { InputViewProps } from '../../components/AutoCompleteInput/InputView';
 import { dismissKeyboard } from '../../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
-import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
+import { parseLinksFromText } from '../../components/Message/MessageItemView/utils/parseLinks';
 import { AttachmentUploadPreviewListProps } from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 import { AudioAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview';
 import { FileAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
@@ -51,7 +51,7 @@ import type { AttachButtonProps } from '../../components/MessageInput/components
 import type { InputButtonsProps } from '../../components/MessageInput/components/InputButtons/index';
 import type { SendButtonProps } from '../../components/MessageInput/components/OutputButtons/SendButton';
 import { useAudioRecorder } from '../../components/MessageInput/hooks/useAudioRecorder';
-import type { MessageInputProps } from '../../components/MessageInput/MessageInput';
+import type { MessageComposerProps } from '../../components/MessageInput/MessageComposer';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
@@ -210,7 +210,7 @@ export type InputMessageInputContextValue = {
   /**
    * Custom UI component to display the remaining cooldown a user will have to wait before
    * being allowed to send another message. This component is displayed in place of the
-   * send button for the MessageInput component.
+   * send button for the MessageComposer component.
    *
    * **default**
    * [CooldownTimer](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/CooldownTimer.tsx)
@@ -334,7 +334,7 @@ export type InputMessageInputContextValue = {
    * Has access to all of [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageInputContext/MessageInputContext.tsx)
    */
   Input?: React.ComponentType<
-    Omit<MessageInputProps, 'Input'> &
+    Omit<MessageComposerProps, 'Input'> &
       InputButtonsProps & {
         getUsers: () => UserResponse[];
       }
diff --git a/package/src/contexts/messagesContext/MessagesContext.tsx b/package/src/contexts/messagesContext/MessagesContext.tsx
index ad07afe1f8..5b1b3c9572 100644
--- a/package/src/contexts/messagesContext/MessagesContext.tsx
+++ b/package/src/contexts/messagesContext/MessagesContext.tsx
@@ -36,32 +36,32 @@ import type {
   MessagePressableHandlerPayload,
   MessageProps,
 } from '../../components/Message/Message';
-import type { MessagePinnedHeaderProps } from '../../components/Message/MessageSimple/Headers/MessagePinnedHeader';
-import type { MessageReminderHeaderProps } from '../../components/Message/MessageSimple/Headers/MessageReminderHeader';
-import type { MessageSavedForLaterHeaderProps } from '../../components/Message/MessageSimple/Headers/MessageSavedForLaterHeader';
-import type { SentToChannelHeaderProps } from '../../components/Message/MessageSimple/Headers/SentToChannelHeader';
-import type { MessageAvatarProps } from '../../components/Message/MessageSimple/MessageAvatar';
-import type { MessageBlockedProps } from '../../components/Message/MessageSimple/MessageBlocked';
-import type { MessageBounceProps } from '../../components/Message/MessageSimple/MessageBounce';
-import type { MessageContentProps } from '../../components/Message/MessageSimple/MessageContent';
-import type { MessageDeletedProps } from '../../components/Message/MessageSimple/MessageDeleted';
-import type { MessageFooterProps } from '../../components/Message/MessageSimple/MessageFooter';
-import { MessageHeaderProps } from '../../components/Message/MessageSimple/MessageHeader';
-import type { MessageRepliesProps } from '../../components/Message/MessageSimple/MessageReplies';
-import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageSimple/MessageRepliesAvatars';
-import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
-import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
-import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
-import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
-import { ReactionListBottomProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListBottom';
-import { ReactionListClusteredProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListClustered';
+import type { MessagePinnedHeaderProps } from '../../components/Message/MessageItemView/Headers/MessagePinnedHeader';
+import type { MessageReminderHeaderProps } from '../../components/Message/MessageItemView/Headers/MessageReminderHeader';
+import type { MessageSavedForLaterHeaderProps } from '../../components/Message/MessageItemView/Headers/MessageSavedForLaterHeader';
+import type { SentToChannelHeaderProps } from '../../components/Message/MessageItemView/Headers/SentToChannelHeader';
+import type { MessageAuthorProps } from '../../components/Message/MessageItemView/MessageAuthor';
+import type { MessageBlockedProps } from '../../components/Message/MessageItemView/MessageBlocked';
+import type { MessageBounceProps } from '../../components/Message/MessageItemView/MessageBounce';
+import type { MessageContentProps } from '../../components/Message/MessageItemView/MessageContent';
+import type { MessageDeletedProps } from '../../components/Message/MessageItemView/MessageDeleted';
+import type { MessageFooterProps } from '../../components/Message/MessageItemView/MessageFooter';
+import { MessageHeaderProps } from '../../components/Message/MessageItemView/MessageHeader';
+import type { MessageItemViewProps } from '../../components/Message/MessageItemView/MessageItemView';
+import type { MessageRepliesProps } from '../../components/Message/MessageItemView/MessageReplies';
+import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageItemView/MessageRepliesAvatars';
+import type { MessageStatusProps } from '../../components/Message/MessageItemView/MessageStatus';
+import type { MessageTextProps } from '../../components/Message/MessageItemView/MessageTextContainer';
+import { MessageTimestampProps } from '../../components/Message/MessageItemView/MessageTimestamp';
+import { ReactionListBottomProps } from '../../components/Message/MessageItemView/ReactionList/ReactionListBottom';
+import { ReactionListClusteredProps } from '../../components/Message/MessageItemView/ReactionList/ReactionListClustered';
 import {
   ReactionListItemProps,
   ReactionListCountItemProps,
-} from '../../components/Message/MessageSimple/ReactionList/ReactionListItem';
-import { ReactionListItemWrapperProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListItemWrapper';
-import type { ReactionListTopProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListTop';
-import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
+} from '../../components/Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItemWrapperProps } from '../../components/Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+import type { ReactionListTopProps } from '../../components/Message/MessageItemView/ReactionList/ReactionListTop';
+import type { MarkdownRules } from '../../components/Message/MessageItemView/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
@@ -223,13 +223,13 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   MessageActionListItem: React.ComponentType<MessageActionListItemProps>;
   /**
-   * UI component for MessageAvatar
-   * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
+   * UI component for MessageAuthor
+   * Defaults to: [MessageAuthor](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageAuthor.tsx)
    **/
-  MessageAvatar: React.ComponentType<MessageAvatarProps>;
+  MessageAuthor: React.ComponentType<MessageAuthorProps>;
   /**
    * UI component for MessageBlocked
-   * Defaults to: [MessageBlocked](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageBlocked.tsx)
+   * Defaults to: [MessageBlocked](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageBlocked.tsx)
    */
   MessageBlocked: React.ComponentType<MessageBlockedProps>;
   /**
@@ -238,14 +238,30 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   MessageBounce: React.ComponentType<MessageBounceProps>;
   /**
    * UI component for MessageContent
-   * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageContent.tsx)
+   * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageContent.tsx)
    */
   MessageContent: React.ComponentType<MessageContentProps>;
+  /**
+   * Optional UI component rendered above the message content body.
+   */
+  MessageContentTopView?: React.ComponentType;
+  /**
+   * Optional UI component rendered to the left of the message content body.
+   */
+  MessageContentLeadingView?: React.ComponentType;
+  /**
+   * Optional UI component rendered to the right of the message content body.
+   */
+  MessageContentTrailingView?: React.ComponentType;
+  /**
+   * Optional UI component rendered below the message content body.
+   */
+  MessageContentBottomView?: React.ComponentType;
   /** Order to render the message content */
   messageContentOrder: MessageContentType[];
   /**
    * UI component for MessageDeleted
-   * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageDeleted.tsx)
+   * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageDeleted.tsx)
    */
   MessageDeleted: React.ComponentType<MessageDeletedProps>;
   /**
@@ -284,22 +300,28 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   MessageReactionPicker: React.ComponentType<MessageReactionPickerProps>;
   /**
    * UI component for MessageReplies
-   * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageReplies.tsx)
+   * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageReplies.tsx)
    */
   MessageReplies: React.ComponentType<MessageRepliesProps>;
   /**
    * UI Component for MessageRepliesAvatars
-   * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx)
+   * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageRepliesAvatars.tsx)
    */
   MessageRepliesAvatars: React.ComponentType<MessageRepliesAvatarsProps>;
   /**
-   * UI component for MessageSimple
-   * Defaults to: [MessageSimple](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageSimple.tsx)
+   * Optional UI component for overriding the empty space on a message row. If the message is left aligned, it will be to the right of it - otherwise left.
+   */
+  MessageSpacer?: React.ComponentType;
+  /**
+   * UI component for MessageItemView. It encapsulates the entirety of a message row.
+   * Defaults to: [MessageItemView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageItemView.tsx)
    */
-  MessageSimple: React.ComponentType<MessageSimpleProps & { ref?: React.RefObject<View | null> }>;
+  MessageItemView: React.ComponentType<
+    MessageItemViewProps & { ref?: React.RefObject<View | null> }
+  >;
   /**
    * UI component for MessageStatus (delivered/read)
-   * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageStatus.tsx)
+   * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageItemView/MessageStatus.tsx)
    */
   MessageStatus: React.ComponentType<MessageStatusProps>;
   /**
@@ -309,7 +331,7 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
   MessageSystem: React.ComponentType<MessageSystemProps>;
   /**
    * UI component for MessageTimestamp
-   * Defaults to: [MessageTimestamp](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageTimestamp.tsx)
+   * Defaults to: [MessageTimestamp](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageItemView/MessageTimestamp.tsx)
    */
   MessageTimestamp: React.ComponentType<MessageTimestampProps>;
   /**
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index c3dc8e1d05..69640e1ea1 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -164,7 +164,7 @@ export type Theme = {
   channelListLoadingIndicator: {
     container: ViewStyle;
   };
-  channelListMessenger: {
+  channelListView: {
     flatList: ViewStyle;
     flatListContent: ViewStyle;
   };
@@ -320,7 +320,7 @@ export type Theme = {
     loadingText: TextStyle;
   };
 
-  messageInput: {
+  messageComposer: {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
     attachmentSelectionBar: ViewStyle;
@@ -581,7 +581,7 @@ export type Theme = {
   messagePreview: {
     message: TextStyle;
   };
-  messageSimple: {
+  messageItemView: {
     blockedMessageContainer: ViewStyle;
     actions: {
       button: ViewStyle & {
@@ -596,7 +596,7 @@ export type Theme = {
       };
       container: ViewStyle;
     };
-    avatarWrapper: {
+    authorWrapper: {
       container: ViewStyle;
       spacer: ViewStyle;
     };
@@ -1095,7 +1095,7 @@ export const defaultTheme: Theme = {
   channelListLoadingIndicator: {
     container: {},
   },
-  channelListMessenger: {
+  channelListView: {
     flatList: {},
     flatListContent: {},
   },
@@ -1249,7 +1249,7 @@ export const defaultTheme: Theme = {
     container: {},
     loadingText: {},
   },
-  messageInput: {
+  messageComposer: {
     attachButton: {},
     attachButtonContainer: {},
     attachmentSelectionBar: {},
@@ -1489,14 +1489,14 @@ export const defaultTheme: Theme = {
   messagePreview: {
     message: {},
   },
-  messageSimple: {
+  messageItemView: {
     blockedMessageContainer: {},
     actions: {
       button: {},
       buttonText: {},
       container: {},
     },
-    avatarWrapper: {
+    authorWrapper: {
       container: {},
       spacer: {
         height: BASE_AVATAR_SIZE,