[Due for payment 2026-01-29] [$250] Ensure Report titles can wrap to two lines

[dubielzyk-expensify]

Problem

When moving an expense to another report the report tiles can often be long, and given they get truncated, it can be hard to understand which report is which:

To get to this screen you have to:

1. Go to Reports
2. Tap Expenses in the left navigation
3. Use checkbox to select an expense
4. Tap 1 selected button and choose Move expense

Solution

Let's ensure report titles can wrap to two lines here and keep everything else intact:

cc @VictoriaExpensify @Expensify/design @trjExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011216775468692039
• Upwork Job ID: 2011216775468692039
• Last Price Increase: 2026-01-13
• Automatic offers:
• mkhutornyi | Reviewer | 110106592

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022011216775468692039

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mkhutornyi (External)

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Ensure Report titles can wrap to two lines

What is the root cause of that problem?

In InviteMemberListItem, report titles are displayed using TextWithTooltip with styles.pre (which sets whiteSpace: 'pre' preventing wrapping) and numberOfLines defaults to 1

App/src/components/SelectionList/ListItem/InviteMemberListItem.tsx

Lines 135 to 145 in 5e875e2

	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.text ?? '')}
	style={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	item.isBold !== false && styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	]}
	/>

The TextWithTooltip component defaults numberOfLines to 1:

App/src/components/TextWithTooltip/index.tsx

Line 10 in 5e875e2

function TextWithTooltip({testID, text, shouldShowTooltip, style, numberOfLines = 1, forwardedFSClass}: TextWithTooltipProps) {

And styles.pre sets whiteSpace: 'pre' which prevents text wrapping:

App/src/styles/utils/whiteSpace/index.ts

Lines 10 to 12 in 5e875e2

	pre: {
	whiteSpace: 'pre',
	},

What changes do you think we should make in order to solve the problem?

Update InviteMemberListItem to allow report titles to wrap to two lines

                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                <TextWithTooltip
                                    shouldShowTooltip={showTooltip}
                                    text={Str.removeSMSDomain(item.text ?? '')}
                                    numberOfLines={2}
                                    style={[
                                        styles.optionDisplayName,
                                        isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                        item.isBold !== false && styles.sidebarLinkTextBold,
                                        styles.preWrap,
                                        item.alternateText ? styles.mb1 : null,
                                    ]}
                                />
                            </View>

App/src/components/SelectionList/ListItem/InviteMemberListItem.tsx

Lines 134 to 146 in 5e875e2

	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.text ?? '')}
	style={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	item.isBold !== false && styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	]}
	/>
	</View>

We could also update the same component in SelectionListWithSections for consistency if needed

App/src/components/SelectionListWithSections/InviteMemberListItem.tsx

Lines 134 to 146 in 5e875e2

	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.text ?? '')}
	style={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	item.isBold !== false && styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	]}
	/>
	</View>

What alternative solutions did you explore? (Optional)

None

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Report names in the report selector show only one line and get cut off. The list should allow two lines so long names are readable.

What is the root cause of that problem?

The report selector uses InviteMemberListItem, which always renders the title as one line and forces single-line styling. The selector list also does not enable multiline rows.

App/src/components/SelectionList/ListItem/InviteMemberListItem.tsx

Lines 133 to 153 in 98a3245

	<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.text ?? '')}
	style={[
	styles.optionDisplayName,
	isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	item.isBold !== false && styles.sidebarLinkTextBold,
	styles.pre,
	item.alternateText ? styles.mb1 : null,
	]}
	/>
	</View>
	{!!item.alternateText && (
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={Str.removeSMSDomain(item.alternateText ?? '')}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	/>
	)}

App/src/pages/iou/request/step/IOURequestEditReportCommon.tsx

Lines 317 to 330 in 98a3245

	<SelectionList
	data={reportOptions}
	onSelectRow={handleSelectReport}
	shouldShowTextInput={expenseReports.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
	textInputOptions={{
	value: searchValue,
	label: translate('common.search'),
	headerMessage,
	onChangeText: setSearchValue,
	}}
	shouldSingleExecuteRowSelect
	initiallyFocusedItemKey={selectedReportID}
	ListItem={InviteMemberListItem}
	listFooterContent={

What changes do you think we should make in order to solve the problem?

Enable multiline rows for the report selector and pass multiline props into InviteMemberListItem so the title can wrap to two lines when allowed.

Updated code:

<SelectionList
    ....
    isRowMultilineSupported
    ....
/>

<TextWithTooltip
    ....
    numberOfLines={isMultilineSupported ? 2 : 1}
    style={[
        styles.optionDisplayName,
        isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
        item.isBold !== false && styles.sidebarLinkTextBold,
        isMultilineSupported ? styles.preWrap : styles.pre,
        item.alternateText ? styles.mb1 : null,
    ]}
/>