[Time Tracking][Bug] Android - Expense - Value and unit are not on the same line when device font size is small

[mitarachim]

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: 9.3.1-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: #78137
Email or phone of affected tester (no customers): applausetester+ssjdoinjsdois@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Money Requests

Action Performed:

Precondition:

• Device font size is set to the smallest.
• Log in with Expensifail account.
• Time tracking feature is enabled on OD.

1. Launch Expensify app.
2. Go to workspace chat.
3. Tap + > Create expense > Time.
4. Enter any amount.
5. Close the page.
6. Tap + > Track distance > Manual.
7. Enter any amount.

Expected Result:

On Time and Manual distance input page, value and unit will be on the same line when device font size is small.

Actual Result:

Value and unit are not on the same line when device font size is small.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7048663_1768363906660.Screen_Recording_20260114_120833_Permission_controller.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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.

[annaweber830]

Proposal

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

On Time and Manual distance input page, value and unit will be on the same line when device font size is small.

What is the root cause of that problem?

Both pages use NumberWithSymbolForm with a suffix symbol, which renders:

• the value as a TextInput (auto-growing width behavior), and
• the unit as a separate Text via SymbolButton,
  side-by-side in a flexDirection: 'row' container.
  The underlying TextInput container style (styles.textInputContainer) includes flex: 1, and with autoGrow enabled we also apply an explicit measured width to that container. On Android (especially at certain font scale settings), this combination can cause the input container to claim too much horizontal space, leaving insufficient room for the suffix unit—so the unit gets pushed onto the next line.

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

• Adjust the styles used by these “big centered amount + unit” inputs so the amount input container does not flex-grow to fill the row, and can shrink as needed when used with a suffix symbol. Concretely, update the shared container style used by these screens (the iouAmountTextInputContainer passed into the input) to override the default flex: 1 behavior (e.g., set flexGrow: 0 and allow flexShrink) so the unit remains on the same line.
  

  App/src/styles/index.ts

  Lines 3070 to 3077 in eafbcff

  	iouAmountTextInputContainer: {
  	borderWidth: 0,
  	borderBottomWidth: 0,
  	borderTopLeftRadius: 0,
  	borderBottomLeftRadius: 0,
  	borderTopRightRadius: 0,
  	borderBottomRightRadius: 0,
  	},

iouAmountTextInputContainer: {
            flex: 0,
            flexGrow: 0,
            flexShrink: 1,
            borderWidth: 0,
            borderBottomWidth: 0,
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
        },

What alternative solutions did you explore? (Optional)

• Changing alignment to alignItems: 'baseline': helps vertical alignment but does not prevent wrapping.
• Tweaking lineHeight/padding for the unit text: brittle across devices and font scales.
• Rendering value+unit as a single Text: not viable because the value is an editable TextInput.

[daledah]

Proposal

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

On Time and Manual distance input pages, the value and unit are not displayed on the same line when the device font size is set to the smallest setting.

What is the root cause of that problem?

In NumberWithSymbolForm.tsx, the value and symbol are rendered inside a View container with flexRow style:

App/src/components/NumberWithSymbolForm.tsx

Line 476 in 6284112

<View style={[styles.flexRow, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>

The textInputComponent is TextInputWithCurrencySymbol which renders the input value (AmountTextInput) and the symbol (SymbolButton) as separate sibling components inside a Fragment.

The flexRow style only sets flexDirection: 'row' but does not explicitly set flexWrap: 'nowrap':

App/src/styles/utils/flex.ts

Lines 37 to 39 in 6284112

	flexRow: {
	flexDirection: 'row',
	},

While the default value of flexWrap in React Native is nowrap, when device font size is set to the smallest and font scaling is applied, the separate View/TextInput components can cause unexpected layout behavior, causing the value and unit to appear on separate lines.

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

Add styles.flexNoWrap to the container in NumberWithSymbolForm.tsx to explicitly ensure the value and symbol never wrap to separate lines.

- <View style={[styles.flexRow, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
+ <View style={[styles.flexRow, styles.flexNoWrap, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>

App/src/components/NumberWithSymbolForm.tsx

Line 476 in 6284112

<View style={[styles.flexRow, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>

What alternative solutions did you explore? (Optional)

1. Use nested Text components: Refactor to use nested Text components like in DistanceCounter/index.tsx:

<Text style={[styles.iouAmountTextInput, styles.colorMuted]}>
    <Text style={[styles.iouAmountTextInput, !tripInProgressOrStopped && styles.colorMuted]}>{distance}</Text>
    {` ${unit}`}
</Text>

This ensures the value and unit are treated as a single text block. However, this would require significant refactoring of the NumberWithSymbolForm and TextInputWithCurrencySymbol components.

2. Add flexShrink: 0 to prevent shrinking: Add flexShrink: 0 to both the input and symbol components. This is more invasive and might affect other use cases.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

• On Android with the smallest font size, the amount TextInput and the suffix Text do not align.
• The suffix drops or wraps to the next line.

What is the root cause of that problem?

• TextInput and Text are in the same row and use center alignment.
• On Android, their font metrics are different.
• When space is tight, their baselines do not match.

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

• Apply baseline alignment only on Android when the symbol is a suffix.
• Keep center alignment for all other cases.
• Scope the change to NumberWithSymbolForm only.

const isAndroid = getOperatingSystem() === CONST.OS.ANDROID;
const isSuffix = symbolPosition === CONST.TEXT_INPUT_SYMBOL_POSITION.SUFFIX;

<View
    style={[
        styles.flexRow,
        styles.moneyRequestAmountContainer,
        styles.justifyContentCenter,
        isAndroid && isSuffix ? styles.alignItemsBaseline : styles.alignItemsCenter,
    ]}
>
    {textInputComponent}
</View>

This avoids flexWrap, fixed heights, and global style changes.
Prefix symbols and non-Android platforms stay the same.

What alternative solutions did you explore? (Optional)
None.

[bernhardoj]

Proposal

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

The value and unit are not on the same line when device font is reduced.

What is the root cause of that problem?

If we see the style that we use for the text, we use a fixed size for the font size and undefined line height, so it won't be affected by device font size.

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

Line 113 in 232cb11

style={styles.iouAmountTextInput}

App/src/components/SymbolButton.tsx

Line 51 in 232cb11

<Text style={[styles.iouAmountText, styles.lineHeightUndefined, textStyle]}>{symbol}</Text>

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

Line 378 in 232cb11

style={styles.iouAmountTextInput}

App/src/styles/index.ts

Lines 3046 to 3059 in 232cb11

	iouAmountText: {
	...headlineFont,
	fontSize: variables.iouAmountTextSize,
	color: theme.heading,
	lineHeight: variables.inputHeight,
	},
	iouAmountTextInput: addOutlineWidth(
	theme,
	{
	...headlineFont,
	fontSize: variables.iouAmountTextSize,
	color: theme.heading,
	lineHeight: undefined,

But we can see that the input text is shifted to above. It's because we set a dynamic height to the input pressable container.

App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Line 304 in 232cb11

!isMultiline && styles.componentHeightLarge,

App/src/styles/index.ts

Lines 1188 to 1190 in 232cb11

	componentHeightLarge: {
	height: variables.inputHeight,
	},

So, when the font size is reduced, the height is also reduced.

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

Since we don't reduced the font size of the amount and unit text, we can set a fixed height too for both IOURequestStepHours and IOURequestStepDistanceManual.

touchableInputWrapperStyle={{height: 52}}

[abbasifaizan70]

Proposal

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

On Android, when the device font size is set to the smallest setting, the value and unit are not displayed on the same line on the Time tracking and Manual distance input pages.

What is the root cause of that problem?

The issue is in the moneyRequestAmountContainer style definition which doesn't prevent flex wrapping, causing the value and unit to wrap onto separate lines when the font size is small on Android.

Flow Analysis:

1. Both IOURequestStepHours (Time tracking) and IOURequestStepDistanceManual (Manual distance) use the NumberWithSymbolForm component:

Time tracking page:

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

Lines 104 to 133 in 232cb11

	<NumberWithSymbolForm
	symbol={translate('iou.timeTracking.hrs')}
	symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.SUFFIX}
	isSymbolPressable={false}
	decimals={CONST.HOURS_DECIMAL_PLACES}
	autoGrowExtraSpace={variables.w80}
	shouldShowBigNumberPad={canUseTouchScreen}
	ref={textInputRef}
	numberFormRef={moneyRequestTimeInputRef}
	style={styles.iouAmountTextInput}
	containerStyle={styles.iouAmountTextInputContainer}
	errorText={formError}
	onInputChange={() => {
	if (!formError) {
	return;
	}
	setFormError('');
	}}
	footer={
	<Button
	success
	pressOnEnter
	medium={isExtraSmallScreenHeight}
	large={!isExtraSmallScreenHeight}
	style={[styles.w100, canUseTouchScreen ? styles.mt5 : styles.mt0]}
	onPress={saveTime}
	text={translate('common.next')}
	/>
	}
	/>

Manual distance page:

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

Lines 363 to 396 in 232cb11

	<NumberWithSymbolForm
	ref={textInput}
	numberFormRef={numberFormRef}
	value={distance?.toString()}
	onInputChange={() => {
	if (!formError) {
	return;
	}
	setFormError('');
	}}
	decimals={CONST.DISTANCE_DECIMAL_PLACES}
	symbol={unit}
	symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.SUFFIX}
	isSymbolPressable={false}
	symbolTextStyle={styles.textSupporting}
	style={styles.iouAmountTextInput}
	containerStyle={styles.iouAmountTextInputContainer}
	autoGrowExtraSpace={variables.w80}
	errorText={formError}
	footer={
	<Button
	success
	// Prevent bubbling on edit amount Page to prevent double page submission when two CTA are stacked.
	allowBubble={!isEditing}
	pressOnEnter
	medium={isExtraSmallScreenHeight}
	large={!isExtraSmallScreenHeight}
	style={[styles.w100, canUseTouchScreen() ? styles.mt5 : styles.mt0]}
	onPress={submitAndNavigateToNextPage}
	text={buttonText}
	testID="next-button"
	/>
	}
	/>

2. In NumberWithSymbolForm, the value and unit are rendered in a flex row container:

App/src/components/NumberWithSymbolForm.tsx

Lines 469 to 476 in 232cb11

	{shouldWrapInputInContainer ? (
	<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<View
	id={NUMBER_VIEW_ID}
	onMouseDown={(event) => focusTextInput(event, [NUMBER_VIEW_ID])}
	style={[styles.flex1, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
	>
	<View style={[styles.flexRow, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>

3. The textInputComponent contains both the value (AmountTextInput) and the symbol (SymbolButton) rendered via BaseTextInputWithSymbol:

App/src/components/TextInputWithSymbol/BaseTextInputWithSymbol.tsx

Lines 46 to 80 in 232cb11

	return (
	<>
	{isNegative && negativeSymbol}
	{!hideSymbol && symbolPosition === CONST.TEXT_INPUT_SYMBOL_POSITION.PREFIX && (
	<SymbolButton
	symbol={symbol}
	onSymbolButtonPress={onSymbolButtonPress}
	isSymbolPressable={isSymbolPressable}
	textStyle={symbolTextStyle}
	/>
	)}
	<AmountTextInput
	formattedAmount={formattedAmount}
	onChangeAmount={setFormattedAmount}
	placeholder={placeholder}
	ref={ref}
	disabled={disabled}
	selection={selection}
	onSelectionChange={(event: TextInputSelectionChangeEvent) => {
	onSelectionChange(event);
	}}
	onKeyPress={onKeyPress}
	style={[styles.pr1, style]}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	/>
	{!hideSymbol && symbolPosition === CONST.TEXT_INPUT_SYMBOL_POSITION.SUFFIX && (
	<SymbolButton
	symbol={symbol}
	onSymbolButtonPress={onSymbolButtonPress}
	isSymbolPressable={isSymbolPressable}
	textStyle={symbolTextStyle}
	/>
	)}
	</>

4. The problem is in the moneyRequestAmountContainer style definition which only specifies minHeight but doesn't prevent flex wrapping:

App/src/styles/index.ts

Line 3093 in 232cb11

moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)},

The Root Cause:

When the device font size is set to smallest on Android, the flex container with flexRow style doesn't have flexWrap: 'nowrap' explicitly set. By default, React Native's flex containers can wrap content when the available space is constrained. On Android with the smallest font size setting, the system applies accessibility scaling that can affect layout calculations, causing the flex container to wrap the content (value and unit) onto separate lines.

Without flexWrap: 'nowrap', the container allows line breaks between flex items when it calculates that they don't fit on a single line, resulting in the value and unit appearing vertically stacked instead of horizontally aligned.

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

Add flexWrap: 'nowrap' to the moneyRequestAmountContainer style to ensure the value and unit always remain on the same line regardless of font size settings.

File: App/src/styles/index.ts

App/src/styles/index.ts

Line 3093 in 232cb11

moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)},

// Before
moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)},

// After
moneyRequestAmountContainer: {
    minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8),
    flexWrap: 'nowrap',
},

How the fix works:

1. By adding flexWrap: 'nowrap' to the moneyRequestAmountContainer style, we explicitly tell React Native to never wrap the flex items within this container
2. This ensures that the value input and the unit symbol (hrs, mi, km, etc.) always stay on the same horizontal line
3. The flex items (input and symbol) will shrink or adjust their sizes if needed, but will never wrap to a new line
4. This fix applies to all screens that use NumberWithSymbolForm component, including:
   • Time tracking input page (hrs unit)
   • Manual distance input page (mi, km units)
   • Any other pages that use the NumberWithSymbolForm with the wrapped container

Why this fix is appropriate:

• The moneyRequestAmountContainer is used specifically for the amount input area where value and unit must be on the same line for proper UI/UX
• Adding flexWrap: 'nowrap' is a standard CSS/React Native practice to prevent unwanted line breaks in flex containers
• This is a minimal, targeted fix that doesn't affect other parts of the application
• The fix addresses the root cause directly without introducing workarounds or additional complexity
• It works consistently across all font size settings and devices

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[mallenexpensify]

@dannymcclain 👀 plz. mainly wondering if you know why this is happening. Also, if it might be happening other places, so that we could try to fix those at the same time. Thx

[DylanDylann]

From: https://expensify.slack.com/archives/C07NMDKEFMH/p1768246840650279?thread_ts=1768246821.377209&cid=C07NMDKEFMH

cc @mhawryluk @grgia Should we handel this?