-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[HOLD for payment 2022-05-20][$250] Android/IOS - Link is not aligned vertically in pay bills section on public domain @thesahindia #8664
Comments
Triggered auto assignment to @sakluger ( |
ProposalApp/src/pages/workspace/bills/WorkspaceBillsFirstSection.js Lines 57 to 59 in 6c53be1
Using Text instead of TouchableOpacity will fix this.
<Text
style={[styles.link]}
onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
>
[email protected]
</Text> Shouldn't we add a |
This is working fine for me on iOS. I'm going to see if I can find someone with Android who can reproduce the issue. |
@sakluger, to repro this you need an account made with public domain email. |
@sakluger -- I was able to repro on Android:
|
Thanks @strepanier03 for verifying! I think this is limited to Android since I couldn't reproduce on iOS. I'll update the original description and pass along to engineering triage. |
Triggered auto assignment to @yuwenmemon ( |
Triggered auto assignment to @NicMendonca ( |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat ( |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as resolved.
This comment was marked as resolved.
Yes |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as resolved.
This comment was marked as resolved.
Can you share the screenshot? I have seen a few places where this icon is used. Let's see what others have to say. cc: @stitesExpensify @NicMendonca |
ProposalTouchableOpacity doesn't work well in A work around it is
Update the PropTypesconst propTypes = {
/** The text to display and copy to the clipboard */
text: PropTypes.string.isRequired,
/** Styles to apply to the text */
textStyles: PropTypes.arrayOf(PropTypes.object),
/** The default icon to show */
icon: PropTypes.func,
/* Whether to show the text or not */
showText: PropTypes.bool,
...withLocalizePropTypes,
}; Update Default Prop Typesconst defaultProps = {
textStyles: [],
icon: Expensicons.Clipboard,
showText: true,
}; Update the render function to thisrender() {
return (
<Text
onPress={this.copyToClipboard}
style={[styles.flexRow, styles.cursorPointer]}
>
{this.props.showText && <Text style={this.props.textStyles}>{this.props.text}</Text>}
<Tooltip text={this.props.translate('reportActionContextMenu.copyToClipboard')}>
<Icon
src={this.state.showCheckmark ? Expensicons.Checkmark : this.props.icon}
fill={this.state.showCheckmark ? themeColors.iconSuccessFill : themeColors.icon}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
inline
/>
</Tooltip>
</Text>
);
} 2.Refactor the codes in workspace/bills/WorkspaceBillsFirstSection.js. Replace https://github.com/Expensify/App/blob/main/src/pages/workspace/bills/WorkspaceBillsFirstSection.js#L2 with import {View, TouchableOpacity, TouchableNativeFeedback, Platform} from 'react-native'; Replace the codes in https://github.com/Expensify/App/blob/main/src/pages/workspace/bills/WorkspaceBillsFirstSection.js#L56-L61 with {
Platform.OS === 'android'
? (
<TouchableNativeFeedback
onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
>
<Text style={[styles.textBlue]}>[email protected]</Text>
</TouchableNativeFeedback>
)
: (
<TouchableOpacity
onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
>
<Text style={[styles.textBlue]}>[email protected]</Text>
</TouchableOpacity>
)
} So were are rendering TouchableNativeFeedback if the platform is android otherwise the TouchableOpacity is rendered. That should work fine, thats the output in android. Everything shows the same in the other platforms. |
Asking on Slack... https://expensify.slack.com/archives/C01GTK53T8Q/p1650988386373059 |
Based on slack, the final expected behavior is Link is aligned vertically in pay bills section on public domain. |
Assigning myself since my proposal was accepted |
📣 @Justicea83 You have been assigned to this job by @Justicea83! |
I think we can go with the approach that I had proposed earlier instead of using two different Touchable ProposalApp/src/pages/workspace/bills/WorkspaceBillsFirstSection.js Lines 57 to 59 in 6c53be1
Using Text instead of TouchableOpacity will fix this.
<Text
style={[styles.link]}
onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}
>
[email protected]
</Text> What you think @parasharrajat, @stitesExpensify ? |
Sorry, @thesahindia but this is already being worked on. |
@thesahindia @parasharrajat don't forget to apply for the job for reporting/ reviewing payment, thank you! |
Done ✅ |
This issue has not been updated in over 15 days. @parasharrajat, @NicMendonca, @Justicea83, @stitesExpensify eroding to Monthly issue. P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do! |
@parasharrajat @thesahindia I am so sorry, this job post expired before I could issue payment 😞 Can you please accept my offer? |
No prob. Accepted the offer ✅ |
paid - sorry for the delay! |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Action Performed:
Expected Result:
Link is aligned vertically in pay bills section on public domain
Actual Result:
Link is not aligned vertically in pay bills section on public domain
Workaround:
Unknown
Platform:
Where is this issue occurring?
Version Number: 1.1.55.0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): any public account
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1639149882009500
View all open jobs on GitHub
The text was updated successfully, but these errors were encountered: