Skip to content

Expense - Reduce confirmation form scrolling #96203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
emkhalid wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Expense - Reduce confirmation form scrolling #96203

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb18fac
Reduce expense confirmation form scrolling
emkhalid Jul 15, 2026
c67b173
Merge branch 'main' into fix/95564-reduce-expense-form-scrolling
emkhalid Jul 15, 2026
34ed3f9
Fix receipt empty state inline style
emkhalid Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/MoneyRequestConfirmationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,7 @@ function MoneyRequestConfirmationList({

const sections = useConfirmationSections({
isTypeSplit,
isTypeInvoice,
shouldHideToSection,
shouldForceTopEmptySections,
participantRowErrors,
Expand Down
6 changes: 5 additions & 1 deletion src/components/MoneyRequestConfirmationList/hooks/useConfirmationSections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ type UseConfirmationSectionsParams = {
/** Whether the current IOU type is split */
isTypeSplit: boolean;

/** Whether the current IOU type is invoice (keeps the "To" header, which pairs with the invoice "Send from" field) */
isTypeInvoice?: boolean;

/** Whether the "to" section should be hidden (used when adding directly to a report) */
shouldHideToSection: boolean;

Expand Down Expand Up @@ -55,6 +58,7 @@ type UseConfirmationSectionsParams = {
*/
function useConfirmationSections({
isTypeSplit,
isTypeInvoice = false,
shouldHideToSection,
shouldForceTopEmptySections = false,
participantRowErrors,
Expand Down Expand Up @@ -104,7 +108,7 @@ function useConfirmationSections({
];

options.push({
title: selectedParticipants.length > 0 ? translate('common.to') : undefined,
title: isTypeInvoice && selectedParticipants.length > 0 ? translate('common.to') : undefined,
data: participantRows,
sectionIndex: 0,
});
Expand Down
3 changes: 2 additions & 1 deletion src/components/MoneyRequestConfirmationListFooter/sections/ReceiptSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,8 @@ function ReceiptSection({
}
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()));
}}
style={[compact.isCompactMode ? undefined : styles.mv3, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : styles.moneyRequestViewImage]}
isCompact={!compact.isCompactMode}
style={[compact.isCompactMode ? undefined : styles.mv3, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : undefined]}
/>
);
}
Expand Down
83 changes: 55 additions & 28 deletions src/components/ReceiptEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ type ReceiptEmptyStateProps = {
/** Whether the receipt empty state should extend to the full height of the container. */
shouldUseFullHeight?: boolean;

/** Whether to render the small banner layout (icon + label in a row) instead of the full-height box */
isCompact?: boolean;

style?: StyleProp<ViewStyle>;

/** Callback to be called when the image loads */
Expand Down Expand Up @@ -75,6 +78,7 @@ function ReceiptEmptyState({
isThumbnail = false,
isInMoneyRequestView = false,
shouldUseFullHeight = false,
isCompact = false,
style,
onLoad,
isDisplayedInWideRHP = false,
Expand All @@ -89,15 +93,17 @@ function ReceiptEmptyState({
const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(setReceiptFile);

const Wrapper = onPress ? PressableWithoutFeedback : View;
const containerStyle = [
styles.alignItemsCenter,
styles.justifyContentCenter,
styles.moneyRequestViewImage,
isDisplayedInWideRHP && !disabled && styles.pb5,
isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
style,
];
const containerStyle = isCompact
? [styles.alignItemsCenter, styles.justifyContentCenter, styles.receiptEmptyStateCompact, styles.moneyRequestAttachReceipt, style]
: [
styles.alignItemsCenter,
styles.justifyContentCenter,
styles.moneyRequestViewImage,
isDisplayedInWideRHP && !disabled && styles.pb5,
isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
style,
];

useEffect(() => {
if (isLoadedRef.current) {
Expand Down Expand Up @@ -128,33 +134,54 @@ function ReceiptEmptyState({
>
{PDFValidationComponent}
{ErrorModal}
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
{isCompact ? (
Comment thread
emkhalid marked this conversation as resolved.
<View style={[styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap3]}>
Comment thread
emkhalid marked this conversation as resolved.
<View style={styles.pRelative}>
<Icon
fill={theme.border}
src={icons.Receipt}
width={variables.eReceiptEmptyIconWidth}
height={variables.eReceiptEmptyIconWidth}
width={variables.iconSizeXLarge}
height={variables.iconSizeXLarge}
/>
{!isThumbnail && (
<View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
<ReceiptPlaceholderPlusIcon
circleFill={theme.success}
plusFill={theme.receiptPlaceholderPlus}
size={variables.avatarSizeSmall}
/>
</View>
<View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSubscript, height: variables.avatarSizeSubscript}]}>
Comment thread
emkhalid marked this conversation as resolved.
Outdated
<ReceiptPlaceholderPlusIcon
circleFill={theme.success}
plusFill={theme.receiptPlaceholderPlus}
size={variables.avatarSizeSubscript}
/>
</View>
</View>
<Text style={styles.textStrong}>{translate('dropzone.addReceipt')}</Text>
</View>
) : (
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<View style={styles.pRelative}>
<Icon
fill={theme.border}
src={icons.Receipt}
width={variables.eReceiptEmptyIconWidth}
height={variables.eReceiptEmptyIconWidth}
/>
{!isThumbnail && (
<View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
<ReceiptPlaceholderPlusIcon
circleFill={theme.success}
plusFill={theme.receiptPlaceholderPlus}
size={variables.avatarSizeSmall}
/>
</View>
)}
</View>
{!isThumbnail && isDisplayedInWideRHP && (
<>
<Text style={[styles.textHeadline, styles.mt4]}>{translate('receipt.addAReceipt.phrase1')}</Text>
<Text style={[styles.textSupporting, styles.textNormal]}>{translate('receipt.addAReceipt.phrase2')}</Text>
</>
)}
</View>
{!isThumbnail && isDisplayedInWideRHP && (
<>
<Text style={[styles.textHeadline, styles.mt4]}>{translate('receipt.addAReceipt.phrase1')}</Text>
<Text style={[styles.textSupporting, styles.textNormal]}>{translate('receipt.addAReceipt.phrase2')}</Text>
</>
)}
</View>
</View>
)}
{isDisplayedInWideRHP && !disabled && <ReceiptAlternativeMethods />}
</Wrapper>
)}
Expand Down
8 changes: 8 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4952,6 +4952,14 @@ const staticStyles = (theme: ThemeColors) =>

receiptEmptyStateFullHeight: {height: '100%', borderRadius: 12},

receiptEmptyStateCompact: {
...spacing.mh5,
overflow: 'hidden',
borderRadius: variables.componentBorderRadiusLarge,
height: 52,
maxWidth: '100%',
},

moneyRequestAttachReceiptThumbnailIcon: {
position: 'absolute',
bottom: -4,
Expand Down
Loading