[$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?

• [x] 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[bot]]

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

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Huh... This is 4 days overdue. Who can take care of this?

[aimane-chnaif]

I still don't follow solution from last new proposal.

Still awaiting proposals

[pradeepmdk]

Proposal

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

title is not rendered fully in the availble space

What is the root cause of that problem?

In React Native, the Text component does not automatically take the full available space within its parent container by default. This behavior is different from web-based HTML elements, where elements such as <div> automatically take the full width of their parent container.

The reason why the Text component doesn't take full space is because of its inherent behavior as a text-rendering component. The width of the Text component is determined by the size of its content, and it will wrap to the next line if the content exceeds the available width. The default width of a Text component is essentially based on the width required to display its content without overflowing. android textbreakstrategy explanation here and here

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

If we want the Text component to take full space or expand to fill the available width of its parent container, we need to explicitly specify a width style for the Text component or use flexbox properties to control its dimensions.

 1) using flexbox `flex:1`

https://github.com/Expensify/App/blob/8d84c23ae3a21130a540794104313b2f7e7e6b6a/src/components/DisplayNames/index.native.js?#L10 This common issue in Android so we need change this on DisplayNames native component

  style={[...props.textStyles, styles.flexGrow1]}

when we add Flexgrow 1 this will apply

https://github.com/Expensify/App/blob/8d84c23ae3a21130a540794104313b2f7e7e6b6a/src/components/LHNOptionsList/OptionRowLHN.js?#L78

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

this will apply for other platfrom as well. so in native component we need add styles.flexGrow1.

this common change fix all this place https://github.com/Expensify/App/issues/21219#issuecomment-1634394582

when we add flexGrow1 its will affect aligment issue on https://github.com/Expensify/App/blob/8d84c23ae3a21130a540794104313b2f7e7e6b6a/src/pages/home/HeaderView.js?#L184 because here parent is wrapped with flex column so here we to wrap the <DisplayNames with <View style={[styles.flexShrink1]}>

this is what now i find so when i working i need test all the <DisplayNames used and fixed that wrapping the flexShrink1

What alternative solutions did you explore? (Optional)

[adelekennedy]

still pending more proposals

[pradeepmdk]

can you review my proposal https://github.com/Expensify/App/issues/21219#issuecomment-1676364888. Thanks.

[aimane-chnaif]

reviewing shortly

[adelekennedy]

pending review

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[adelekennedy]

@aimane-chnaif can you review this proposals by next week or give an eta when you will review them?

[aimane-chnaif]

@pradeepmdk thanks for updated proposal. What exactly is common issue in android and what is the solution to fix that root cause?

[pradeepmdk]

@aimane-chnaif

the root cause is textBreakStrategy only by default is breaking the word and rendering the text. so at the time whatever its break, we are showing which is middle of the word broke. total three type is there balanced, 'high_quality', 'simple' both are having differnt type of Strategy is there.

the only solution to prevent this textBreakStrategy we should take all available space. when you take all available space textBreakStrategy doesn't work here so the text will show fully.

whenever we are using numberOfLines we will face this issue. because on the second line, the break word should be there.

[melvin-bot[bot]]

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

[adelekennedy]

@aimane-chnaif will you review the above?

[adelekennedy]

Still pending proposal review

[adelekennedy]

asked for review

[aimane-chnaif]

In React Native, the Text component does not automatically take the full available space within its parent container by default.

@pradeepmdk the root cause is not correct. Please try to test in fresh RN project

[pradeepmdk]

@aimane-chnaif i think I missed something here (this specific in Android) in this case Text component should take full space so we need to set flex1 in the text component. this because android textbreakstrategy explanation here and here

 <SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
                <View style={{ flexDirection: 'row', flex:1 }}>
                    <Text numberOfLines={1} style={{ }} >From vincenzoddragon+five@gmail.com From vincenzoddragon+five@gmail.com  From vincenzoddragon+five@gmail.com  </Text>
                </View>
        </SafeAreaView>

once we set Text component flex:1 it will take full space when we use numberOfLines = 1 doesn't work properly ellipsizeMode tail. so at this time we need set flex1 so that it will take full space and ellipsizemode='tail' will work correctly. https://reactnative.dev/docs/text#ellipsizemode

Another solution

we can add this Unicode character for the Android text component so that we can fix this globally when numofline={1} https://stackoverflow.com/questions/41943669/modifying-android-textview-to-line-break-only-at-specified-character https://www.compart.com/en/unicode/U+00A0

[adelekennedy]

pending review on the above

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[aimane-chnaif]

@pradeepmdk please run https://github.com/Expensify/App/issues/21219#issuecomment-1634394582 and share result

[pradeepmdk]

sure @aimane-chnaif can we use this https://stackoverflow.com/questions/41943669/modifying-android-textview-to-line-break-only-at-specified-character or flex if we use the Unicode character we can fix this globally when numofline={1} we can create an .android.js based Text file.

[adelekennedy]

update above

[adelekennedy]

@aimane-chnaif any feedback here?

[adelekennedy]

@aimane-chnaif will review the above

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[aimane-chnaif]

I am still not seeing the perfect solution which fixes the root cause in native android. I will see if we can apply any workaround proposal to move this issue forward.

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[adelekennedy]

@aimane-chnaif Melvin moved this to internal as there hasn't been progress - moving back to external to get more proposals, can you provide a summary comment below to help guide new proposals?

[melvin-bot[bot]]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[parasharrajat]

@aimane-chnaif Can you please summarize the best solutions so far in one comment? I will try to help out here. This feels like a very important issue.

[adelekennedy]

@aimane-chnaif bump on the two comments above - can you provide a summary of the best solutions here to guide new proposals?

[aimane-chnaif]

I will re-evaluate proposals today based on latest codebase

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[aimane-chnaif]

updating today

[melvin-bot[bot]]

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

[adelekennedy]

@aimane-chnaif have you re-reviewed the above proposals? Should we be pushing this one in the open source channel to get more proposals?

[aimane-chnaif]

No need push yet. I am still evaluating & finding the best solution. I will provide update by Monday.

[melvin-bot[bot]]

@adelekennedy, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

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

[aimane-chnaif]

updating today

[adelekennedy]

@aimane-chnaif any updates here? Is this something that can be helped on your end or do we need to push for more proposals as this has been open since June

[gzqyl]

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 I had finally found, it is the issue on Android when layout the text content, if there's space in strings, then it will auto break to the new line when wrap, wrap means it has more than one line, and we setmaxlines = 1, then it will wrap, and will break at the space position, that's why we see it ellipsis at some special char like space

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

replace the space char with unicode will solve this issue, and it will have no regression issues on other platforms as the layout does not change, and we just "escaped space char with unicode", I tested it, it works on mobile both, and web desktop. For safely without any other issue on Android when there's some special chars make it unexpected break to new line, we could escape the string with unicode '\u200D'. use unicode '\u00A0' no-break space replace the space char we need to have, ie, 'From ' to be 'From\u00A0', tell the os not to beak, we add '\u200D' before special chars, tell the os it will join, while not break to a new line. The key to solve this issue is that we use the unicode features, to keep the display text same and let the os know how to do. after we replace the white space ' ' with unicode '\u00A0', on Android, there maybe still some issue for some special chars, so we could map the string to chars, then check the char, if it is a white space, we use '\u00A0' replace it, if it is out of '/[a-zA-Z\d]/' test, we think it maybe a special char, then we add '\u200D' before it, for the normal text '/[a-zA-Z\d]/' just keep it as it is.

Optional Solution

use View layout on Android with platform specific, but it is not the real root cause solved solution, I preferred the unicode solution, text content will display to user same as before, but the issue on Android will disappear. The unicode does the magic.

This is same solution as this issue I had already proposed, just escape the string with unicode char, and specify the platform for Android will be ok, as the issue only happened on Android.

There's already a file for string utils, just add one function will work on here and the issue

[melvin-bot[bot]]

📣 @gzqyl! 📣 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>

[garrettmknight]

@aimane-chnaif we've been working on a similar bug for a while here: https://github.com/Expensify/App/issues/24339

We haven't had any perfect proposal so we're in a stalled position. I think fixing one could potentially fix the other so I'm going to put the other issue on hold. How does @gzqyl's proposal look for you?

[aimane-chnaif]

@gzqyl thanks for the proposal. Regarding your root cause, where does it come from? Native or React Native? Are you able to reproduce on native app?

[manjesh-yadav]

I introduced first same solution 4 months ago and it's tested from my side. https://github.com/Expensify/App/issues/21219#issuecomment-1602741055

@aimane-chnaif I found this is a native android problem

[aimane-chnaif]

@gzqyl @manjesh-yadav I tested your solutions but still doesn't work always. Whitespace is not only the root cause. Please try to set fullTitle as aiman.chnaif+12345678@gmail.com manually.

[aimane-chnaif]

@aimane-chnaif any updates here? Is this something that can be helped on your end or do we need to push for more proposals as this has been open since June

@adelekennedy I think we need to push for more proposals.