[Main Tracking] App Navigation Reboot

[puneetlath]

Design doc link - https://docs.google.com/document/d/1cQ87HcDA9RrmBM4ch7PmlNi9N9ZP8abQuPF0gKYrxDE/edit

Problem:

We initially implemented react-navigation in App without a proper design doc as part of the NewDot MVP. While this library came with some awesome benefits - we’ve realized over time that some of our early decisions in how we use the library have impacted performance and usability (i.e. bugs and lots of em). Our current design also deviates from our ideal design and needs to be reworked.

Solution:

Let’s establish a ruleset of navigational actions a user can take and define which gestures or interactions relate to those navigational actions. Then we’ll re-implement React Navigation with those rules in mind. We will kill the drawer navigator favoring a simpler stack navigator approach. And finally, unblock the bugs and make our app navigation competitive and bug free.

Timeline: WhatsApp Quality Level Urgency 🔥

Plan of Action:

• #whatsnext link
• Send Strategy@ email
• Predesign links 1, 2, 3
• HL Design Doc link
• Detailed Design Doc
• Implement New Navigation
• Unblock bugs by fixing or closing them

Implementation PRs

• [HOLD for payment 2023-06-15] [Navigation Reboot] Update the react-navigation version #15846
• [Navigation Reboot] Implement and use the createStackNavigator #15847
• [HOLD for payment 2023-06-15] [Navigation Reboot] Update RHP to be encapsulated in another navigator #15848
• [HOLD for payment 2023-06-15] [Navigation Reboot] Implement the navigation UP function  #15849
• [HOLD for payment 2023-06-15] [HOLD for payment 2023-05-26] [Navigation Reboot] Remove the X from modal screens #15850
• [HOLD for payment 2023-06-15] [Navigation Reboot] Create the ResponsiveNavigator #15851
• [HOLD for payment 2023-06-15] [HOLD for payment 2023-05-09] [Navigation Reboot] Remove the drawer navigator #15852
• [Navigation Refactor] Fix the Drop to upload feature  #18064
• [HOLD for payment 2023-06-15] [Navigation Refactor] Pronouns page has no animation when opening #18092
• [Navigation Reboot] Make the UP button more responsive #18603
• [HOLD for payment 2023-06-15] [Navigation Refactor] Implement the Stack navigation into NewDot #19665
• [HOLD for payment 2023-07-24] [Navigation Refactor] Follow-ups from the migration PR #20320
• [Polish] Make the RHP animations always working on web and they are smooth #20342
• Tests:
  • [Navigation Reboot] Add regression tests for new navigation reboot #15853
  • [HOLD for payment 2023-06-23] [Navigation Reboot] Add NAVIGATION.md file to the repository #15854

Overview

This GH will serve as the tracking issue for improving our React Navigation implementation. A bunch of issues with navigation have been found and are referenced in this project.

List of related issues

Currently fall into two major categories

Drawer Navigation / State

• Drawer state is unpredictable
  • [$500] Page goes to home screen if press chat and refresh the page - reported by @phivh #8126
  • Closing certain pages (drawers) navigates to the wrong URL #11111
  • IOS - Chat - Chat conversation is shifted and Fub menu partially visible after Take a picture and sent it #11961
  • [HOLD #11768] [$1000] Login - After creating a new account the user is not brought to Concierge conversation #11948
  • BUG: [mweb-safari] keyboard remains open while navigating back to LHN using fingers from right to left reported by @gadhiyamanan #11970
  • [$1000] Fix navigating to workspace chat when a new invited user logs in #12041
• Drawer state transition end can not be listened for - [HOLD - App Navigation Reboot] [$500] mWeb- Previous chat username is displayed when you navigate back from different chat @Yash Chauhan & @Puneet-here #9253
• Home screen / MainDrawerNavigator is not getting route params from Report route
• Switching from large to small width screens breaks search navigation (actually the drawer is just stuck closed)
  • [HOLD - #11768] [$500] Unable to open chat through search when the browser/app size is decreased - reported by @adeel0202 #9734
  • [HOLD] [$250] Web - Firefox- Search box - New chat selected through the search box does not open correct chat conversation #9342
• Navigating to search page using a link while logged out ends up in empty option list after signing in
  • [HOLD for payment 2023-05-23] [$1000] Search page shows blank list after login while trying to open that deeplink url reported by @0xmiroslav  #12717
  • [HOLD #11768][$1000] First name, last name not pre-filled on Profile page after login while trying to open that deeplink url reported by @0xmiroslav  #12719
  • [HOLD #11768] [$250] Report detail page is opened and closed immediately after login while trying to open that deeplink url reported by @0xmiroslav #12428
  • [$250] Workspace - That page is nowhere to be found error message appears for a brief moment reported by @thesahindia  #12616
• [HOLD #11768] [$1000] Hide create a workspace page when app is loading #12128
• [HOLD for payment 2023-06-13] [$1000] Infinite loading while opening Concierge deeplink #16319
• [HOLD #11768] mWeb - Chat - The page starts to shake when user went back to the conversation #17147

Browser History

• Back navigation / history stack for reports on web is hacked in
• mWeb navigating back exits the chat (report route not added to history
  • [HOLD #11768] Navigating Back takes the user to the home screen on the web - reported by @parasharrajat #10507
  • [HOLD #11768] Navigating Back takes the user to the home screen on the web - reported by @parasharrajat #10506
  • [HOLD #11768] mWeb-lands on wrong screen when pressing the back button from the attachment screen @gadhiyamanan #11372
• mWeb visual bug on Safari related to popstate event
  • [HOLD #11768] [$8000] mWeb - Swipe to go back on safari mobile app flickers - reported by @adeel0202 #7737
• Back/Forward shortcut keys do not work
  • [HOLD #11768] [$8000] The Back ⌘[ and Forward ⌘] shortcuts keys are not working as expected when navigating via RHN (Right Hand Navigation) #8657
  • [HOLD #11768] [$16000] Desktop - The Back ⌘[ and Forward ⌘] shortcuts keys are not working as expected in LHN #4612
  • [HOLD #11768] mWeb-lands on wrong screen when pressing the back button from the attachment screen @gadhiyamanan #11372
  • [HOLD #11768] Web - Pressing back after refresh dismisses the modal on many pages @Puneet-here #11420
  • [Hold #11768] mWeb- Connect Bank Account - Pressing back button at android in the middle of a step takes you back to the workspace page instead of going back to the previous step @Puneet-here #11429
• After deleting stuff, navigating back can lead to a 404
  • [$250] Android/IOS - Blank screen and an error displays while trying to delete a workspace right after creating it @adeel0202 #11524
• [HOLD #11768] - Pressing X closes the chat in mobile web reported by @Puneet-here #11453
• [HOLD #11768] Web- Chat - Transition using the back button does not work correctly #10409
• [HOLD #11768] Wrong URL when new chat is selected from new chat list - Reported by @aneequeahmad #11092
• [HOLD #11768] mWeb / Android - Popovers aren't closing on navigating back in native - reported by @thesahindia #9823
• [HOLD] [$250] mWeb- LHN - Forward arrow doesn't work when pressed again #12203
• [HOLD on #15212] Bug: Mark as unread state vanishes after closing the app in IOS app @chauchausoup #11515
• [HOLD #11768] [$1000] Android - Split Bill - Keyboard is not dismissed for a brief moment after changing currency #13449
• [HOLD #11768] Connect bank account manually page shows up on pressing "connect bank account" #13743
• [HOLD] When pressing back from Step 2 (Connect Bank Manually), it navigate to Connect Bank Account page. #14973
• [HOLD App Navigation Reboot #11768] [$1000] Web - Double click on message on user details page opens group with that user if group chat with that user is the latest chat #16557

Performance

• [HOLD App Navigation Reboot] React navigation StackNavigator causes screen content to load slowly #14036
• [HOLD #11768] Screens are unmounting unnecessarily when navigating between them #14173

Misc.

• [Tracking] Web/Desktop - Browser Resizing  #13971
• [$1000] Pressing space bar while details page is opened, scrolls up the reports #15631
• [HOLD #11768] [$8000] Chat room wobbles while opening up on mobile Chrome or Safari #15239
• [HOLD #11768] After opening the timezones deeplink once, pressing enter/return on any other page takes the user back to the timezone page #16512

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[parasharrajat]

Get Control of React-Navigation

🔥 🔥

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[puneetlath]

Suggestion from @roryabraham: move src/libs/Navigation to src/Navigation to highlight its importance to someone coming to the repo for the first time.

[puneetlath]

Another interesting note from @roryabraham: we don't use React Navigation's link component.