Request Money - App crashes after tapping “Request Money”

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #28214

Version Number: 1.3.84-0

Reproducible in staging?: Y

Reproducible in production?: N

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

Expensify/Expensify Issue URL:

Issue reported by: Applause-Internal Team

Slack conversation: @

Action Performed:

1. Open Android or iOS App
2. Login with any account
3. Tap FAB > Request Money

Expected Result:

Request money flow starts

Actual Result:

Android - App crashes
iOS - Blank page loads

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Bug6236565_1697250271465.Android-Crash-Request-Money.mp4

log crash.txt

Android: mWeb Chrome

iOS: Native

Bug6236565_1697250271457.iOS-Request-money-blank-page.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017a16c7aacf48e902
• Upwork Job ID: 1713177488589635584
• Last Price Increase: 2023-10-14

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017a16c7aacf48e902

[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

[melvin-bot]

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

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @nkuoch (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[namhihi237]

I think it's dup with an issue I had reported in Slack here and created here. Can help update my name is a reporter for original this issue?

[Pujan92]

Proposal

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

App crash for request money screen due to bad value for opacity

What is the root cause of that problem?

It is a regression from this PR of styles migration where tabOpacity func is updated to return the object https://github.com/Expensify/App/pull/27660/files#diff-eec5d8b1dfad21f2e7bac8456d093eddd72fcbd5ea76411e3dd3c713beb9fb84R3623-R3625.
Earlier it was returning just number and that value we were setting for the opacity prop but now we are trying to set an object for the opacity value.

App/src/components/TabSelector/TabLabel.js

Lines 28 to 31 in fe282b4

	<Animated.View style={[{opacity: activeOpacity}]}>
	<Text style={styles.tabText(true)}>{title}</Text>
	</Animated.View>
	<Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>

App/src/components/TabSelector/TabIcon.js

Lines 29 to 35 in fe282b4

	<Animated.View style={{opacity: inactiveOpacity}}>
	<Icon
	src={icon}
	fill={themeColors.icon}
	/>
	</Animated.View>
	<Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>

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

We can use the opacity object(activeOpacity, inactiveOpacity) directly which we pass to TabLabel and TabIcon components.

For an example,

App/src/components/TabSelector/TabLabel.js

Line 28 in fe282b4

<Animated.View style={[{opacity: activeOpacity}]}>

<Animated.View style={[activeOpacity]}>

Suggesting as we are already using an object for func tabBackground.

Also update the default prop values as an empty object here.

[ikevin127]

The app does not crash anymore on latest main for iOS.
The only issue is the labels missing from tab selector Request money > Manual / Scan / Map.

iOS: Native

For android it still crashes as a regression of this PR: #27660 due to the fact that incorrect opacity style is passed to View component as the error below mentions and is referenced in this Slack message.

Android: Native

[ishpaul777]

I am available and can raise a PR as this a DB.

Proposal

Problem

Request Money - App crashes after tapping “Request Money”

Root Cause

This is because we are returning a object from tabOpacity while the activeOpacity and inactiveOpacity props for TabLabel expect a number

offending PR #27596

Changes

We should move the tabOpacity from style to StyleUtils like below:

function getTabOpacity (hovered: boolean, isFocused: boolean, activeOpacityValue: number, inactiveOpacityValue: number):number {
    return (hovered && !isFocused) ? inactiveOpacityValue : activeOpacityValue
}

And we can use StyleUtils.getTabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)

[mananjadhav]

@Pujan92's proposal here looks good to me.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Current assignee @nkuoch is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[jayeshmangwani]

offending PR #27596

@ishpaul777 How is this offending PR? , in that issue we are trimming the value only

[ishpaul777]

Sorry, i was meant to mention #27660, github suggestion suggested wrong issue

[kubabutkiewicz]

Created PR per request from @situchan

[mountiny]

Thanks the pr author/ Callstack resolved this

[mountiny]

Fixed in staging, internally reported, closing