[HOLD][$250] Xero - Strange animation after dismissing 2FA setup RHP and not here page on LHN

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.8-1
Reproducible in staging?: Y
Reproducible in production?: N
Found when validating PR : #44059
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition:

• User has a workspace.
• The workspace is connected to Xero.
• User has not set up 2FA.

1. Go to staging.new.expensify.com
2. Log out if logged in.
3. Log in to the account from precondition.
4. Click Enable two-factor authentication.
5. Click the back button on 2FA set up RHP.
6. Navigate between Account settings, Search and Inbox.

Expected Result:

App should throw 2FA set up modal again if user exits 2FA set up flow.

Actual Result:

In Step 5, when clicking on back button on 2FA setup RHP, the RHP dismissal has a weird animation.
In Step 6, after switching between sections, not here page shows up on the left hand panel.

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

Bug6544785_1721201414390.20240717_152508.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e2d69ad81006978f
• Upwork Job ID: 1813578824903964216
• Last Price Increase: 2024-09-04

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @MonilBhavsar (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

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

[izarutskaya]

We think this issue might be related to the #collect project.

[MonilBhavsar]

Commented on the offending PR #44059

[rushatgabhane]

The issue is present after reverting this PR too. its unrelated to the PR and related to navigation

[MonilBhavsar]

Ok thanks for checking!

[MonilBhavsar]

The issue is present after reverting this PR too.

@rushatgabhane if we revert this PR, then the 2FA modal doesn't show up and looks like issue is not reproducible?

[rushatgabhane]

@MonilBhavsar let me rephrase what i mean - this same issue is present on production also. The PR above did not make any changes to how back navigation was handled

1. Go to production - https://new.expensify.com/settings/security/two-factor-auth?backTo=home
2. Click back

Screen.Recording.2024-07-17.at.17.12.45.mov

[MonilBhavsar]

Ok thanks for clarifying. Makes sense

[melvin-bot]

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

[VictoriaExpensify]

As above. Making this a monthly as that's what the related issue is

[NJ-2020]

Proposal

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

Xero - Strange animation after dismissing 2FA setup RHP and not here page on LHN

What is the root cause of that problem?

First let split this problem into 2 issues.

• Why the sidebar had strange animation moving from right to left
• Why only sidebar is displaying and where is the main chat?

1. When we have a backTo param inside our url which is HOME, currently we're showing Sidebar component for HOME page inside BottomTabNavigator.tsx file
   

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

   Lines 26 to 29 in 3047c1b

   	<Tab.Screen
   	name={SCREENS.HOME}
   	component={SidebarScreen}
   	/>

   
   But why we see a strange animation for Home sidebar since we disabled it here:

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

   Lines 16 to 19 in 3047c1b

   	const screenOptions: StackNavigationOptions = {
   	headerShown: false,
   	animationEnabled: false,
   	};

   
   Because we invoked the BottomTabNavigator inside AuthScreens and enabled the animation here
   

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

   Line 223 in 3047c1b

   const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils);

   
   

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

   Lines 412 to 416 in 3047c1b

   	<RootStack.Screen
   	name={NAVIGATORS.BOTTOM_TAB_NAVIGATOR}
   	options={screenOptions.bottomTab}
   	component={BottomTabNavigator}
   	/>

   
   

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

   Lines 125 to 127 in 3047c1b

   	bottomTab: {
   	...commonScreenOptions,
   	cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props),

   
   We can see here that the animation is enabled, I've tried disabling the animation and it solved the first issue (sidebar strange animation)
   

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

   Lines 21 to 27 in 3047c1b

   	const commonScreenOptions: StackNavigationOptions = {
   	headerShown: false,
   	gestureDirection: 'horizontal',
   	animationEnabled: true,
   	cardOverlayEnabled: true,
   	animationTypeForReplace: 'push',
   	};

2. Why the main chat is not displaying?, because we use getMatchingCentralPaneRouteForState function to display the central pane route for bottom tab navigator i.e for HOME page we will display Report chat.

And for navigation i think we use linkTo function and we invoke the getMatchingCentralPaneRouteForState inside the linkTo function if it does not match these 3 conditions

App/src/libs/Navigation/linkTo/index.ts

Line 95 in 3047c1b

if (isCentralPaneName(action.payload.name) && (isTargetScreenDifferentThanCurrent || areParamsDifferent)) {

App/src/libs/Navigation/linkTo/index.ts

Line 122 in 3047c1b

} else if (type === CONST.NAVIGATION.TYPE.UP) {

App/src/libs/Navigation/linkTo/index.ts

Line 130 in 3047c1b

} else if ((action.payload.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR || isSideModalNavigator(action.payload.name)) && !isTargetNavigatorOnTop) {

If the above 3 conditions are false we will invoke the getMatchingCentralPaneRouteForState inside this condition

App/src/libs/Navigation/linkTo/index.ts

Line 151 in 3047c1b

} else if (action.payload.name === NAVIGATORS.BOTTOM_TAB_NAVIGATOR) {

But when pressing the go back button we use the goBack function which uses the CONST.NAVIGATION.TYPE.UP type which leads this condition to true

App/src/libs/Navigation/linkTo/index.ts

Line 122 in 3047c1b

} else if (type === CONST.NAVIGATION.TYPE.UP) {

App/src/libs/Navigation/Navigation.ts

Line 235 in 3047c1b

navigate(fallbackRoute, CONST.NAVIGATION.TYPE.UP);

and here

App/src/libs/actions/TwoFactorAuthActions.ts

Lines 21 to 24 in 3047c1b

	function quitAndNavigateBack(backTo?: Route) {
	clearTwoFactorAuthData();
	Navigation.goBack(backTo);
	}

and will not invoke the getMatchingCentralPaneRouteForState function

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

Instead of using goBack function we can use navigate here
Navigation.navigate(backTo)

App/src/libs/actions/TwoFactorAuthActions.ts

Lines 21 to 24 in 3047c1b

	function quitAndNavigateBack(backTo?: Route) {
	clearTwoFactorAuthData();
	Navigation.goBack(backTo);
	}

Result

Screen.Recording.2024-09-29.at.07.28.56.mov

What alternative solutions did you explore? (Optional)

[NJ-2020]

@ahmedGaber93 Can you please kindly have a look at my proposal

[ahmedGaber93]

@NJ-2020 use navigate instead of goBack is already proposed by adamgrzybowski here #45572 (comment) as a workaround, but we decide to wait for fixing goBack #45572 (comment).

[melvin-bot]

@MonilBhavsar, @ahmedGaber93, @VictoriaExpensify Eep! 4 days overdue now. Issues have feelings too...

[ahmedGaber93]

@VictoriaExpensify I think we need to add monthly label because we hold it for monthly issue #47534

[melvin-bot]

@MonilBhavsar, @ahmedGaber93, @VictoriaExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ahmedGaber93]

@VictoriaExpensify bump #45572 (comment)

[melvin-bot]

@MonilBhavsar, @ahmedGaber93, @VictoriaExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ahmedGaber93]

@VictoriaExpensify bump #45572 (comment)

[MonilBhavsar]

Adjusted label, thanks!