[HOLD for payment 2023-06-29] [$1000] Dev: Android/iOS - Invalid prop console error

[kavimuru]

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 any chat

Expected Result:

No console error

Actual Result:

Console error appears (invalid props.style key cursor)

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.25-4
Reproducible in staging?: Dev
Reproducible in production?: Dev
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: @bernhardoj
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686120988945439

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0151ecf2b81452ae95
• Upwork Job ID: 1669423474662707200
• Last Price Increase: 2023-06-15

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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

[dukenv0307]

Proposal

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

Console error appears (invalid props.style key cursor) in native

What is the root cause of that problem?

Some page use styles.cursorPointer which is always cursor: 'pointer' styles in all platforms. And it is invalid when we pass this style to Text component in native. So warning appears in console.

App/src/styles/styles.js

Lines 2679 to 2681 in 035783a

	cursorPointer: {
	cursor: 'pointer',
	},

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

We should replace all styles styles.cursorPointer with cursor.cursorPointer to get the current style for each platform.

All places are using styles.cursorPointer

App/src/components/ReportActionItem/ReportPreview.js

Line 119 in 035783a

<Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>

App/src/components/ReportActionItem/ReportPreview.js

Line 124 in 035783a

<Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>

App/src/components/TextInput/BaseTextInput.js

Line 357 in 035783a

<View style={[styles.textInputIconContainer, isEditable ? styles.cursorPointer : styles.pointerEventsNone]}>

App/src/pages/settings/Payments/AddPayPalMePage.js

Line 78 in 035783a

<View style={[styles.flexRow, styles.cursorPointer]}>

App/src/components/ReportActionItem/MoneyRequestAction.js

Line 156 in 035783a

containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined, ...props.style]}

App/src/components/Pressable/GenericPressable/BaseGenericPressable.js

Line 27 in 035783a

return styles.cursorPointer;

What alternative solutions did you explore? (Optional)

[hungvu193]

Proposal

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

Dev: Android/iOS - Invalid prop console error

What is the root cause of that problem?

We're using styles.cursorPointer for the Text inside ReportPreview.

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

Because we wanna keep the cursor when hovering the text, we can replace current usage of current Text with TextLink component like we already did here. Also add onPress to prevent it open url.

<TextLink 
   onPress={() => {Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));}} 
   style={[styles.chatItemMessage, styles.colorMuted]}>
   {lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
</TextLink>

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[stephanieelliott]

Hey @kavimuru are the repro steps really just Open any chat? I am not able to reproduce this on iOS nor Android

[bernhardoj]

@stephanieelliott yes. You will see the warning box at the bottom when you open a chat (dev only I guess)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0151ecf2b81452ae95

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

Current assignee @joekaufmanexpensify is eligible for the Bug assigner, not assigning anyone new.

[stephanieelliott]

Reapplying the Bug label to get another BZ member on this while I am OOO til July 3. Thanks @joekaufmanexpensify I'll grab this back from you when I return!

[joekaufmanexpensify]

Sounds good! I'm going to ask an engineer to repro here, since looks like this is a dev only error.

[joekaufmanexpensify]

Asked

[parasharrajat]

I can reproduce this. @dukenv0307 's proposal looks good to me.

cc: @joekaufmanexpensify

🎀 👀 🎀 C+ reviewed

[joekaufmanexpensify]

Since this qualifies for a speed bonus, we need to issue the following payments here:

• @dukenv0307 - $1,500
• @parasharrajat - $1,500
• @bernhardoj - $250

[joekaufmanexpensify]

@dukenv0307 offer sent for $1,000! ($500 will be issued as bonus)

[joekaufmanexpensify]

@parasharrajat offer sent for $1,000! ($500 will be issued as bonus)

[joekaufmanexpensify]

@bernhardoj offer sent for $250!

[joekaufmanexpensify]

@parasharrajat Could you please complete your portion of the BZ checklist when you have a chance? Thanks!

[parasharrajat]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: Refactor workspace settings #5642
• [@parasharrajat] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/5642/files#r1245686084
• [@parasharrajat] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No discussion required. It was a fairly simple catch but somehow we missed this during testing. Even running the app on the native platform must have shown that error.
• [@parasharrajat] Determine if we should create a regression test for this bug. No

[joekaufmanexpensify]

Great, thanks! BZ checklist is complete.

[joekaufmanexpensify]

All set to issue payment here (besides Rajat's, which is on hold for the new process).

[joekaufmanexpensify]

@dukenv0307 $1,500 sent and contract ended!

[joekaufmanexpensify]

@bernhardoj $250 sent and contract ended!

[joekaufmanexpensify]

This one is all set for now. As soon as we're able to pay @parasharrajat , we can close this out!

[joekaufmanexpensify]

Not overdue. Pending being able to pay rajat here.

[joekaufmanexpensify]

Payment to rajat still on hold. Bumped in Slack.

[parasharrajat]

@joekaufmanexpensify It will be better to make this weekly.

[joekaufmanexpensify]

Still on hold

[joekaufmanexpensify]

Bumped in Slack

[joekaufmanexpensify]

Checking in on whether we are all set to pay these.

[joekaufmanexpensify]

Bumped in Slack.

[parasharrajat]

Payment requested. Ref: #20589 (comment)

---

Thanks for waiting @joekaufmanexpensify.

[joekaufmanexpensify]

Great, thanks! Copying the payment message down so it's clear for the individual who pays. This qualifies for speed bonus, so we need to issue the following payments here:

• @dukenv0307 - $1,500 (PR +speed bonus). Paid via upwork.
• @parasharrajat - $1,500 (C+ review + speed bonus). Pending payment via NewDot.
• @bernhardoj - $250 (reporting bonus). Paid via uppork.

[joekaufmanexpensify]

Closing for now, since all that's left is NewDot payment (which has been requested)!

[JmillsExpensify]

Reviewed details for @parasharrajat. These details are accurate based on summary from Business Reviewer and are now approved for payment in NewDot.