Open kbecciv opened 11 months ago
Triggered auto assignment to @adelekennedy (Bug
), see https://stackoverflow.com/c/expensify/questions/14418 for more details.
Platforms
in OP are ✅)Android - Title is not rendered fully in the available space.
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.
remove style optionDisplayNameCompact
and add styles.flex1
const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.pre, styles.flex1, ...textUnreadStyle], props.style);
before and after.
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
Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External
)
Android - Title is not rendered fully in the available space.
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.
We need to provide the prop textBreakStrategy here with textBreakStrategy="simple"
which solves the issue.
Same we are providing for ResendValidationForm
here.
Android - Title is not rendered fully in the available space.
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.
textBreakStrategy="simple"
use for, not break words when break linetextBreakStrategy="simple"
lose the layout quality in Android Read heretextBreakStrategy="simple"
is just removing -
at the end and works the same as beforeI 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
function DisplayNames(props) {
return (
<Text
accessibilityLabel={props.accessibilityLabel}
style={props.textStyles}
numberOfLines={props.numberOfLines}
>
- {props.fullTitle}
+ {props.fullTitle.replace(/\s/g, '\xa0')}
</Text>
);
}
@aimane-chnaif thoughts on the proposal above?
📣 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 Whoops! This issue is 2 days overdue. Let's get this updated quick!
I don't think we need to adjust the bounty just yet - we have proposals above to review
@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!
pending proposal review @aimane-chnaif
📣 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 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!
pending review @aimane-chnaif will you be able to review the above proposals soon?
@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!
lil' bump on the above
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@Pujan92 your textBreakStrategy solution doesn't work for me. I tested on various android devices.
Can everyone update proposals based on latest codebase? No satisfactory proposals yet
@aimane-chnaif Have you tried my proposal? it's working and up to date
@aimane-chnaif Have you tried my proposal? it's working and up to date
I don't like your solution.
Updated @aimane-chnaif
@adelekennedy @aimane-chnaif this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!
Still open for better solution
Android - Title is not rendered fully in the available space.
Seems the child View
with flexRow
here not having the full width automatically all the time even the child Text is long when the textStrategy is highQuality.
https://github.com/Expensify/App/blob/7490ea6becd0ba87909dd3223428cdde05370ca3/src/components/LHNOptionsList/OptionRowLHN.js#L190
As the TextPill
is removed now from the row we can take out the extra View
which seems not required now. With that the parent View
already has contentContainerStyles(flex1)
for the full available width.
https://github.com/Expensify/App/blob/7490ea6becd0ba87909dd3223428cdde05370ca3/src/components/LHNOptionsList/OptionRowLHN.js#L190
For focus priority mode we want to allow the DisplayName
to take width as per the content, to achieve that we need to remove the class styles.optionDisplayNameCompact
and add styles.flexShrink0
.
@Pujan92 your textBreakStrategy solution doesn't work for me. I tested on various android devices.
Yes, while posting it was working that time. maybe that time the parent View is taking available width considering the Pill also exists. But now we removed the TextPill, I made a new proposal here.
@Pujan92 can you please test on all 6 platforms?
Still open for better solution
@aimane-chnaif are you mean better than using flex to take the full wide available or how and where flex will write?
we can set flex in many places, and all can pass it to DisplayNames
textStyles
as i describe in my proposal
change flexGrow: 0
, here to be flexGrow: 1
, or remove it and use flex: 1
https://github.com/Expensify/App/blob/797298e272bc0867c15dd3e1c76293a0e9009503/src/styles/styles.js#L1401-L1406
or remove optionDisplayNameCompact
and add styles.flex1
const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.pre, styles.flex1, ...textUnreadStyle], props.style);
We can simplify code after removing pill
ok i will update my proposal to remove optionDisplayNameCompact
and add styles.flex1
it the same as my current proposal but it now more simple.
const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.pre, styles.flex1, ...textUnreadStyle], props.style);
- both priority modes (Most recent / #focus)
@aimane-chnaif my current solution is not working as expected for both modes. I will check and update my proposal if I am able to find the solution. But on checking with main branch I am seeing that issue already there where the last message shows even the display name is longer(not the same has been replicated for the web).
Main Branch SS
We have some updated proposals to review - not overdue as we're just back from the weekend melvin
@adelekennedy, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!
Still awaiting proposals which meet https://github.com/Expensify/App/issues/21219#issuecomment-1634394582
📣 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 this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:
Thanks!
Current assignee @aimane-chnaif is eligible for the Internal assigner, not assigning anyone new.
Upwork job price has been updated to $2000
doubling to get more proposals
@aimane-chnaif what do you think of my proposal? I think the result is as expected for both priority modes (Most recent / #focus)
@aimane-chnaif what do you think of my proposal? I think the result is as expected for both priority modes (Most recent / #focus)
Still looking for more simplified solution
Android - Title is not rendered fully in the available space.
It is Android-style word-breaking IOS work differently, so we found two different designs in the screenshot.
As the TextPill
is removed now from the code we have now the advantage to take the full available width by width 100% or flex1 property in Most resent mode
only
I suggest this snippet in file
<View style={props.viewMode === CONST.OPTION_MODE.DEFAULT ? styles.flex1 : null}>
<Text
accessibilityLabel={props.accessibilityLabel}
style={props.textStyles}
numberOfLines={props.numberOfLines}
>
{props.fullTitle}
</Text>
</View>
We need to add props in the file
<DisplayNames
accessibilityLabel={translate('accessibilityHints.chatUserDisplayNames')}
fullTitle={optionItem.text}
displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
textStyles={displayNameStyle}
+ viewMode={props.viewMode}
shouldUseFullTitle={
optionItem.isChatRoom || optionItem.isPolicyExpenseChat || optionItem.isTaskReport || optionItem.isThread || optionItem.isMoneyRequestReport
}
/>
Proposal 1 is still valid I know it is a hack but works as this is Android only problem. it is a valid proposal if we have any problem while setting width full or flex1 like before it is
Not overdue - we have one more proposal to review, however @aimane-chnaif do you think we'll need to increase the price on this one
pending proposal review from @aimane-chnaif
reviewing today
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:
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