[$250] Introduce the ability to add a new category within the category list

[dylanexpensify]

Problem: Currently, when an admin of a workspace is searching for a category in the selector, and doesn't see one they need, they have to leave the expense and head to workspace settings > categories > add new category, then head back to the expense to select it.

Solution: let's add the option for an admin whose workspace isn't connected to an accounting integration to add a new category when in the category list. Clicking it will allow the admin to create a new category there and then and apply it to the expense.x

Mocks for reference:

Issue Owner

Current Issue Owner: @ahmedGaber93

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022034316616997465729
• Upwork Job ID: 2034316616997465729
• Last Price Increase: 2026-03-18

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Proposal

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

When an admin of a workspace is searching for a category in the selector and doesn't see one they need, they have to leave the expense and head to workspace settings > categories > add new category, then head back to the expense to select it.

What is the root cause of that problem?

IOURequestStepCategory renders a StepScreenWrapper with no header action button, so there is no in-context entry point to create a category. The existing SETTINGS_CATEGORY_CREATE route already supports a backTo parameter, but nothing in the category step links to it.

The relevant code that needs a "+" action:

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

Lines 172 to 238 in e4c8216

	return (
	<StepScreenWrapper
	headerTitle={translate('common.category')}
	onBackButtonPress={navigateBack}
	shouldShowWrapper
	shouldShowNotFoundPage={shouldShowNotFoundPage}
	shouldShowOfflineIndicator={policyCategories !== undefined}
	testID="IOURequestStepCategory"
	shouldEnableKeyboardAvoidingView={false}
	>
	{isLoading && (
	<ActivityIndicator
	size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
	style={[styles.flex1]}
	reasonAttributes={reasonAttributes}
	/>
	)}
	{shouldShowOfflineView && <FullPageOfflineBlockingView>{null}</FullPageOfflineBlockingView>}
	{shouldShowEmptyState && (
	<View style={[styles.flex1]}>
	<WorkspaceEmptyStateSection
	shouldStyleAsCard={false}
	icon={illustrations.EmptyStateExpenses}
	title={translate('workspace.categories.emptyCategories.title')}
	subtitle={translate('workspace.categories.emptyCategories.subtitle')}
	containerStyle={[styles.flex1, styles.justifyContentCenter]}
	/>
	{isPolicyAdmin(policy) && (
	<FixedFooter style={[styles.mtAuto, styles.pt5]}>
	<Button
	large
	success
	style={[styles.w100]}
	onPress={() => {
	if (!policyID || !report?.reportID) {
	return;
	}
	if (!policy?.areCategoriesEnabled) {
	enablePolicyCategories({...policyData, categories: policyCategories}, true, false);
	}
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	Navigation.navigate(
	ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(
	policyID,
	ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report.reportID, backTo, reportActionID),
	),
	);
	});
	}}
	text={translate('workspace.categories.editCategories')}
	pressOnEnter
	sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.EDIT_CATEGORIES_BUTTON}
	/>
	</FixedFooter>
	)}
	</View>
	)}
	{!shouldShowEmptyState && !isLoading && !shouldShowOfflineView && (
	<CategoryPicker
	selectedCategory={categoryForDisplay}
	policyID={policyID ?? report?.policyID}
	onSubmit={updateCategory}
	/>
	)}
	</StepScreenWrapper>

StepScreenWrapper currently does not expose a way to pass header action buttons through to HeaderWithBackButton:

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

