[PAID] [$1000] Android - Compose box - The App crashed if you type in :shaka into the chat input

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

---

Issue found when executing PR #16498

Action Performed:

1. Open the App
2. Login with any account
3. Type in :shaka into the chat input
4. Make sure we suggest the call me hand

Expected Result:

App is not crashed

Actual Result:

The App crashed if you type in :shaka into the chat input

Workaround:

Uknown

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.2.90.4

Reproducible in staging?: Yes

Reproducible in production?: NO

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

Bug5994596_Screen_Recording_20230327_180409_New_Expensify.mp4

Logs

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/~012807390ced8a2ae1
• Upwork Job ID: 1640387477166157824
• Last Price Increase: 2023-04-05

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

[MelvinBot]

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

[alex-mechler]

Well this is a specific bug report 😂. Can confirm its reproducible on staging but not prod

[alex-mechler]

[alex-mechler]

reproduced on prod (1.2.88-2), not a deploy blocker. Typed :call_me_hand, and then quickly backspaced. Got the same crash. Its not as consistent as :shaka, but it is the same crash.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~012807390ced8a2ae1

[MelvinBot]

Triggered auto assignment to @flaviadefaria (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

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

[MelvinBot]

Current assignee @alex-mechler is eligible for the External assigner, not assigning anyone new.

[bernhardoj]

Proposal

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

The app crash when we type :shaka or :call_me into the composer.

What is the root cause of that problem?

This issue is caused by the usage of LayoutAnimation that is called inside calculateEmojiSuggestion.

App/src/pages/home/report/ReportActionCompose.js

Line 420 in bf34610

LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));

I found some issues reported by other users related to LayoutAnimation here and here.

If we look at LayoutAnimation.create function, it will return an object with create, update, and delete property to defines each animation for each action.

https://github.com/facebook/react-native/blob/406f9fc37b811b7e2d6ce489cfef3bfb5d94b4b5/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js#L105-L116

From what I tested, the crash happens because of the delete.

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

We can omit delete property from LayoutAnimation.create return value. This means, when an item is removed, the fade animation that we use for create and update will not be used.

I'm thinking that we can even remove the call of LayoutAnimation.configureNext completely because it only runs for 50ms which is not noticeable. I was not even aware that there should be an animation when the suggestion appears.

[mananjadhav]

I am going to tag @perunt here as they had worked on the EmojiSuggestions with the LayoutAnimation. I think @bernhardoj's proposal would work in principle, but I am not sure if there are any side effects.

[hellohublot]

Proposal

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

Android - Compose box - The App crashed if you type in :shaka into the chat input

What is the root cause of that problem?

When we enter :shak, the following picture will appear

The line not shown of the picture is the :handshake:

When we continue to enter an a, it becomes :shaka, and the app will crash

---

Why is there a line missing?

• Because it was clipped by FlatList, because FlatList.removeClippedSubviews is enabled by default on android platform,

---

Then why the heights we calculated are all correct, or are they cut off?

• Because all coordinates of the android platform will be converted to int, precision will be lost

---

Why do we continue to enter an a, the app will crash

• The error reported is that getChild(index) index is out of bounds, because the cut line is no longer in the parent component, so it will be out of bounds and crash

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

We should disable removeClippedSubviews, because we need to see each row, so we don't need its clipping

App/src/components/EmojiSuggestions.js

Line 131 in 4ee21e9

style={{height: rowHeight}}

+ removeClippedSubviews={false}

What alternative solutions did you explore? (Optional)

Not Yet

[flaviadefaria]

Are we close to selecting a proposal here?

[flaviadefaria]

I'm about to go OoO for a week, so will reassign this to another bug-zero team member.

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

• Fix android emoji suggestions crash #17062

If no regressions arise, payment will be issued on 2023-04-17. 🎊

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 - none, internal
• Contributor that fixed the issue - @hellohublot - $1000 + $500 (speed bonus) = $1500
• Contributor+ that helped on the issue and/or PR - @mananjadhav - $1000 + $500 (speed bonus) = $1500

Speed bonus assessment: PR submitted on April 5 / PR merged on April 6 - Eligible for speed bonus

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

[MelvinBot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] The PR that introduced the bug has been identified. Link to the PR: Static emoji autosuggestion  #14686
• [@mananjadhav] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Static emoji autosuggestion  #14686 (comment)
• [@mananjadhav / @alex-mechler] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: https://expensify.slack.com/archives/C049HHMV9SM/p1681773103189889
• [@strepanier03] Determine if we should create a regression test for this bug.
• [@mananjadhav] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: QA test here

[mananjadhav]

The source PR that introduced the bug is #14686

I think this warrants for a regression test proposal as we see an app crash. Also because we've disabled a flag on Flatlist we don't someone turning it back without pushing a fix for this.

Regression Test Proposal

1. Open the android native App
2. Login with any account
3. Type in :shaka into the chat input
4. Make sure the app doesn't crash

Do we agree 👍 or 👎 ?

@alex-mechler @strepanier03 what do you think?

[alex-mechler]

I agree, your logic makes sense to me. We want to avoid hard crashes like this. Your test also looks good to me. 👍

I don't think we need to update the PR checklist if we add a regression test for this, but we still should open up that discussion to room

[strepanier03]

@alex-mechler - Which Slack channel is the best for me to raise the PR checklist update discussion?

[strepanier03]

Reg test GH is done and added to the BugZero checklist.

---

@mananjadhav and @hellohublot - I have hired you both for the Upwork job. Please accept that and I'll check again before the end of the day to do the pay out.

[mananjadhav]

Thanks for the offer @strepanier03. I've accepted on the Upwork.

[strepanier03]

Thanks @mananjadhav - I paid the job. I will close the contract later today, right now Upwork is giving me an error when trying.

[mananjadhav]

Sure, thanks for the prompt action.

[strepanier03]

Everyone is all paid out and the regression test is pending.

Nice job, everyone, thanks for the teamwork and contribution!

[alex-mechler]

@strepanier03 I raised it for us in #expensify-bugs! https://expensify.slack.com/archives/C049HHMV9SM/p1681773103189889