[HOLD on upstream PR] [$250] "Offline" text missing in the You appear to be… message on android

[jponikarchuk]

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:

1. Open the Android app.
2. Switch the app to Offline mode.
3. 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:

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

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: 2025-12-10

Issue Owner

Current Issue Owner: @grgia

[melvin-bot]

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.

[mkzie2]

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.

[apeyada]

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)

[abbasifaizan70]

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

[melvin-bot]

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

[melvin-bot]

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

[linhvovan29546]

🚨 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.

[linhvovan29546]

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