Lines 12 to 42 in e4c8216

	type StepScreenWrapperProps = {
	/** The title to show in the header (should be translated already) */
	headerTitle: string;
	/** A function triggered when the back button is pressed */
	onBackButtonPress: () => void;
	/** A function triggered when the entry transition is ended. Useful for auto-focusing elements. */
	onEntryTransitionEnd?: () => void;
	/** Whether or not the wrapper should be shown (sometimes screens can be embedded inside another screen that already is using a wrapper) */
	shouldShowWrapper: boolean;
	/** Whether or not to display not found page */
	shouldShowNotFoundPage?: boolean;
	/** Whether to show offline indicator */
	shouldShowOfflineIndicator?: boolean;
	/** An ID used for unit testing */
	testID: string;
	/** Whether or not to include safe area padding */
	includeSafeAreaPaddingBottom?: boolean;
	/** Returns a function as a child to pass insets to or a node to render without insets */
	children: ReactNode | ((props: ScreenWrapperChildrenProps) => ReactNode);
	/** Flag to indicate if the keyboard avoiding view should be enabled */
	shouldEnableKeyboardAvoidingView?: boolean;
	};

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

Show a "+" button in the IOURequestStepCategory header only when the current user is a policy admin and the policy has no connected accounting integration. Tapping it navigates to SETTINGS_CATEGORY_CREATE with a backTo pointing back to the category step so the user automatically returns after saving.

1 — Expose header action props in StepScreenWrapper

