[Due for payment 2026-09-28] [$250] "Offline" text missing in the You appear to be… message on android

@mallenexpensify

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.2.67-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
Email or phone of affected tester (no customers): shussain+de1@applausemail.com
Issue reported by: Applause Internal Team
Device used: Android
App Component: Other

Action Performed:

Open the Android app.
Switch the app to Offline mode.
Observe the message displayed at the top.

Expected Result:

The message should display “You appear to be offline” clearly when the app is in offline mode.

Actual Result:

The message shows “You appear to be” but the word “offline” is missing.

Workaround:

Unknown

Platforms:

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021996043355810831524
Upwork Job ID: 1996043355810831524
Last Price Increase: 2026-07-10

Issue Owner

Current Issue Owner: @mallenexpensify

@stephanieelliott

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

Proposal

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

The message shows “You appear to be” but the word “offline” is missing.

What is the root cause of that problem?

In OfflineIndicator:

App/src/components/OfflineIndicator.tsx

Lines 43 to 51 in 54a0df7

    
           <View style={[containerStyles, styles.flexRow, styles.alignItemsCenter, style]}> 
        
               <Icon 
        
                   fill={theme.icon} 
        
                   src={Expensicons.OfflineCloud} 
        
                   width={variables.iconSizeSmall} 
        
                   height={variables.iconSizeSmall} 
        
               /> 
        
               <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text> 
        
           </View>

The parent View component has flexRow style, but we don't explicitly add flex styling for the child Text component, so it doesn't expand to full width and the "offline" text is cut off to new line. We can see the cut off text in some screen sizes, while not visible on others:

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

Add styles.flex1 to child Text

App/src/components/OfflineIndicator.tsx

Line 50 in 54a0df7

    
           <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

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.

Proposal

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

On newer versions of android (i.e. 16) with minimum font size, "offline" text missing in offline indicator message

What is the root cause of that problem?

App/src/components/OfflineIndicator.tsx

Line 50 in 54a0df7

    
           <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

The Text component is missing the numberOfLines={1} prop.
Without this, React Native on android 16 doesn't properly handle text truncation in flex layouts with minimum font size settings, causing text to be cut off.

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

App/src/components/OfflineIndicator.tsx

Line 50 in 54a0df7

    
           <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

Add numberOfLines={1} to the Text component

Note: we already fixed the exactly same bug in #75795.

What alternative solutions did you explore? (Optional)

Apply this solution from upstream issue: react/react-native#53307 (comment)

Proposal

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

On newer versions of Android (specifically Android 16) with minimum font size settings enabled, the offline indicator message is being truncated. The message should display "You appear to be offline." but instead only shows "You appear to be" - the word "offline" is missing.

What is the root cause of that problem?

File: App/src/components/OfflineIndicator.tsx
Line: 50 (in commit 54a0df7)

<Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>

The Text component is missing the numberOfLines={1} prop. Without this prop, React Native on Android 16 doesn't properly handle text truncation in flex layouts when minimum font size settings are enabled, causing text to be cut off instead of being properly truncated with ellipsis.

Why this happens:

Android 16 with minimum font size settings increases the font size, which can cause text to overflow its container
Without numberOfLines={1}, React Native's text rendering engine doesn't properly calculate the available space in flex layouts
The text gets cut off mid-word instead of being truncated with proper ellipsis handling

Similar Issue:
This is the same bug pattern that was fixed in issue #75795 by me.

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

File: App/src/components/OfflineIndicator.tsx

Add numberOfLines={1} to the Text component:

<Text 
    style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}
    numberOfLines={1}
>
    {translate('common.youAppearToBeOffline')}
</Text>

Why this works:

numberOfLines={1} explicitly tells React Native to render the text on a single line
This enables proper text truncation with ellipsis when the text exceeds available space
React Native's text engine can then correctly calculate available space in flex layouts
This pattern is already used in similar components:
- ReportTypingIndicator.tsx (line 51) uses numberOfLines={1} with the same style
- AgentZeroProcessingRequestIndicator.tsx (line 30) uses numberOfLines={1} with the same style

What alternative solutions did you explore? (Optional)

Alternative 1: Wrap Text in View with flexShrink1

Approach:
Wrap the Text component in a View with flexShrink1 style to allow the text container to shrink and take available space:

<View style={styles.flexShrink1}>
    <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>
        {translate('common.youAppearToBeOffline')}
    </Text>
</View>

Pros:

Allows the text container to properly shrink in flex layouts
Prevents text from being cut off by ensuring the container can take available space
Works well for general flex layout issues

Cons:

Doesn't explicitly handle text truncation behavior
May not fully resolve the Android 16 minimum font size issue
Adds an extra wrapper View component
Doesn't follow the established pattern used in similar components (ReportTypingIndicator, AgentZeroProcessingRequestIndicator)

Why not chosen:
While this solution can help with general flex layout issues, it doesn't explicitly address the text truncation behavior that React Native needs to handle properly on Android 16. The numberOfLines={1} prop is the more direct and established solution for this specific issue.

Related Issues

Issue Fixed Card feed name is displayed partially with blank space #75795: Similar bug fix for text truncation in flex layouts

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

@DylanDylann

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

🚨 Edited by proposal-police: This proposal was edited at 2025-12-03 10:57:01 UTC.

Proposal

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

"Offline" text missing in the You appear to be… message on android

What is the root cause of that problem?

This is a known issue on Android 15+ react/react-native#53286
Android 15 (API 35) changed TextView's default behavior to use visual glyph bounds for width calculation (useBoundsForWidth=true). This causes text clipping for other typefaces where glyphs extend beyond their advance width:

https://developer.android.com/about/versions/15/behavior-changes-15

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

Fortunately, the React Native collaborator has already prepared a fix in this PR: react/react-native#54721 so we can apply this patch to resolve the issue.

Before	After

However the upstream PR has an issue: some text is broken (see the screenshot — check the bottom tab).

The issue is caused by an incorrect calculation of lineWidth when text has a lineHeight. To fix that issue we need to update the line at https://github.com/facebook/react-native/pull/54721/files#diff-8cc9a4af360b3eac066d7f9cd50d91da9cb6fc2fbf044b25d495666bcc95e2ebR658 to

val lineWidth = unconstrainedLayout.getLineMax(i)

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.

Fortunately, the React Native collaborator has already prepared a fix in this PR: react/react-native#54721 so we can apply this patch to resolve the issue.

👆Update after posting the proposal: The upstream PR doesn’t look stable yet, some text appears to be broken

@DylanDylann

I'd suggest waiting for the upstream PR to be merged first for safety.

@DylanDylann made you issue owner, Please comment and tag me if/when payment is due, thx

@mallenexpensify

@mallenexpensify There's nothing to do here, another PR has already fixed this issue

Regarding payment, I'm fine with $125 for this job, since all our PRs are closed

@mallenexpensify

@mallenexpensify Kindly bump

@grgia

@grgia Can you add the Awaiting Payment label and assign @mallenexpensify to trigger his automation? 😄

@mallenexpensify

Triggered auto assignment to @mallenexpensify (Awaiting Payment)

@linhvovan29546

Payment Summary

Contributor: @linhvovan29546 due $250 via NewDot
Contributor+: @DylanDylann due $125 via NewDot

@linhvovan29546 is more cuz they aded all test steps and requested review

@linhvovan29546

$250 approved for @linhvovan29546 in Report ID: R00MmIpK5TXj.

Amount requested: $250.00 (Matches the payment summary here: [Due for payment 2026-09-28] [$250] "Offline" text missing in the You appear to be… message on android #76531 (comment).)
I, @twisterdotcom am not already the BZ assignee. I have approved this payment.

Zapier Logs

Run ID: 00040eee-9f45-a025-ac8b-cb9c4b4a5c64

SO: https://stackoverflowteams.com/c/expensify/questions/7582

@DylanDylann

Approved $125 to @DylanDylann

	<View style={[containerStyles, styles.flexRow, styles.alignItemsCenter, style]}>
	<Icon
	fill={theme.icon}
	src={Expensicons.OfflineCloud}
	width={variables.iconSizeSmall}
	height={variables.iconSizeSmall}
	/>
	<Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>
	</View>

[Due for payment 2026-09-28] [$250] "Offline" text missing in the You appear to be… message on android #76531

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Dec 2, 2025

mkzie2 commented on Dec 2, 2025

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

apeyada commented on Dec 2, 2025

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

abbasifaizan70 commented on Dec 2, 2025

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Alternative 1: Wrap Text in View with flexShrink1

Related Issues

melvin-bot commented on Dec 3, 2025

melvin-bot commented on Dec 3, 2025

linhvovan29546 commented on Dec 3, 2025

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

linhvovan29546 commented on Dec 3, 2025

82 remaining items

mallenexpensify commented on Sep 16, 2026

DylanDylann commented on Sep 17, 2026

DylanDylann commented on Sep 17, 2026

DylanDylann commented on Sep 25, 2026

DylanDylann commented on Sep 28, 2026

melvin-bot commented on Sep 28, 2026

mallenexpensify commented on Sep 28, 2026

Payment Summary

twisterdotcom commented on Oct 12, 2026

quinthar commented on Oct 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions