[HOLD for payment 2024-12-12] [$2000] Android - Title is not rendered fully in the available space.

@parasharrajat

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open the app on Android.
See the chats in the LHN.
Notice a few reports will longer title.

Expected Result:

Title is clipped when reached the right edge of the screen.

Actual Result:

Title is clipped with ellipsis in the middle of screen and there is more available room.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.27-2

Reproducible in staging?: y

Reproducible in production?: y

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686749244980549

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01ef0ae782c96792ac
Upwork Job ID: 1671576465794899968
Last Price Increase: 2023-11-06
Automatic offers:

aimane-chnaif | Reviewer | 27596163
fabriziobertoglio1987 | Contributor | 27981486

Issue Owner

Current Issue Owner: @adelekennedy

@adelekennedy

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

Proposal

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

Android - Title is not rendered fully in the available space.

What is the root cause of that problem?

The root cause is android use different way to break words, see here and textbreakstrategy explanation here
I don't think any textbreakstrategy value will make the text stretch to end of the line, because there is no flex 1 style for text which make Text break instead of stretch in the parent view.

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

remove style optionDisplayNameCompact and add styles.flex1  

const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.pre, styles.flex1, ...textUnreadStyle], props.style);

old proposal

we need change flexGrow: 0, here to be flexGrow: 1, or remove it and use flex: 1

App/src/styles/styles.js

Lines 1401 to 1406 in 797298e

    
           optionDisplayNameCompact: { 
        
               minWidth: 'auto', 
        
               flexBasis: 'auto', 
        
               flexGrow: 0, 
        
               flexShrink: 1, 
        
           },

before and after.

What alternative solutions did you explore? (Optional)

yeah - longer chat names are being cut off in the center of the screen with ellipses rather than reaching the border of the screen like we see in IOS

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

@adelekennedy

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

@aimane-chnaif

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

Proposal

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

Android - Title is not rendered fully in the available space.

What is the root cause of that problem?

Default Text render startegy for android is highQuality which is causing the issue where it breaks unwantedly the string but we are only showing a single line.

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

We need to provide the prop textBreakStrategy here with textBreakStrategy="simple" which solves the issue.
Same we are providing for ResendValidationForm here.

App/src/components/DisplayNames/index.native.js

Lines 8 to 12 in 003e5e5

    
           <Text 
        
               accessibilityLabel={props.accessibilityLabel} 
        
               style={props.textStyles} 
        
               numberOfLines={props.numberOfLines} 
        
           >

@ospfranco

@ospfranco, @rlinoz, @s77rt, @fabOnReact, @abdulrahuman5196, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

@aimane-chnaif

@aimane-chnaif once you accept on Upwork I will pay you out!

@ospfranco

@ospfranco, @rlinoz, @s77rt, @fabOnReact, @abdulrahuman5196, @adelekennedy Huh... This is 4 days overdue. Who can take care of this?

@aimane-chnaif

bump @aimane-chnaif

@ospfranco

@ospfranco, @rlinoz, @s77rt, @fabOnReact, @abdulrahuman5196, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

Payment requested as per #21219 (comment)

@parasharrajat

$250 approved for @parasharrajat

@aimane-chnaif

Blast from the past 🚀

Payment Summary

Contributor+: @aimane-chnaif paid $250 via Upwork

They were out on medical leave.

Navigation Menu

Repository navigation

[HOLD for payment 2024-12-12] [$2000] Android - Title is not rendered fully in the available space. #21219

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

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)

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?

351 remaining items

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	optionDisplayNameCompact: {
	minWidth: 'auto',
	flexBasis: 'auto',
	flexGrow: 0,
	flexShrink: 1,
	},

	<Text
	accessibilityLabel={props.accessibilityLabel}
	style={props.textStyles}
	numberOfLines={props.numberOfLines}
	>

[HOLD for payment 2024-12-12] [$2000] Android - Title is not rendered fully in the available space. #21219

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Jun 21, 2023

melvin-bot commented on Jun 21, 2023

Bug0 Triage Checklist (Main S/O)

ahmedGaber93 commented on Jun 21, 2023

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)

adelekennedy commented on Jun 21, 2023

melvin-bot commented on Jun 21, 2023

melvin-bot commented on Jun 21, 2023

melvin-bot commented on Jun 21, 2023

Pujan92 commented on Jun 21, 2023

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?

351 remaining items

melvin-bot commented on Dec 24, 2024

adelekennedy commented on Dec 24, 2024

melvin-bot commented on Dec 30, 2024

adelekennedy commented on Dec 30, 2024

melvin-bot commented on Jan 3, 2025

parasharrajat commented on Jan 19, 2025

JmillsExpensify commented on Jan 22, 2025

mallenexpensify commented on Oct 30, 2025

Payment Summary

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions