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 {children};
+ return (
+
+ {children}
+
+ );
}
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;
};
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() {
+ {children}
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 (
-
-
+
+
+
);
}