[$250] Onboarding - Changing the size of the window dismisses the onboarding modal

[IuliiaHerets]

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: v9.0.31-4
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): dave0123seife@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Resize the height of the window to be a very small mobile viewport
2. Sign in as a new user
   3 When the onboarding modal shows resize to normal window size

Expected Result:

Resizing the of window does not dismisses the onboarding modal

Actual Result:

Resizing the of window dismisses the onboarding modal

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6598412_1725953865275.Screen_Recording_2024-09-10_at_10.22.23_in_the_morning.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834487171313044824
• Upwork Job ID: 1834487171313044824
• Last Price Increase: 2024-09-13
• Automatic offers:
• jjcoffee | Reviewer | 103951138
• c3024 | Contributor | 103951139

Issue Owner

Current Issue Owner: @jjcoffee

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

[IuliiaHerets]

@VictoriaExpensify 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

[c3024]

Proposal

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

Logging in on a narrow window and then enlarging it to a non-narrow window dismisses the onboarding modal

What is the root cause of that problem?

When we login in the narrow view, the routes in state only have BottomTabNavigator and OnboardingModalNavigator

and when we enlarge it we find the template state from the path

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Line 59 in bbe7d38

const {adaptedState: templateState} = getAdaptedStateFromPath(pathFromCurrentState, linkingConfig.config);

and here REPORT screen is added to the template state

App/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

Lines 240 to 242 in 56033cb

	if (!isNarrowLayout) {
	routes.push({
	name: SCREENS.REPORT,

We extract the central pane from the template state and insert it into state if there is no top most central pane route in it

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 74 to 88 in bbe7d38

	const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneName(route.name));
	const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state);
	const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State<RootStackParamList>);
	// If there is no templateCentralPaneRoute, we don't have anything to add.
	if (!templateCentralPaneRoute) {
	return;
	}
	// If there is no topmostCentralPaneRoute in the state and template state has one, we need to add it.
	if (!topmostCentralPaneRoute) {
	insertRootRoute(state, templateCentralPaneRoute);
	return;
	}

and we insert it before modalRoutes

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Line 26 in bbe7d38

state.routes = [...nonModalRoutes, routeToInsert, ...modalRoutes]; // eslint-disable-line

but here

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 19 to 20 in bbe7d38

	const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
	const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);

only Left and Right Modal Navigators are included in the modal routes and Onboarding Navigator is not so it is moved to an index before the REPORT route.

So, the order of navigators will become
BottomTabNavigator > Onboarding Navigator > Report and the Onboarding Modal gets dismissed.

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

Exclude and include the NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR in these two lines respectively.

App/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

Lines 19 to 20 in bbe7d38

	const nonModalRoutes = state.routes.filter((route) => route.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR && route.name !== NAVIGATORS.LEFT_MODAL_NAVIGATOR);
	const modalRoutes = state.routes.filter((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);

What alternative solutions did you explore? (Optional)

[VictoriaExpensify]

Recreated the issue and I agree that this seem like a problem we should fix

[VictoriaExpensify]

It doesn't look like this is being resolved elsewhere

[melvin-bot]

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

[melvin-bot]

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