[HOLD for payment 2023-08-10] [$1000] Android - Emoji - App crashes after selecting Emoji icon that is above the "Frequently used label"

[kbecciv]

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. Access a conversation chat with another user.
2. Long press on any of your messages.
3. Tap the "emoji reaction" icon.
4. Tap the "emoji" icon that is above the "Frequently used label".

Expected Result:

The app should not crash.

Actual Result:

The app crashes.

Workaround:

Unknown

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: v1.3.46-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
Notes/Photos/Videos: Any additional supporting documentation

Bug6143286_App_crashes_after_selecting_Emoji_icon_that_is_above_the_Frequently_used_label.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0165450f4a10937496
• Upwork Job ID: 1684677319871397888
• Last Price Increase: 2023-07-27

[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 @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[hungvu193]

Proposal

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

Android - Emoji - App crashes after selecting Emoji icon that is above the "Frequently used label"

What is the root cause of that problem?

Problem came from this line:

App/src/components/EmojiPicker/EmojiPickerMenu/index.native.js

Line 6 in f8bc305

import Animated, {runOnUI, _scrollTo} from 'react-native-reanimated';

We're importing the wrong function which didn't exist.

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

Remove usage of _scrollTo

 import Animated, {runOnUI} from 'react-native-reanimated'; 

We can use this.emojiList.scrollToOffset({ offset: calculatedOffset, animated: true }) instead

this.emojiList.scrollToOffset({ offset: calculatedOffset, animated: true })

What alternative solutions did you explore? (Optional)

N/A

[shubham1206agra]

Proposal

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

Android - Emoji - App crashes after selecting Emoji icon that is above the "Frequently used label"

What is the root cause of that problem?

In this line:

App/src/components/EmojiPicker/EmojiPickerMenu/index.native.js

Line 6 in f8bc305

import Animated, {runOnUI, _scrollTo} from 'react-native-reanimated';

Since the react-native-reanimated is bumped to v3.4.0 in #23550. The function _scrollTo was removed, and we are forced to use scrollTo function instead. Due to this, the function not found was shown.

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

Since scrollTo requires the use of useAnimatedRef for the first argument. We will first quickly migrate this component to a functional component. And replace with scrollTo since this is the function recommended by react-native-reanimated.

What alternative solutions did you explore? (Optional)

N/A

[shubham1206agra]

@Gonals BTW, this issue is also reproducible on iOS.

And I have tested my solution. Works without any problem :)

[marcaaron]

revert fix tests well removing the blocker.

[stitesExpensify]

We should still switch this to a functional component so that we can upgrade our version of reanimated. Marking this external to get a C+

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0165450f4a10937496

[melvin-bot]

Triggered auto assignment to @jliexpensify (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 - @mananjadhav (External)

[stitesExpensify]

@mananjadhav @shubham1206agra's proposal looks good to me! What do you think?

[aimane-chnaif]

Coming from #18507 (comment):
This issue is now high priority, which blocks upgrading RN 0.72.
Can the proposals be reviewed asap?
I suggest this being worked by expert contributor group.
cc: @mountiny

[mananjadhav]

I think @shubham1206agra's proposal is good too as it is recommended way by react-native-animated.

[melvin-bot]

📣 @mananjadhav Please request via NewDot manual requests for the Reviewer role ($1000)

[melvin-bot]

📣 @shubham1206agra You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[mountiny]

Jumping in to speed this up @wojtus7 Could you please overlook the PR as well? We need to update the reanimated again and prevent the crash. Thanks!

@shubham1206agra Can you create the PR quickly? Thanks 🙇

[shubham1206agra]

PR will be ready today.

I just need to get Android test.

[shubham1206agra]

@mountiny Should I rebump react-native-reanimated to v3.4?

[shubham1206agra]

📣 @shubham1206agra You have been assigned to this job! Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs! Keep in mind: Code of Conduct | Contributing 📖

BTW I am still not hired.

[mountiny]

@jliexpensify will hopefully get around to it in next 24 hours.

[jliexpensify]

Hired @shubham1206agra

[melvin-bot]

🎯 ⚡️ Woah @mananjadhav / @shubham1206agra, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @shubham1206agra got assigned: 2023-07-28 13:13:51 Z
• when the PR got merged: 2023-08-01 09:27:59 UTC

On to the next one 🚀

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.49-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Refactor EmojiPickerMenu native to functional component and using scrollTo method #23854

If no regressions arise, payment will be issued on 2023-08-10. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @mananjadhav does not require payment (Eligable for Manual Requests)
• @shubham1206agra requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[mananjadhav]

This was more of a fix related to upgrading the reanimated version and not a dev bug per say. Hence there is no offending PR.

I also don't think we should be adding a regression test for this one. The EmojiPicker should already consist of the tests for this.

[jliexpensify]

Great, here's a Payment Summary:

• Contributor: @shubham1206agra $1000 + $500 (speed bonus)
• C+: @mananjadhav $1000 + $500 (speed bonus) - Request in New.Dot

Upworks job

[mananjadhav]

@jliexpensify I've raised my request on NewDot.

[JmillsExpensify]

Reviewed the details for @mananjadhav. This is approved for payment in NewDot.

[jliexpensify]

Job closed in Upworks!