fix: prevent compose box from shifting to top when expanded

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;

src/components/SwipeableView/types.ts

@@ -1,11 +1,15 @@
 import type {ReactNode} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 
 type SwipeableViewProps = {
     /** The content to be rendered within the SwipeableView */
     children: ReactNode;
 
     /** 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;

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>

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>
     );
 }