[$250] iOS - Group counter in split preview and invite member page blends with the background

[lanitochka17]

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

---

Version Number: 1.4.66-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to FAB > Split expense
3. Split expense with 5 users
4. Note the group counter
5. Go to workspace member page
6. Invite at least 9 users
7. Note the counter in Invite message page

Expected Result:

The group counter in split preview and invite member page should be legible

Actual Result:

The group counter in split preview and invite member page is illegible as the counter blends with the background

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

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a9c1b738d03ceaae
• Upwork Job ID: 1783618748524285952
• Last Price Increase: 2024-04-25
• Automatic offers:
• jayeshmangwani | Reviewer | 0
• neonbhai | Contributor | 0

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@lschurr FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-split

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a9c1b738d03ceaae

[melvin-bot]

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

[neonbhai]

Proposal

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

Group counter in split preview and invite member page blends with the background

What is the root cause of that problem?

The text rendered here seems to get behind the overlay causing it to appear blurred.

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

We should increase the zIndex of counter text to a resonable value:
so for avatar inner text

here:

App/src/styles/index.ts

Line 2321 in 6acc903

avatarInnerText: {

and here:

App/src/styles/index.ts

Line 2329 in 6acc903

avatarInnerTextSmall: {

zIndex: 10

This works perfectly:

Image

[nkdengineer]

Proposal

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

The group counter in split preview and invite member page is illegible as the counter blends with the background

What is the root cause of that problem?

We have zIndex: 6 for the wrap View of counter text here

App/src/styles/utils/index.ts

Line 765 in 951c7b3

zIndex: 6,

But in IOS zIndex may require Views to be siblings of each other for it to work as expected.

Ref: https://reactnative.dev/docs/next/layout-props#zindex

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

We should add zIndex style for the counter text here greater than or equal to the zIndex of the wrap View

App/src/components/MultipleAvatars.tsx

Line 241 in 951c7b3

style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(size), styles.userSelectNone]}

We can add this style to avatarInnerTextSmall here.

What alternative solutions did you explore? (Optional)

NA

[lschurr]

Hi @jayeshmangwani - Can you review the proposals here?

[jayeshmangwani]

Thanks for the proposal @neonbhai @nkdengineer, here both the proposals suggests to increase zIndex for avatarInnerTextSmall style , we can go with the first proposal of @neonbhai

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @jasperhuangg, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[nkdengineer]

@jayeshmangwani The RCA of selected proposal isn't clear. It doesn't explain why the bug only happen on IOS. You can test on other platforms and see that this bug doesn't happen.

[lschurr]

@jayeshmangwani @jasperhuangg can you review @nkdengineer comment? #41036 (comment)

[jayeshmangwani]

For the child View missing the zIndex, I think @neonbhai 's RCA is valid, though it's not detailed as @nkdengineer, as they have attached a link for the how iOS zIndex prop work differently, but for this simple bug of missing the child View zIndex, I still think @neonbhai 's Proposal is good, what's your thought on this @jasperhuangg

[melvin-bot]

📣 @jayeshmangwani 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @neonbhai 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[jayeshmangwani]

@neonbhai Please raise the PR

[neonbhai]

PR ready for review

[jayeshmangwani]

@lschurr This issue is ready to be a payout; PR was on the production 10 days ago.

Please HOLD my payment for this issue. We are trying to set up the NewDot Payment for me, And I have requested payment for this issue on NewDot.

[JmillsExpensify]

Ready to pay this out via New Expensify as soon as we have a payment summary.

[lschurr]

Thanks @jayeshmangwani - looks like the automation didn't work on this one. I'll post the payment summary here.

[lschurr]

Just clarifying @jayeshmangwani - you accepted the offer in Upwork for the job, so it will be paid there rather than in Newdot. Is this incorrect?

[jayeshmangwani]

I accepted the offer three weeks ago, and the NewDot payment setup was done two days back, so is there any way to cancel the offer at Upwork, and paid through NewDot ?

[jayeshmangwani]

I accepted the offer three weeks ago, and the NewDot payment setup was done two days back, so is there any way to cancel the offer at Upwork, and paid through NewDot ?

@lschurr @JmillsExpensify

[lschurr]

Ah, yeah that sounds good. I'll retract the offer in Upwork.

[lschurr]

Payment summary:

• Contributor: @neonbhai $250 (paid in Upwork)
• Contributor+: @jayeshmangwani $250 (to be paid in Newdot)

[JmillsExpensify]

$250 approved for @jayeshmangwani