// src/pages/iou/request/step/StepScreenWrapper.tsx
+import type {PopoverMenuItem} from '@components/PopoverMenu';

 type StepScreenWrapperProps = {
+    threeDotsMenuItems?: PopoverMenuItem[];
+    shouldMinimizeMenuButton?: boolean;
     headerTitle: string;
     ...
 };

 function StepScreenWrapper({
+    threeDotsMenuItems,
+    shouldMinimizeMenuButton,
     headerTitle,
     ...
 }) {
     ...
     <HeaderWithBackButton
         title={headerTitle}
         onBackButtonPress={onBackButtonPress}
+        shouldShowThreeDotsButton={!!threeDotsMenuItems?.length}
+        threeDotsMenuItems={threeDotsMenuItems}
+        shouldMinimizeMenuButton={shouldMinimizeMenuButton}
     />

2 — Add "+" button in IOURequestStepCategory

// src/pages/iou/request/step/IOURequestStepCategory.tsx
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import {getValidConnectedIntegration, isPolicyAdmin} from '@libs/PolicyUtils';

+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Plus']);
+
+    const canCreateCategoryInSitu = isPolicyAdmin(policy) && !getValidConnectedIntegration(policy);
+
+    const createCategoryMenuItems = canCreateCategoryInSitu
+        ? [
+              {
+                  icon: expensifyIcons.Plus,
+                  text: translate('workspace.categories.addCategory'),
+                  onSelected: () => {
+                      if (!policyID || !report?.reportID) {
+                          return;
+                      }
+                      Navigation.navigate(
+                          ROUTES.SETTINGS_CATEGORY_CREATE.getRoute(
+                              policyID,
+                              ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report.reportID, backTo, reportActionID),
+                          ),
+                      );
+                  },
+              },
+          ]
+        : undefined;

     return (
         <StepScreenWrapper
             headerTitle={translate('common.category')}
             onBackButtonPress={navigateBack}
+            threeDotsMenuItems={createCategoryMenuItems}
+            shouldMinimizeMenuButton
             shouldShowWrapper

Note: the more detailed implementation can be discussed in the PR phase

What alternative solutions did you explore? (Optional)

N/A

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.

[daledah]

To make it easier to test, this is the test branch and the result below:

Screen.Recording.2026-03-19.at.00.25.26.mov

[neerajbachani]

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

When a workspace admin opens the Category step during expense creation and the category they need doesn't exist, they must leave the expense, go to Workspace Settings -> Categories -> Add, then return. The mock shows a "+" icon button directly in the Category header to create a category in-context.

---

What is the root cause of that problem?

IOURequestStepCategory.tsx renders inside StepScreenWrapper, which only passes title and onBackButtonPress to HeaderWithBackButton - leaving no seam for extra header actions. HeaderWithBackButton already supports a children prop for right-side content (used by WorkspaceCategoriesPage for its Add button). The missing piece is threading a headerRightContent prop through StepScreenWrapper.

---

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

2 files changed.

1. src/pages/iou/request/step/StepScreenWrapper.tsx

Add one optional prop and pass it as children to HeaderWithBackButton:

 type StepScreenWrapperProps = {
     headerTitle: string;
     onBackButtonPress: () => void;
     onEntryTransitionEnd?: () => void;
     shouldShowWrapper: boolean;
     shouldShowNotFoundPage?: boolean;
     shouldShowOfflineIndicator?: boolean;
     testID: string;
     includeSafeAreaPaddingBottom?: boolean;
     children: ReactNode | ((props: ScreenWrapperChildrenProps) => ReactNode);
     shouldEnableKeyboardAvoidingView?: boolean;
+    /** Optional content rendered in the right side of the header */
+    headerRightContent?: ReactNode;
 };

 function StepScreenWrapper({
     ...
+    headerRightContent,
 }: StepScreenWrapperProps) {
     ...
     <HeaderWithBackButton
         title={headerTitle}
         onBackButtonPress={onBackButtonPress}
     >
+        {headerRightContent}
     </HeaderWithBackButton>

2. src/pages/iou/request/step/IOURequestStepCategory.tsx

+import Icon from '@components/Icon';
+import Tooltip from '@components/Tooltip';
+import {Pressable} from 'react-native';
+import * as Expensicons from '@src/components/Icon/Expensicons';
+import useTheme from '@hooks/useTheme';
+import {hasAccountingConnections, isPolicyAdmin} from '@libs/PolicyUtils';

 function IOURequestStepCategory({...}) {
     const styles = useThemeStyles();
+    const theme = useTheme();

+    // Show "+" only when user is a policy admin and workspace has no
+    // accounting integration (synced workspaces manage categories externally)
+    const shouldShowAddCategoryButton =
+        isPolicyAdmin(policy) && !hasAccountingConnections(policy);
+
+    const navigateToCreateCategory = () => {
+        if (!policyID || !report?.reportID) {
+            return;
+        }
+        Navigation.navigate(
+            ROUTES.SETTINGS_CATEGORY_CREATE.getRoute(
+                policyID,
+                ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(
+                    action, iouType, transactionID, report.reportID, backTo, reportActionID,
+                ),
+            ),
+        );
+    };

     return (
         <StepScreenWrapper
             headerTitle={translate('common.category')}
             onBackButtonPress={navigateBack}
             shouldShowWrapper
             shouldShowNotFoundPage={shouldShowNotFoundPage}
             shouldShowOfflineIndicator={policyCategories !== undefined}
             testID="IOURequestStepCategory"
             shouldEnableKeyboardAvoidingView={false}
+            headerRightContent={
+                shouldShowAddCategoryButton ? (
+                    <Tooltip text={translate('workspace.categories.addCategory')}>
+                        <Pressable
+                            onPress={navigateToCreateCategory}
+                            style={[styles.touchableButtonImage]}
+                            role={CONST.ROLE.BUTTON}
+                            accessibilityLabel={translate('workspace.categories.addCategory')}
+                        >
+                            <Icon src={Expensicons.Plus} fill={theme.icon} />
+                        </Pressable>
+                    </Tooltip>
+                ) : null
+            }
         >

Navigation flow:

IOURequestStepCategory  -> (tap +) ->  SETTINGS_CATEGORY_CREATE (backTo = category step)
    -> (save) ->  SETTINGS_CATEGORIES_ROOT  -> (back) ->  IOURequestStepCategory

New category appears automatically - IOURequestStepCategory subscribes to ONYXKEYS.COLLECTION.POLICY_CATEGORIES via Onyx reactivity.

---

What alternative solutions did you explore?

daledah's proposal -> three-dots menu (threeDotsMenuItems):
Technically functional but does not match the mock. The mock shows a plain "+" icon button directly in the header - not a kebab/dropdown menu. A single-item three-dots menu is inconsistent UX for a single action. The children prop pattern on HeaderWithBackButton is already used by WorkspaceCategoriesPage for this exact use case and produces the correct visual output matching the mock.

[melvin-bot]

📣 @neerajbachani! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>