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