diff --git a/package/src/components/Message/MessageSimple/utils/renderText.tsx b/package/src/components/Message/MessageSimple/utils/renderText.tsx
index d424b56b89..e533655b62 100644
--- a/package/src/components/Message/MessageSimple/utils/renderText.tsx
+++ b/package/src/components/Message/MessageSimple/utils/renderText.tsx
@@ -198,11 +198,27 @@ export const renderText = <
     );
   };
 
-  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => (
-    <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
-      {output(node.content, state)}
-    </Text>
-  );
+  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => {
+    if (messageTextNumberOfLines !== undefined) {
+      // If we want to truncate the message text, lets only truncate the first paragraph
+      // and simply not render rest of the paragraphs.
+      if (state.key === '0' || state.key === 0) {
+        return (
+          <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
+            {output(node.content, state)}
+          </Text>
+        );
+      } else {
+        return null;
+      }
+    }
+
+    return (
+      <Text key={state.key} style={styles.paragraph}>
+        {output(node.content, state)}
+      </Text>
+    );
+  };
 
   const mentionedUsers = Array.isArray(mentioned_users)
     ? mentioned_users.reduce((acc, cur) => {
diff --git a/package/src/components/MessageOverlay/MessageOverlay.tsx b/package/src/components/MessageOverlay/MessageOverlay.tsx
index b305cb4314..74959463c9 100644
--- a/package/src/components/MessageOverlay/MessageOverlay.tsx
+++ b/package/src/components/MessageOverlay/MessageOverlay.tsx
@@ -3,6 +3,7 @@ import { Keyboard, Platform, SafeAreaView, StyleSheet, View, ViewStyle } from 'r
 import {
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
+  ScrollView,
   State,
   TapGestureHandler,
 } from 'react-native-gesture-handler';
@@ -158,6 +159,7 @@ const MessageOverlayWithContext = <
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
 
   const [myMessageThemeString, setMyMessageThemeString] = useState(JSON.stringify(myMessageTheme));
+  const [reactionListHeight, setReactionListHeight] = useState(0);
 
   useEffect(() => {
     if (myMessageTheme) {
@@ -302,6 +304,200 @@ const MessageOverlayWithContext = <
 
   const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } = messagesContext || {};
 
+  const renderContent = (messageTextNumberOfLines?: number) => (
+    <TapGestureHandler
+      maxDist={32}
+      onHandlerStateChange={({ nativeEvent: { state } }) => {
+        if (state === State.END) {
+          setOverlay('none');
+        }
+      }}
+    >
+      <Animated.View style={[styles.flex, panStyle]}>
+        {message && (
+          <View
+            style={[
+              styles.center,
+              styles.overlayPadding,
+              { padding: overlayPadding },
+              alignment === 'left' ? styles.alignStart : styles.alignEnd,
+            ]}
+          >
+            {handleReaction && ownCapabilities?.sendReaction ? (
+              <OverlayReactionList
+                messageLayout={messageLayout}
+                ownReactionTypes={message?.own_reactions?.map((reaction) => reaction.type) || []}
+                setReactionListHeight={setReactionListHeight}
+                showScreen={showScreen}
+              />
+            ) : null}
+            <Animated.View
+              onLayout={({
+                nativeEvent: {
+                  layout: { height: layoutHeight, width: layoutWidth, x, y },
+                },
+              }) => {
+                messageLayout.value = {
+                  x: alignment === 'left' ? x + layoutWidth : x,
+                  y,
+                };
+                messageWidth.value = layoutWidth;
+                messageHeight.value = layoutHeight;
+              }}
+              style={[styles.alignEnd, styles.row, showScreenStyle]}
+            >
+              {alignment === 'left' && MessageAvatar && (
+                <MessageAvatar {...{ alignment, message, showAvatar: true }} />
+              )}
+              <View
+                pointerEvents='none'
+                style={[
+                  styles.containerInner,
+                  {
+                    backgroundColor:
+                      onlyEmojis && !message.quoted_message
+                        ? transparent
+                        : otherAttachments?.length
+                        ? otherAttachments[0].type === 'giphy'
+                          ? !message.quoted_message
+                            ? transparent
+                            : grey_gainsboro
+                          : blue_alice
+                        : alignment === 'left'
+                        ? white_smoke
+                        : grey_gainsboro,
+                    borderBottomLeftRadius:
+                      (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
+                      (!hasThreadReplies || threadList)
+                        ? borderRadiusS
+                        : borderRadiusL,
+                    borderBottomRightRadius:
+                      (groupStyle === 'right_bottom' || groupStyle === 'right_single') &&
+                      (!hasThreadReplies || threadList)
+                        ? borderRadiusS
+                        : borderRadiusL,
+                    borderColor: grey_whisper,
+                  },
+                  (onlyEmojis && !message.quoted_message) || otherAttachments?.length
+                    ? { borderWidth: 0 }
+                    : {},
+                  containerInner,
+                ]}
+              >
+                {messagesContext?.messageContentOrder?.map(
+                  (messageContentType, messageContentOrderIndex) => {
+                    switch (messageContentType) {
+                      case 'quoted_reply':
+                        return (
+                          message.quoted_message &&
+                          Reply && (
+                            <View
+                              key={`quoted_reply_${messageContentOrderIndex}`}
+                              style={[styles.replyContainer, replyContainer]}
+                            >
+                              <Reply
+                                quotedMessage={
+                                  message.quoted_message as ReplyProps<StreamChatGenerics>['quotedMessage']
+                                }
+                                styles={{
+                                  messageContainer: {
+                                    maxWidth: vw(60),
+                                  },
+                                }}
+                              />
+                            </View>
+                          )
+                        );
+                      case 'attachments':
+                        return otherAttachments?.map(
+                          (attachment, attachmentIndex) =>
+                            Attachment && (
+                              <Attachment
+                                attachment={attachment}
+                                key={`${message.id}-${attachmentIndex}`}
+                              />
+                            ),
+                        );
+                      case 'files':
+                        return (
+                          FileAttachmentGroup && (
+                            <FileAttachmentGroup
+                              files={files}
+                              key={`file_attachment_group_${messageContentOrderIndex}`}
+                              messageId={message.id}
+                            />
+                          )
+                        );
+                      case 'gallery':
+                        return (
+                          Gallery && (
+                            <Gallery
+                              alignment={alignment}
+                              groupStyles={groupStyles}
+                              hasThreadReplies={!!message?.reply_count}
+                              images={images}
+                              key={`gallery_${messageContentOrderIndex}`}
+                              message={message}
+                              threadList={threadList}
+                              videos={videos}
+                            />
+                          )
+                        );
+                      case 'text':
+                      default:
+                        return otherAttachments?.length && otherAttachments[0].actions ? null : (
+                          <MessageTextContainer<StreamChatGenerics>
+                            key={`message_text_container_${messageContentOrderIndex}`}
+                            message={message}
+                            messageOverlay
+                            messageTextNumberOfLines={messageTextNumberOfLines}
+                            onlyEmojis={onlyEmojis}
+                          />
+                        );
+                    }
+                  },
+                )}
+              </View>
+            </Animated.View>
+            {messageActions && (
+              <MessageActionList
+                MessageActionListItem={MessageActionListItem}
+                showScreen={showScreen}
+                {...messageActionProps}
+                message={message}
+              />
+            )}
+            {!!messageReactionTitle &&
+            message.latest_reactions &&
+            message.latest_reactions.length > 0 ? (
+              <OverlayReactions
+                alignment={alignment}
+                OverlayReactionsAvatar={OverlayReactionsAvatar}
+                reactions={
+                  message.latest_reactions.map((reaction) => ({
+                    alignment: clientId && clientId === reaction.user?.id ? 'right' : 'left',
+                    id: reaction?.user?.id || '',
+                    image: reaction?.user?.image,
+                    name: reaction?.user?.name || reaction.user_id || '',
+                    type: reaction.type,
+                  })) as Reaction[]
+                }
+                showScreen={showScreen}
+                supportedReactions={messagesContext?.supportedReactions}
+                title={messageReactionTitle}
+              />
+            ) : null}
+          </View>
+        )}
+      </Animated.View>
+    </TapGestureHandler>
+  );
+
+  // Scroll will only be enabled for message overlay when we show actions.
+  // When we show the reactions, we don't want to enable scroll since OverlayReactions component
+  // in itself is scrollable (FlatList). FlatList inside a ScrollView is not a good idea and results in error from RN.
+  const isScrollEnabled = !!messageActions && overlay === 'message';
+
   return (
     <ChatProvider value={chatContext}>
       <MessagesProvider value={messagesContext}>
@@ -319,198 +515,23 @@ const MessageOverlayWithContext = <
               >
                 <Animated.View style={[StyleSheet.absoluteFillObject]}>
                   <SafeAreaView style={styles.flex}>
-                    <TapGestureHandler
-                      maxDist={32}
-                      onHandlerStateChange={({ nativeEvent: { state } }) => {
-                        if (state === State.END) {
-                          setOverlay('none');
-                        }
-                      }}
-                    >
-                      <Animated.View style={[styles.flex, panStyle]}>
-                        {message && (
-                          <View
-                            style={[
-                              styles.center,
-                              styles.overlayPadding,
-                              { padding: overlayPadding },
-                              alignment === 'left' ? styles.alignStart : styles.alignEnd,
-                            ]}
-                          >
-                            {handleReaction && ownCapabilities?.sendReaction ? (
-                              <OverlayReactionList
-                                messageLayout={messageLayout}
-                                ownReactionTypes={
-                                  message?.own_reactions?.map((reaction) => reaction.type) || []
-                                }
-                                showScreen={showScreen}
-                              />
-                            ) : null}
-                            <Animated.View
-                              onLayout={({
-                                nativeEvent: {
-                                  layout: { height: layoutHeight, width: layoutWidth, x, y },
-                                },
-                              }) => {
-                                messageLayout.value = {
-                                  x: alignment === 'left' ? x + layoutWidth : x,
-                                  y,
-                                };
-                                messageWidth.value = layoutWidth;
-                                messageHeight.value = layoutHeight;
-                              }}
-                              style={[styles.alignEnd, styles.row, showScreenStyle]}
-                            >
-                              {alignment === 'left' && MessageAvatar && (
-                                <MessageAvatar {...{ alignment, message, showAvatar: true }} />
-                              )}
-                              <View
-                                pointerEvents='none'
-                                style={[
-                                  styles.containerInner,
-                                  {
-                                    backgroundColor:
-                                      onlyEmojis && !message.quoted_message
-                                        ? transparent
-                                        : otherAttachments?.length
-                                        ? otherAttachments[0].type === 'giphy'
-                                          ? !message.quoted_message
-                                            ? transparent
-                                            : grey_gainsboro
-                                          : blue_alice
-                                        : alignment === 'left'
-                                        ? white_smoke
-                                        : grey_gainsboro,
-                                    borderBottomLeftRadius:
-                                      (groupStyle === 'left_bottom' ||
-                                        groupStyle === 'left_single') &&
-                                      (!hasThreadReplies || threadList)
-                                        ? borderRadiusS
-                                        : borderRadiusL,
-                                    borderBottomRightRadius:
-                                      (groupStyle === 'right_bottom' ||
-                                        groupStyle === 'right_single') &&
-                                      (!hasThreadReplies || threadList)
-                                        ? borderRadiusS
-                                        : borderRadiusL,
-                                    borderColor: grey_whisper,
-                                  },
-                                  (onlyEmojis && !message.quoted_message) ||
-                                  otherAttachments?.length
-                                    ? { borderWidth: 0 }
-                                    : {},
-                                  containerInner,
-                                ]}
-                              >
-                                {messagesContext?.messageContentOrder?.map(
-                                  (messageContentType, messageContentOrderIndex) => {
-                                    switch (messageContentType) {
-                                      case 'quoted_reply':
-                                        return (
-                                          message.quoted_message &&
-                                          Reply && (
-                                            <View
-                                              key={`quoted_reply_${messageContentOrderIndex}`}
-                                              style={[styles.replyContainer, replyContainer]}
-                                            >
-                                              <Reply
-                                                quotedMessage={
-                                                  message.quoted_message as ReplyProps<StreamChatGenerics>['quotedMessage']
-                                                }
-                                                styles={{
-                                                  messageContainer: {
-                                                    maxWidth: vw(60),
-                                                  },
-                                                }}
-                                              />
-                                            </View>
-                                          )
-                                        );
-                                      case 'attachments':
-                                        return otherAttachments?.map(
-                                          (attachment, attachmentIndex) =>
-                                            Attachment && (
-                                              <Attachment
-                                                attachment={attachment}
-                                                key={`${message.id}-${attachmentIndex}`}
-                                              />
-                                            ),
-                                        );
-                                      case 'files':
-                                        return (
-                                          FileAttachmentGroup && (
-                                            <FileAttachmentGroup
-                                              files={files}
-                                              key={`file_attachment_group_${messageContentOrderIndex}`}
-                                              messageId={message.id}
-                                            />
-                                          )
-                                        );
-                                      case 'gallery':
-                                        return (
-                                          Gallery && (
-                                            <Gallery
-                                              alignment={alignment}
-                                              groupStyles={groupStyles}
-                                              hasThreadReplies={!!message?.reply_count}
-                                              images={images}
-                                              key={`gallery_${messageContentOrderIndex}`}
-                                              message={message}
-                                              threadList={threadList}
-                                              videos={videos}
-                                            />
-                                          )
-                                        );
-                                      case 'text':
-                                      default:
-                                        return otherAttachments?.length &&
-                                          otherAttachments[0].actions ? null : (
-                                          <MessageTextContainer<StreamChatGenerics>
-                                            key={`message_text_container_${messageContentOrderIndex}`}
-                                            message={message}
-                                            messageOverlay
-                                            messageTextNumberOfLines={messageTextNumberOfLines}
-                                            onlyEmojis={onlyEmojis}
-                                          />
-                                        );
-                                    }
-                                  },
-                                )}
-                              </View>
-                            </Animated.View>
-                            {messageActions && (
-                              <MessageActionList
-                                MessageActionListItem={MessageActionListItem}
-                                showScreen={showScreen}
-                                {...messageActionProps}
-                                message={message}
-                              />
-                            )}
-                            {!!messageReactionTitle &&
-                            message.latest_reactions &&
-                            message.latest_reactions.length > 0 ? (
-                              <OverlayReactions
-                                alignment={alignment}
-                                OverlayReactionsAvatar={OverlayReactionsAvatar}
-                                reactions={
-                                  message.latest_reactions.map((reaction) => ({
-                                    alignment:
-                                      clientId && clientId === reaction.user?.id ? 'right' : 'left',
-                                    id: reaction?.user?.id || '',
-                                    image: reaction?.user?.image,
-                                    name: reaction?.user?.name || reaction.user_id || '',
-                                    type: reaction.type,
-                                  })) as Reaction[]
-                                }
-                                showScreen={showScreen}
-                                supportedReactions={messagesContext?.supportedReactions}
-                                title={messageReactionTitle}
-                              />
-                            ) : null}
-                          </View>
-                        )}
-                      </Animated.View>
-                    </TapGestureHandler>
+                    {isScrollEnabled ? (
+                      <ScrollView
+                        alwaysBounceVertical={false}
+                        contentContainerStyle={[
+                          styles.center,
+                          {
+                            paddingTop: reactionListHeight,
+                          },
+                        ]}
+                        showsVerticalScrollIndicator={false}
+                        style={[styles.flex, styles.scrollView]}
+                      >
+                        {renderContent()}
+                      </ScrollView>
+                    ) : (
+                      renderContent(messageTextNumberOfLines)
+                    )}
                   </SafeAreaView>
                 </Animated.View>
               </PanGestureHandler>
diff --git a/package/src/components/MessageOverlay/OverlayReactionList.tsx b/package/src/components/MessageOverlay/OverlayReactionList.tsx
index a78e5e0085..b3b8bb3321 100644
--- a/package/src/components/MessageOverlay/OverlayReactionList.tsx
+++ b/package/src/components/MessageOverlay/OverlayReactionList.tsx
@@ -239,6 +239,7 @@ export type OverlayReactionListPropsWithContext<
       y: number;
     }>;
     ownReactionTypes: string[];
+    setReactionListHeight: React.Dispatch<React.SetStateAction<number>>;
     showScreen: Animated.SharedValue<number>;
     fill?: FillProps['fill'];
   };
@@ -254,6 +255,7 @@ const OverlayReactionListWithContext = <
     handleReaction,
     messageLayout,
     ownReactionTypes,
+    setReactionListHeight,
     showScreen,
     setOverlay,
     supportedReactions = reactionData,
@@ -354,6 +356,7 @@ const OverlayReactionListWithContext = <
           }) => {
             reactionListLayout.value = { height, width: layoutWidth };
             reactionListHeight.value = height;
+            setReactionListHeight(height);
           }}
           style={[
             styles.reactionList,