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