[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)