[$2000] Android - Title is not rendered fully in the available space.

[kbecciv]

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:

1. Open the app on Android.
2. See the chats in the LHN.
3. 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?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

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

[melvin-bot]

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

[melvin-bot]

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

[ahmedGaber93]

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)

[adelekennedy]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

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}
	>

[manjesh-yadav]

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?

It is Android style word breaking IOS work differently that is why we found two diffrent design in the screenshot.

textBreakStrategy="simple" is not the right solution for the following reasons.

1. textBreakStrategy="simple" use for, not break words when break line
2. textBreakStrategy="simple" lose the layout quality in Android Read here
3. it's not working on all devices Read here
4. In other devices textBreakStrategy="simple" is just removing - at the end and works the same as before

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

I suggest use text.replace(/\s/g, '\xa0') for replacing whitespace by non-breaking unicode space in the variable and it will work fine and it does not lose any layout quality.

We are using different files for web and native so it will not affect our web

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

Lines 6 to 15 in 3585d7b

	function DisplayNames(props) {
	return (
	<Text
	accessibilityLabel={props.accessibilityLabel}
	style={props.textStyles}
	numberOfLines={props.numberOfLines}
	>
	{props.fullTitle}
	</Text>
	);

function DisplayNames(props) {
    return (
        <Text
            accessibilityLabel={props.accessibilityLabel}
            style={props.textStyles}
            numberOfLines={props.numberOfLines}
        >
-           {props.fullTitle}
+            {props.fullTitle.replace(/\s/g, '\xa0')}
        </Text>
    );
}

Result

What alternative solutions did you explore? (Optional)

[adelekennedy]

@aimane-chnaif thoughts on the proposal above?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

I don't think we need to adjust the bounty just yet - we have proposals above to review

[melvin-bot]

@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

pending proposal review @aimane-chnaif

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@adelekennedy @aimane-chnaif this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[rlinoz]

I asked internally about going with the library, but we think it is better to wait for the PR being merged in the react-native repository

[rlinoz]

Still waiting react-native PR approval.

[adelekennedy]

I'm going to put this on hold until the PR is approved

[aimane-chnaif]

PR was imported already.
@fabriziobertoglio1987 do you have any eta of which RN version will include your fix?

[aimane-chnaif]

We can move this to Monthly

[rlinoz]

Still waiting react-native PR approval.

[fabOnReact]

• I contacted the team at Meta to land PR #41770.
• I changed my GitHub profile name (before was https://github.com/fabriziobertoglio1987). Thanks

Contributor details
Your Expensify account email: fabrizio.bertoglio@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01ae44247887fa908b

[melvin-bot]

📣 @fabOnReact! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[fabOnReact]

Update 05/03

• Updated PR with changes requested in code-review
• Added extensive tests for those changes in the comment on GitHub

I will move the PR to ready to review Sunday 09/03. Thanks

[fabOnReact]

Update 10/03

• Moved the PR to ready to review
• The reviewer will be on holiday until the 28th of March, so I don't expect answer before the 28th.

[adelekennedy]

I've moved this off hold as as the reviewer is now back from ooo - I've also moved this to VIP VSB

[rlinoz]

I think this comment is pending an answer facebook/react-native#39722 (comment)

@fabOnReact

[fabOnReact]

Update 15th May 2024

Replied to Timothy comment facebook/react-native#39722 (comment)

[adelekennedy]

Still waiting for a response