[HOLD for payment 2024-06-13] [$250] Web - Navigation - Chat finder has weird animation when closing up

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

---

Version Number: 1.4.74-0
Reproducible in staging?: y
Reproducible in production?: y
Issue found when executing PR: #40342
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open workspace switcher LHP
3. Press on ctrl + K/Cmd + K to open chat finder
4. Click on the back button of the chat finder at the top left

Expected Result:

Chat finder closes by sliding to the left side of the screen and the app doesn't navigate to the workspace switcher LHP

Actual Result:

Chat finder slides to the right and the disappears revealing the workspace switcher LHP

Workaround:

n/a

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

Bug6482412_1715840377401.bandicam_2024-05-16_08-44-00-826.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018db96bec95e66f96
• Upwork Job ID: 1791352526254919680
• Last Price Increase: 2024-05-17
• Automatic offers:
• ishpaul777 | Reviewer | 102433234
• bernhardoj | Contributor | 102433236

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[kbecciv]

@Christinadobrzyn 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.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[bernhardoj]

Proposal

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

The slide animation when opening/closing chat finder after open it from the workspace switcher page is weird.

What is the root cause of that problem?

The direction for the screen is set to horizontal and it will slide from right to left.

App/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts

Line 13 in f16005f

gestureDirection: 'horizontal',

App/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx

Line 24 in 5900fea

const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]);

App/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx

Line 35 in 5900fea

<Stack.Navigator screenOptions={screenOptions}>

But for the chat finder and workspace switcher, we want it to slide from left to right. For the left modal navigator itself, we already set the correct direction for it, that is, horizontal-inverted.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 361 to 363 in 5900fea

	<RootStack.Screen
	name={NAVIGATORS.LEFT_MODAL_NAVIGATOR}
	options={screenOptions.leftModalNavigator}

App/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts

Lines 68 to 72 in 5900fea

	leftModalNavigator: {
	...commonScreenOptions,
	cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props),
	presentation: getModalPresentationStyle(),
	gestureDirection: 'horizontal-inverted',

That's why opening the page for the first time shows the correct animation.

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

For left modal navigator screen, set the gestureDetection to horizontal-inverted too.

We can do that for example by updating ModalNavigatorScreenOptions to accept another param for the gesture direction that defaults to horizontal

[Christinadobrzyn]

Ah interesting - I think this can be external.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018db96bec95e66f96

[melvin-bot]

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

[Christinadobrzyn]

@ishpaul777 can you review the proposal when you have a moment?

[ishpaul777]

On my list for today 😄

[mountiny]

cc @adamgrzybowski @WojtekBoman for review of the proposal too

[ishpaul777]

@bernhardoj's Proposal seems to be working well!

Screen.Recording.2024-05-21.at.12.13.41.AM.mov

[ishpaul777]

waiting for a review from @WojtekBoman / @adamgrzybowski

[adamgrzybowski]

@ishpaul777 I confirmed with @WojtekBoman and it looks legit to us as well

[ishpaul777]

🎀👀🎀

[melvin-bot]

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

[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.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix left modal navigator weird navigation animation #42517

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @bernhardoj requires payment automatic offer (Contributor)
• @ishpaul777 requires payment automatic offer (Reviewer)

[melvin-bot]

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:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] 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:
• [@ishpaul777] 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:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] 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.
• [@Christinadobrzyn] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Christinadobrzyn]

Just a heads up - I'm going to be ooo until June 24th so going to assign a teammate to watch this while I'm away

@JmillsExpensify we're waiting on payments. I think this is the correct summary but let me know if I'm wrong.

• Contributor: $250 @bernhardoj (in Upwork - https://www.upwork.com/nx/wm/workroom/37351006/details)
• Contributor+: $250 @ishpaul777 (in Upwork - https://www.upwork.com/nx/wm/offer/102433234)

Upwork job is here.

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.

[Christinadobrzyn]

@ishpaul777 do we need a regression test?

[ishpaul777]

A regression test would nice to have 👍

Regression Test Proposal:

1. Navigate to staging.new.expensify.com
2. Open workspace switcher LHP
3. Press on ctrl + K/Cmd + K to open chat finder
4. Click on the back button of the chat finder at the top left

Expected Result:
Chat finder closes by sliding to the left side of the screen and the app doesn't navigate to the workspace switcher LHP

Do we agree 👍 or 👎 ?

[ishpaul777]

we are just waiting for payment, not overdue

[melvin-bot]

@JmillsExpensify, @grgia, @bernhardoj, @Christinadobrzyn, @ishpaul777 Huh... This is 4 days overdue. Who can take care of this?

[JmillsExpensify]

Contributors paid out and regression test created. Closing.