[Due for payment 2026-01-29] [$250] Company card - The last card is covered by bottom navigation fully or partially

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.86-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory around https://github.com/Expensify/Expensify/issues/579524 - The user is blocked with an important flow
Email or phone of affected tester (no customers): applausetester+ccardfeed@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Critical User Impact
Device used: Samsung s10/ Android 12
App Component: Workspace Settings

Action Performed:

1. Open Hybrid app
2. Log in using applausetester+ccardfeed@applause.expensifail.com
3. Go to Workspace > choose Company card tests- DO NOT DELETE (Default)
4. Go to Company cards
5. Scroll down to the bottom
6. Disable the internet connection

Expected Result:

The last company card should be fully visible and selectable both online and offline.

Actual Result:

The last company card is partially covered online and fully covered offline due to the lack of bottom margin, which makes the card unselectable.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7036067_1766499240939.Screen_Recording_20251223_165038_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022003594977773517714
• Upwork Job ID: 2003594977773517714
• Last Price Increase: 2026-01-13
• Automatic offers:
• daledah | Contributor | 110116219

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-02 09:11:41 UTC.

Proposal

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

The last company card is partially covered online and fully covered offline due to the lack of bottom margin, which makes the card unselectable.

What is the root cause of that problem?

The Table.Body component (which uses FlashList internally) lacked bottom padding to account for:

• Bottom safe area padding (for devices with notches/home indicators)
• Offline indicator height (when offline, the indicator at the bottom covered the last item)

Without padding, there was no space reserved for the indicator

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

We should add bottomSafeAreaPaddingStyle from useBottomSafeSafeAreaPaddingStyle hook for the WorkspaceCompanyCardsTable component

    const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
        addBottomSafeAreaPadding: true,
        addOfflineIndicatorBottomSafeAreaPadding: true,
    });

    <>
        {!shouldUseNarrowTableLayout && !isLoadingFeed && <Table.Header />}
        <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />
    </>

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx

Lines 312 to 315 in 634b5ce

	<>
	{!shouldUseNarrowTableLayout && !isLoadingFeed && <Table.Header />}
	<Table.Body />
	</>

What alternative solutions did you explore? (Optional)

Or we can add the props shouldUseScrollView as true here

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 77 to 84 in 3fd1306

	<WorkspacePageWithSections
	icon={memoizedIllustrations.CompanyCard}
	headerText={translate('workspace.common.companyCards')}
	route={route}
	shouldShowOfflineIndicatorInWideScreen
	showLoadingAsFirstRender={false}
	addBottomSafeAreaPadding
	>

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abbasifaizan70]

Proposal

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

The last company card in the Company Cards list is partially covered online and fully covered offline, making it unselectable.

What is the root cause of that problem?

The issue is that the TableBody component (which uses FlashList to render the company cards list) doesn't have support for bottom safe area padding. When the offline indicator appears at the bottom of the screen, it overlaps the last item in the list.

How the Company Cards page is structured:

The WorkspaceCompanyCardsPage uses WorkspacePageWithSections which wraps the content:

    return (
        <AccessOrNotFoundWrapper
            policyID={route.params.policyID}
            featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
        >
            <WorkspacePageWithSections
                icon={memoizedIllustrations.CompanyCard}
                headerText={translate('workspace.common.companyCards')}
                route={route}
                shouldShowOfflineIndicatorInWideScreen
                showLoadingAsFirstRender={false}
                addBottomSafeAreaPadding
            >
                <WorkspaceCompanyCardsTable
                    policy={policy}
                    onAssignCard={assignCard}
                    isAssigningCardDisabled={isAssigningCardDisabled}
                />
            </WorkspacePageWithSections>

While addBottomSafeAreaPadding is passed to WorkspacePageWithSections, this prop is only applied when shouldUseScrollView is true:

                    <>
                        {shouldUseScrollView ? (
                            <ScrollViewWithContext
                                keyboardShouldPersistTaps="handled"
                                addBottomSafeAreaPadding={addBottomSafeAreaPadding}
                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
                            >
                                <View style={[styles.w100, styles.flex1]}>{content}</View>
                            </ScrollViewWithContext>
                        ) : (
                            content
                        )}

Since shouldUseScrollView defaults to false, the content (company cards table) is rendered directly without safe area padding.

The TableBody component (App/src/components/Table/TableBody.tsx) uses FlashList but doesn't have props for safe area padding:

type TableBodyProps = ViewProps & {
    /** Optional custom styles for the FlashList content container. */
    contentContainerStyle?: StyleProp<ViewStyle>;
};

Comparison with other components:

Other scrollable components like ScrollView and SectionList support these padding props:

function ScrollView({
    children,
    scrollIndicatorInsets,
    contentContainerStyle: contentContainerStyleProp,
    addBottomSafeAreaPadding,
    addOfflineIndicatorBottomSafeAreaPadding,
    ref,
    ...props
}: ScrollViewProps) {
    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
        addBottomSafeAreaPadding,
        addOfflineIndicatorBottomSafeAreaPadding,
        style: contentContainerStyleProp,
    });

function BaseSectionList<ItemT, SectionT>({
    addBottomSafeAreaPadding,
    addOfflineIndicatorBottomSafeAreaPadding,
    contentContainerStyle: contentContainerStyleProp,
    ref,
    ...restProps
}: SectionListProps<ItemT, SectionT>) {
    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp});

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

Add addBottomSafeAreaPadding and addOfflineIndicatorBottomSafeAreaPadding props to the TableBody component, following the same pattern used by ScrollView and SectionList.

File 1: App/src/components/Table/TableBody.tsx

Change 1 - Add import for the hook:

import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';

Change 2 - Update TableBodyProps type:

