[Hold for payment 5/7] Blank screen after creating an account

[kidroca]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

User proceeds to expensify.cash chat list

Actual Result:

User is redirected to a blank screen and a JS error can be seen in the console

Action Performed:

1. Start from logged out state and proceed to create a new account
2. While logged out, type and login with brand new email address so it can trigger sign up flow
3. Get validation link from e-mail. On dev I'm copying the email link and appending it to localhost - e.g. http://localhost:8080/setpassword/10024706/EHOHMPGWM
4. Type new password and click "set password"
5. User is redirected to a blank screen and a JS error can be seen in the console

Workaround:

Refreshing the page manually would fix the issue and the chat list would load

Platform:

Where is this issue occurring?
The issue is confirmed in:

Web ✔️
Android ✔️
iOS
Desktop App
Mobile Web

The other environments are probably affected as well

Version Number: 1.0.21-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Bug5020701_video.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[kidroca]

@marcaaron This is a follow up on the problem discovered in #2346 (comment)

Proposal

As per my comment here #2346 (comment) this was traced to a call for Navigation while the navigation component have no navigators (stacks or other) mounted. This would result in the error printed on the console "Error: The 'navigation' object hasn't been initialized yet."

This issue occurs only during initialization.

While navigation is not yet ready an incoming call can be captured and scheduled for when the navigator components mount. This would be shortly after the call. As @marcaaron suggested here: #2346 (comment)

1. Allow NavigationContainer to initialize with no report
2. React to the NavigationContainer.onReady event and perform execute any captured navigation action

The navigate function here can be stubbed while Navigation is not yet ready:

https://github.com/Expensify/Expensify.cash/blob/dba06b5ced71edc7ae1663179ca808162635b0fd/src/libs/Navigation/Navigation.js#L100-L105

Navigation.js

let lastAttemptedRoute;

function navigate(route) {
 // unmodified
}

function navigateLater(route) {
  lastAttemptedRoute = route;
}

function enableNavigation() {
  if (lastAttemptedRoute) navigate(lastAttemptedRoute);
    exports.navigate = navigate;
}

const exports = {
  navigate: navigateLater,
  enableNavigation,
};

export default exports;

And then we call enableNavigation here:

https://github.com/Expensify/Expensify.cash/blob/dba06b5ced71edc7ae1663179ca808162635b0fd/src/libs/Navigation/NavigationRoot.js#L37-L45

NavigationRoot.js

<NavigationContainer
    onReady={enableNavigation} 
    ...
/>

A note on exports.navigate = navigate.

Changing the implementation of navigate during runtime saves us from:

• dirtying up the actual navigate code.
• introducing bugs there
• make a needles check for the lifetime of the navigation

---

Alternative

A simpler alternative is to just prevent navigation while it's not yet ready.
It is suggested by react navigation as a simple solution to the problem during initialization: https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization

[marcaaron]

Proposed solution makes sense to me. Let's do it!
Going to assign you and hand this off to a team member.

[MelvinBot]

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

[marcaaron]

@arielgreen can we get some help creating a job here? No need to add Exported label as I've already triaged this one and @kidroca has a good solution. Thanks!

[kidroca]

Bump, I haven't started working on this as I'm not yet hired on Upwork

[roryabraham]

Adding the DeployBlockerCash label to this, @marcaaron if you disagree please remove the label.

@arielgreen Making this a daily since it's preventing E.cash production deploy.

[arielgreen]

Thanks @roryabraham!

@kidroca, I've just sent over an invite to the Upwork job.

[kidroca]

@arielgreen
I've got nothing new in Upwork, are you sure you have the correct profile? This is it: https://www.upwork.com/o/profiles/users/~01afad6ac000e0322f/

[arielgreen]

@kidroca yep, correct profile. Can you see this job?

[marcaaron]

Not a blocker but left a comment as I think it's something we should follow up on before considering this issue "closed".

#2575 (comment)

[arielgreen]

Reopening, will close upon payment 5/7.

[arielgreen]

Paid contract + bonus for proposing the issue. Thanks @kidroca.