From 392985cd43d3f8b28ec94bd80bbb4e095c0e026a Mon Sep 17 00:00:00 2001
From: Nabi Ebrahimi <mnabijan049@gmail.com>
Date: Mon, 1 Jun 2026 16:01:01 +0430
Subject: [PATCH 1/2] fix: keep compose box anchored when expanded

---
 src/components/SwipeableView/index.native.tsx         | 11 +++++++++--
 src/components/SwipeableView/types.ts                 |  4 ++++
 .../report/ReportActionCompose/ComposerInputArea.tsx  |  4 +++-
 .../ReportActionCompose/ReportActionCompose.tsx       |  5 +++--
 src/pages/inbox/report/ReportFooter.tsx               | 10 ++++++++--
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/SwipeableView/index.native.tsx b/src/components/SwipeableView/index.native.tsx
index f2a4915cbc66..6f43e16f6dcf 100644
--- a/src/components/SwipeableView/index.native.tsx
+++ b/src/components/SwipeableView/index.native.tsx
@@ -3,7 +3,7 @@ import {PanResponder, View} from 'react-native';
 import CONST from '@src/CONST';
 import type SwipeableViewProps from './types';
 
-function SwipeableView({children, onSwipeDown}: SwipeableViewProps) {
+function SwipeableView({children, onSwipeDown, style}: SwipeableViewProps) {
     const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT;
     const oldYRef = useRef(0);
     const panResponder = useRef(
@@ -22,7 +22,14 @@ function SwipeableView({children, onSwipeDown}: SwipeableViewProps) {
         }),
     ).current;
 
-    return <View {...panResponder.panHandlers}>{children}</View>;
+    return (
+        <View
+            style={style}
+            {...panResponder.panHandlers}
+        >
+            {children}
+        </View>
+    );
 }
 
 export default SwipeableView;
diff --git a/src/components/SwipeableView/types.ts b/src/components/SwipeableView/types.ts
index 738e21bb73ee..b6a4f11ed8d0 100644
--- a/src/components/SwipeableView/types.ts
+++ b/src/components/SwipeableView/types.ts
@@ -1,4 +1,5 @@
 import type {ReactNode} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 
 type SwipeableViewProps = {
     /** The content to be rendered within the SwipeableView */
@@ -6,6 +7,9 @@ type SwipeableViewProps = {
 
     /** Callback to fire when the user swipes down on the child content */
     onSwipeDown: () => void;
+
+    /** Additional styles applied to the wrapping view */
+    style?: StyleProp<ViewStyle>;
 };
 
 export default SwipeableViewProps;
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx
index 2b59b2f8db2a..198df7f42398 100644
--- a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx
+++ b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import {View} from 'react-native';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,7 +16,7 @@ import ComposerInput from './ComposerInput';
 import ComposerLocalTime from './ComposerLocalTime';
 import ComposerSendButton from './ComposerSendButton';
 
-function ComposerInputArea() {
+function ComposerInputArea({children}: PropsWithChildren) {
     const {reportID} = useComposerState();
     const styles = useThemeStyles();
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
@@ -36,6 +37,7 @@ function ComposerInputArea() {
                             <ComposerSendButton />
                         </ComposerBox>
                     </ComposerDropZone>
+                    {children}
                 </ComposerContainer>
                 <ComposerImportedState />
             </View>
diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
index 984b242f8c9d..0fecf3f3e812 100644
--- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
@@ -26,8 +26,9 @@ type ReportActionComposeProps = {
 function ReportActionCompose({reportID}: ReportActionComposeProps) {
     return (
         <ComposerProvider reportID={reportID}>
-            <ComposerInputArea />
-            <ComposerDefaultFooter />
+            <ComposerInputArea>
+                <ComposerDefaultFooter />
+            </ComposerInputArea>
         </ComposerProvider>
     );
 }
diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx
index e61c585d3fcd..31e1e4f28e75 100644
--- a/src/pages/inbox/report/ReportFooter.tsx
+++ b/src/pages/inbox/report/ReportFooter.tsx
@@ -90,7 +90,10 @@ function ReportFooter() {
     if (!shouldHideComposer) {
         return (
             <View style={[chatFooterStyles, isComposerFullSize && styles.chatFooterFullCompose]}>
-                <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                <SwipeableView
+                    onSwipeDown={Keyboard.dismiss}
+                    style={isComposerFullSize ? styles.flex1 : undefined}
+                >
                     <ReportActionCompose reportID={reportIDFromRoute} />
                 </SwipeableView>
             </View>
@@ -161,7 +164,10 @@ function ReportFooter() {
             <View style={[styles.chatFooter, !isEditingWithComposer && styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
                 {isEditingWithComposer && (
                     <View style={[isComposerFullSize ? styles.chatFooterFullCompose : undefined, styles.mb2]}>
-                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                        <SwipeableView
+                            onSwipeDown={Keyboard.dismiss}
+                            style={isComposerFullSize ? styles.flex1 : undefined}
+                        >
                             <ReportActionCompose.EditOnly reportID={reportIDFromRoute} />
                         </SwipeableView>
                     </View>

From e76f627893d6b518634f0d137f0da54e1ec4ee1d Mon Sep 17 00:00:00 2001
From: nabi-ebrahimi <mnabijan049@gmail.com>
Date: Tue, 2 Jun 2026 12:51:44 +0430
Subject: [PATCH 2/2] fix: remove unnecessary SwipeableView flex styles

---
 src/pages/inbox/report/ReportFooter.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx
index 31e1e4f28e75..e61c585d3fcd 100644
--- a/src/pages/inbox/report/ReportFooter.tsx
+++ b/src/pages/inbox/report/ReportFooter.tsx
@@ -90,10 +90,7 @@ function ReportFooter() {
     if (!shouldHideComposer) {
         return (
             <View style={[chatFooterStyles, isComposerFullSize && styles.chatFooterFullCompose]}>
-                <SwipeableView
-                    onSwipeDown={Keyboard.dismiss}
-                    style={isComposerFullSize ? styles.flex1 : undefined}
-                >
+                <SwipeableView onSwipeDown={Keyboard.dismiss}>
                     <ReportActionCompose reportID={reportIDFromRoute} />
                 </SwipeableView>
             </View>
@@ -164,10 +161,7 @@ function ReportFooter() {
             <View style={[styles.chatFooter, !isEditingWithComposer && styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
                 {isEditingWithComposer && (
                     <View style={[isComposerFullSize ? styles.chatFooterFullCompose : undefined, styles.mb2]}>
-                        <SwipeableView
-                            onSwipeDown={Keyboard.dismiss}
-                            style={isComposerFullSize ? styles.flex1 : undefined}
-                        >
+                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
                             <ReportActionCompose.EditOnly reportID={reportIDFromRoute} />
                         </SwipeableView>
                     </View>