[Due for payment 2026-04-30] [$250] Workspace - Missing subheader under “Select features to copy” in duplication flow

[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.3.60-17
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-20165/folder/13177080/44744009/1343292522
Email or phone of affected tester (no customers): dreamnitethedragon+vegst@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Launch app
2. Login with new gmail account and complete onboarding via track & budget expense
3. Go to workspace settings
4. Tap 3 dots next to workspace and select duplicate workspace
5. Tap next

Expected Result:

The sub header must show the text “Which features do you want to copy over to your new workspace?

Actual Result:

The subheader text is missing under the “Select features to copy” heading during the workspace duplication flow.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7132814_1776501770418.Screenrecorder-2026-04-18-13-56-07-5.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022045521476047714281
• Upwork Job ID: 2045521476047714281
• Last Price Increase: 2026-04-18

[MelvinBot]

Proposal

What is the root cause of that problem?

The subheader <Text> at WorkspaceDuplicateSelectFeaturesForm.tsx:353 uses styles.webViewStyles.baseFontStyle, which is a style designed for react-native-render-html — not regular <Text> components. That style includes flex: 1 (index.ts:247), which causes the text to collapse to zero height on Android inside the auto-height parent <View>.

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

Remove styles.webViewStyles.baseFontStyle from the subheader's style array at line 353 and use only styles.textSupporting (plus styles.mt1 for a small top margin), matching the pattern used by other similar screens (e.g., WorkspaceCompanyCardAddWorkEmailPage.tsx:143).

Change:

<Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>

to:

<Text style={[styles.mt1, styles.textSupporting]}>

What alternative solutions did you explore? (Optional)

Could override flex: 1 by adding flex: undefined to the style array, but that's a workaround. The correct fix is to not use a WebView-specific style on a regular Text component.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[MobileMage]

Proposal

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

During the workspace duplication flow, the subheader text "Which features do you want to copy over to your new workspace?" is missing beneath the "Select features to copy" heading on Android.

What is the root cause of that problem?

The subheader <Text> component on line 353 of WorkspaceDuplicateSelectFeaturesForm.tsx is styled with styles.webViewStyles.baseFontStyle, which includes flex: 1. This style was designed for use in WebView/HTML rendering contexts (it is the base style passed to TRenderEngineProvider), not for plain React Native <Text> components. When flex: 1 is applied to a <Text> inside a <View> that has no constrained height, React Native on Android distributes flex space by collapsing the text to zero visible height, effectively making it invisible. The issue does not reproduce on iOS because iOS handles flex: 1 on <Text> elements more permissively.

App/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

Lines 351 to 354 in 03023c1

	<View style={[styles.ph5, styles.pv3]}>
	<Text style={[styles.textHeadline]}>{translate('workspace.duplicateWorkspace.selectFeatures')}</Text>
	<Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>
	</View>

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

Replace styles.webViewStyles.baseFontStyle with styles.textNormal on the subheader <Text> at line 353. styles.textNormal provides the same font size and family without flex: 1, making it safe to use in standard React Native layout contexts. styles.textSupporting is already applied for the muted color, so we only need a style that contributes font sizing — styles.textNormal is appropriate.

App/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

Line 353 in 03023c1

<Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>

- <Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>
+ <Text style={[styles.textNormal, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>

What alternative solutions did you explore? (Optional)

N/A

[emkhalid]

Proposal

What is the root cause of that problem?

The missing subheader is rendered in src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx, but it uses styles.webViewStyles.baseFontStyle on a normal Text component.

App/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

Lines 351 to 354 in 03023c1

	<View style={[styles.ph5, styles.pv3]}>
	<Text style={[styles.textHeadline]}>{translate('workspace.duplicateWorkspace.selectFeatures')}</Text>
	<Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>
	</View>

styles.webViewStyles.baseFontStyle is defined in src/styles/index.ts and includes flex: 1.

App/src/styles/index.ts

Lines 243 to 250 in 03023c1

	baseFontStyle: {
	color: theme.text,
	fontSize: variables.fontSizeNormal,
	...FontUtils.fontFamily.platform.EXP_NEUE,
	flex: 1,
	lineHeight: variables.fontSizeNormalHeight,
	...writingDirection.ltr,
	},

That style is intended for rendered HTML base text, not a regular React Native Text. On Android, applying flex: 1 to this Text inside the auto-height header View causes the text layout to collapse, so the translated subheader is present in code but not visible.

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

The original code in src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx applies the HTML base style directly to the subheader Text.

App/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

Line 353 in 03023c1

<Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>

Replace the WebView/HTML style with the Text component's existing typography defaults and pass only the supporting color through the component API. The shared Text component already defaults to normal font size, normal line height, and the app's normal font family.

App/src/components/Text.tsx

Lines 39 to 54 in 03023c1

	function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, shouldUseDefaultLineHeight = true, ref, ...props}: TextProps) {
	const theme = useTheme();
	const customStyle = useContext(CustomStylesForChildrenContext);
	const componentStyle: TextStyle = {
	color: color ?? theme.text,
	fontSize,
	textAlign,
	...FontUtils.fontFamily.platform[family],
	...StyleSheet.flatten(style),
	...StyleSheet.flatten(customStyle),
	};
	if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal && shouldUseDefaultLineHeight) {
	componentStyle.lineHeight = variables.fontSizeNormalHeight;
	}

diff --git a/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx b/src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx
@@
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@
 function WorkspaceDuplicateSelectFeaturesForm({policyID}: WorkspaceDuplicateFormProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
@@
-                    <Text style={[styles.webViewStyles.baseFontStyle, styles.textSupporting]}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>
+                    <Text color={theme.textSupporting}>{translate('workspace.duplicateWorkspace.whichFeatures')}</Text>

This removes the invalid flex: 1 from the subheader while preserving the same normal supporting-text appearance. The subheader can then take its natural height on Android and render under the "Select features to copy" title.

What alternative solutions did you explore? (Optional)

I considered replacing styles.webViewStyles.baseFontStyle with styles.textNormal plus styles.textSupporting. That also removes flex: 1, but it duplicates defaults that the shared Text component already provides.

I also considered using styles.textSupportingNormal. That is valid, but it still solves the issue by swapping one text style for another. Passing color={theme.textSupporting} is more explicit here because the only behavior we need beyond the Text defaults is the supporting color.

I considered overriding the bad style with flex: undefined or flex: 0, but that keeps an HTML-rendering style on a normal Text and hides the real problem.

fixed_sub_header_workspace.mp4

[dukenv0307]

@MelvinBot Implement this

[MelvinBot]

🤖 Draft PR created: #88299
Please mark it as "Ready for review" when it is ready for review.