type TableBodyProps = ViewProps & {
    /** Optional custom styles for the FlashList content container. */
    contentContainerStyle?: StyleProp<ViewStyle>;

    /**
     * Whether to add bottom safe area padding to the content.
     */
    addBottomSafeAreaPadding?: boolean;

    /**
     * Whether to add additional padding for the offline indicator when offline.
     */
    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
};

Change 3 - Update function to use the hook:

function TableBody<T>({contentContainerStyle, addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, ...props}: TableBodyProps) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const {processedData: filteredAndSortedData, originalDataLength, activeSearchString, activeFilters, filterConfig, listProps} = useTableContext<T>();
    const {ListEmptyComponent, contentContainerStyle: listContentContainerStyle, ...restListProps} = listProps ?? {};

    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding});
    // ... rest of function

Change 4 - Apply padding to FlashList contentContainerStyle:

<FlashList<T>
    data={filteredAndSortedData}
    ListEmptyComponent={isEmptyResult ? EmptyResultComponent : ListEmptyComponent}
    contentContainerStyle={[filteredAndSortedData.length === 0 && styles.flex1, listContentContainerStyle, contentContainerStyle, bottomSafeAreaPaddingStyle]}
    {...restListProps}
/>

---

File 2: App/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx

Change - Pass the padding props to Table.Body:

{showCards && (
    <>
        {!shouldUseNarrowTableLayout && !isLoadingFeed && <Table.Header />}
        <Table.Body
            addBottomSafeAreaPadding
            addOfflineIndicatorBottomSafeAreaPadding
        />
    </>
)}

What alternative solutions did you explore? (Optional)

None

[samranahm]

Proposal

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

The last company card on the list is partially or fully covered by the bottom navigation bar, making it difficult or impossible to select. This happens both online and offline, but it's worse when offline.

What is the root cause of that problem?

When the table content is not wrapped in a ScrollView, the bottom safe area padding is not applied to create space above the navigation bar. The addBottomSafeAreaPadding prop is set to true in WorkspacePageWithSections, but this padding only works when shouldUseScrollView is true. When the content is rendered directly without a scroll wrapper, the safe area padding is ignored, leaving no gap between the last card and the navigation.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 85 to 90 in 04f9a0f

	<WorkspaceCompanyCardsTable
	policy={policy}
	onAssignCard={assignCard}
	isAssigningCardDisabled={isAssigningCardDisabled}
	/>
	</WorkspacePageWithSections>

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

Wrap the table content with a View that applies bottom safe area padding using the useBottomSafeSafeAreaPaddingStyle hook. This ensures that bottom padding is added regardless of whether the content is in a ScrollView or not.

const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({
    addBottomSafeAreaPadding: true,
});

<View style={bottomSafeAreaPaddingStyle}>
    <WorkspaceCompanyCardsTable
        policy={policy}
        onAssignCard={assignCard}
        isAssigningCardDisabled={isAssigningCardDisabled}
    />
</View>

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

The last company card is partially covered online and fully covered offline due to the lack of bottom margin, which makes the card unselectable.

What is the root cause of that problem?

In WorkspaceCompanyCardsPage, WorkspacePageWithSections uses addBottomSafeAreaPadding but does not use shouldUseScrollView.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 77 to 90 in 589574c

	<WorkspacePageWithSections
	icon={memoizedIllustrations.CompanyCard}
	headerText={translate('workspace.common.companyCards')}
	route={route}
	shouldShowOfflineIndicatorInWideScreen
	showLoadingAsFirstRender={false}
	addBottomSafeAreaPadding
	>
	<WorkspaceCompanyCardsTable
	policy={policy}
	onAssignCard={assignCard}
	isAssigningCardDisabled={isAssigningCardDisabled}
	/>
	</WorkspacePageWithSections>

Therefore, addBottomSafeAreaPadding will have no effect, and the bottom padding will not be added.

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 232 to 242 in 589574c

	{shouldUseScrollView ? (
	<ScrollViewWithContext
	keyboardShouldPersistTaps="handled"
	addBottomSafeAreaPadding={addBottomSafeAreaPadding}
	style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
	>
	<View style={[styles.w100, styles.flex1]}>{content}</View>
	</ScrollViewWithContext>
	) : (
	content
	)}

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

• We could pass shouldUseScrollView to WorkspacePageWithSections to resolve the current issue, but this would result in two nested ScrollViews. There have already been some issues reported related to scrolling problems caused by nested ScrollViews.
• To avoid misunderstanding the use of addBottomSafeAreaPadding (thinking that bottom padding will be added due to this prop, while in reality it will not be added if used alone), we need to add a wrapper that provides bottom padding in the case where shouldUseScrollView === false:

1. Add a private component in WorkspacePageWithSections.
   

   App/src/pages/workspace/WorkspacePageWithSections.tsx

   Line 96 in 589574c

type ContentWithBottomSafeAreaPaddingProps = {
    children: ReactNode;
    addBottomSafeAreaPadding?: boolean;
    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
};

function ContentWithBottomSafeAreaPadding({children, addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding}: ContentWithBottomSafeAreaPaddingProps) {
    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
        addBottomSafeAreaPadding,
        addOfflineIndicatorBottomSafeAreaPadding,
        style: {flex: 1},
    });

    if (!addBottomSafeAreaPadding) {
        return children;
    }

    return <View style={contentContainerStyle}>{children}</View>;
}

2. Use ContentWithBottomSafeAreaPadding.
   

   App/src/pages/workspace/WorkspacePageWithSections.tsx

   Line 241 in 589574c

   content

    <ContentWithBottomSafeAreaPadding addBottomSafeAreaPadding={addBottomSafeAreaPadding}>{content}</ContentWithBottomSafeAreaPadding>

What alternative solutions did you explore? (Optional)

N/A