search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.03k stars 2.54k forks source link

[Main Tracking] App Navigation Reboot #11768

Closed puneetlath closed 10 months ago

puneetlath commented 1 year ago

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:

Implementation PRs

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

Browser History

Performance

Misc.

bfitzexpensify commented 1 year ago

I have read and reviewed this Design Doc!

arosiclair commented 1 year ago

I have read and reviewed this Design Doc!

tgolen commented 1 year ago

I have read and reviewed this Design Doc!

francoisl commented 1 year ago

I have read and reviewed this Design Doc!

JmillsExpensify commented 1 year ago

I have read and reviewed this design doc.

JmillsExpensify commented 1 year ago

How ironic ^^^

Julesssss commented 1 year ago

I have read and reviewed this Design Doc!

iwiznia commented 1 year ago

I have read and reviewed this Design Doc!

neil-marcellini commented 1 year ago

I have read and reviewed this Design Doc!

melvin-bot[bot] commented 1 year ago

@JmillsExpensify, @puneetlath, @marcaaron, @mountiny Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

mountiny commented 1 year ago

We are moving to detailed section, thanks for all the great high-level reviews!

mountiny commented 1 year ago

Work on Detailed section continues, I am focusing on familiarizing myself with the react-navigation library

tjferriss commented 1 year ago

I have read and reviewed this Design Doc!

sketchydroide commented 1 year ago

I have read and reviewed this Design Doc!

stitesExpensify commented 1 year ago

I have read and reviewed this Design Doc!

JmillsExpensify commented 1 year ago

Still working through the detailed.

marcaaron commented 1 year ago

Had a meeting today with @mountiny and @danieldoglas to go over some current App navigation stuff.

Here are some notes, links, and ideas for next steps:

Meeting Notes

Next steps

Links

https://github.com/Expensify/App/blob/main/src/libs/Navigation/Navigation.js https://github.com/Expensify/App/blob/main/src/libs/Navigation/linkTo.js https://github.com/Expensify/App/blob/main/src/libs/Navigation/linkingConfig.js https://github.com/Expensify/App/blob/main/src/libs/Navigation/DeprecatedCustomActions.js

https://reactnavigation.org/docs/stack-actions/ https://reactnavigation.org/docs/navigation-state https://reactnavigation.org/docs/custom-navigators

trjExpensify commented 1 year ago

I have read and reviewed this Design Doc!

mountiny commented 1 year ago

I will start on these 2 tasks today as well as continuing with familiarizing myself with the react-navigation:

Put some basic wireframes together to help explain the plan for web and using the Stack navigator Join the React Navigation Discord and share our plan for web with the maintainers to see if they have any insights

mountiny commented 1 year ago

At the moment, we are working on the POC app to make sure all the actions we want work well and as expected there. We would like to add a functionality whereby resizing the web window we switch to mobile/native like navigation flawlessly.

We also reached out to SWM to get some of their experts to help validate our approach and ideas/ propose better solutions. They should come back to us next week the latest. https://expensify.slack.com/archives/C04878MDF34/p1670361091290799

mountiny commented 1 year ago

Latest update here

mountiny commented 1 year ago

Vivek continues to look into using the options to define the styles of the pages, I am unfortunately ooo sick, hoping to come back tomorrow.

mountiny commented 1 year ago

We had our first calls with Adam from SWM and they already proposed some ideas. We will continue to work with them tomorrow

mountiny commented 1 year ago

We are working closely with Adam from SWM on the proof of concept app since Thursday. They already had a chance to propose two approaches after a quick familiarization with the problem.

Next steps

I will be in touch with Adam to confirm we can make the transformation between the two navigators without loosing any history or other detrimental effects on the UX.

I will update this PR which simplifies navigation to nested stack https://github.com/marcaaron/navigation-test/pull/5

mountiny commented 1 year ago

Keeping the updates in this thread this week. Adam has shared a WIP branch where he already has some parts of the responsiveness which is promising and we can build on top of that.

I will try to do some testing tomorrow and sync with Adam to see where we are at and what problems he has faced with.

mountiny commented 1 year ago

Still ironing out the details of the transformation of the navigator state, prepping for deep linking as well.

Next steps are to ensure the browser history (back button logic in browser) work after the transition from native (small screen) to web layout.

JmillsExpensify commented 1 year ago

Removing from WAQ per this Slack thread.

mountiny commented 1 year ago

The hustle slowed down a bit over the Holidays due to time off, however, Adam has posted an update just now. We will try to catch up tomorrow at some point to chat about the direction SWM wants to explore as it seems like the cross-platform aspect (and supporting multiple layouts/ navigators) will have to be hacky.

I will provide hopefully more detailed update once we catch up

JmillsExpensify commented 1 year ago

Should we go ahead and create a project for this initiative? It's not super critical at the moment, because we're still in the research phase. I'm mainly thinking about how we keep the right visibility on the project for right now and when we get to implementation.

mountiny commented 1 year ago

We are discussing whats the best way to move forward with this project and its management. By the SWM's research and removing from WAQ we got to a cross-road where we will ideally need to do other predesign meeting to see how to move forwards.

@marcaaron has nicely summed it up here

There are some limitation of the react-navigation which is not made to be cross-platform so we will inevitably need to have hacks to support web and mobile at the same time. SWM works on new library with cross-platform in its core, however, it is still early and in "beta" phase. We need to make sure we all align on whats the best way forwards.

mountiny commented 1 year ago

Latest update in Slack.

I will post a larger update in Slack to get everyone on board with the current plan we have or if people prefers different directions.

mountiny commented 1 year ago

Posted an update and started a discussion in #expensify-open-source.

mountiny commented 1 year ago

Adam will hopefully be back in the game today after being sick last week. I will try to do some more stuff in the design doc which is not hold on the code changes.

roryabraham commented 1 year ago

I have read and reviewed this Design Doc!

mountiny commented 1 year ago

Brought one question to Slack so we can get opinions of other people on this potential change in web Back button navigation pattern https://expensify.slack.com/archives/C01GTK53T8Q/p1673363145534749

mountiny commented 1 year ago

Had a good discussion in the slack threads linked above. We will take our time to try to achieve cross-platform consistency as much as possible. It will most likely require some further pre-design as there are some flows which are unclear only from the high-level now.

For example, once we allow tablets to use landscape, we have this scenario (and describes what the web app should do in this layout as well). In Native Android app, on tablet in landscape, user would have this layout:

image

Then:

What does android back button does in this case?

There would most likely be more usecases we need to address and the more examples we go through and agree on how they will work.

marcaaron commented 1 year ago

As per the initial predesign conversation navigating to chats is an "additive" action. A common request for people when using web is that navigating to chats should add items to the browser history a.k.a. back button takes you to a previous chat. So, we would do the same on Android? I don't think it matters that the LHN is visible here. One of the core parts of our design discussion was that navigating to a chat would push it onto a "stack".

mountiny commented 1 year ago

As per the initial predesign conversation navigating to chats is an "additive" action. A common request for people when using web is that navigating to chats should add items to the browser history a.k.a. back button takes you to a previous chat. So, we would do the same on Android? I don't think it matters that the LHN is visible here. One of the core parts of our design discussion was that navigating to a chat would push it onto a "stack".

Thanks for clarifying, I will try to add these web-layout examples to the design doc, ideally as some visual examples. When chatting about these, its showing that people find it hard to be sure whats the expected behaviour with the web layout navigation.

The mobile navigation is intuitive, but since the layout is different than on desktop, saying the back button will do the same as on mobile is not clear since that looks differently.

Making a set of examples and edge cases listed in the testing section of the design doc will be also helpful for the POC since we can go through all of those flows and ensure they behave as we want.

marcaaron commented 1 year ago

I will try to add these web-layout examples to the design doc, ideally as some visual examples. When chatting about these, its showing that people find it hard to be sure whats the expected behaviour with the web layout navigation.

Thanks, that would be really great!

The mobile navigation is intuitive, but since the layout is different than on desktop, saying the back button will do the same as on mobile is not clear since that looks differently.

Can you rephrase? I did not understand this part.

Making a set of examples and edge cases listed in the testing section of the design doc will be also helpful for the POC since we can go through all of those flows and ensure they behave as we want.

Are we still working on a POC? I'm not too sure after this comment. Or maybe you are referring to some distant POC of the future and not the one that we have been working on.

Let's sync up so we are clear on the direction post that Slack conversation.

mountiny commented 1 year ago

The mobile navigation is intuitive, but since the layout is different than on desktop, saying the back button will do the same as on mobile is not clear since that looks differently.

Basically we have defined the navigation actions in general and then showcased how this works on mobile layout. Mobile layout is different and includes the LHN route (root showing the list of chats). This does not exist in desktop layout hence we can never navigate back to this exact same root and root of desktop always shows some chat report as well.

This means that on mobile, if you navigate to some chat, then if you want to move to some other chat, you need to pop that Chat screen first to get to LHN so you can choose different chat. This will mean user would exit the App after two back button click from the chat report.

On desktop, you dont need to go back before navigating to another report, which means that chat screens wont be removed from the stack so back button will go through the chat screens as you expect on the browser.

The actions are same under the hood of course, but I think it will be helpful to just put examples down for the desktop layout as well so people can ensure they understand the expected patterns correctly.

Catching up will be great, lots has been tried and explored by Adam, so getting on a same page is very useful. Posted in Slack to find a time for the catch up

marcaaron commented 1 year ago

This means that on mobile, if you navigate to some chat, then if you want to move to some other chat, you need to pop that Chat screen first to get to LHN so you can choose different chat. This will mean user would exit the App after two back button click from the chat report.

My thinking here: You can navigate from one chat to another chat via a deep link so the behavior is not really "different" depending on the platform. The main difference is that on a desktop/web/tablet view you have basically a list of "deep links" to new chats that would get "pushed" onto the stack.

I think the most important thing is to focus on:

How does this change someone's expectations?

Why does it matter?

marcaaron commented 1 year ago

This will mean user would exit the App after two back button click from the chat report.

Sorry, it's not clear to me what problem we are talking about. I would suggest we move this conversation to a private DM or public Slack thread and use the main tracking issue to summarize instead of use it to discuss implementation details.

mountiny commented 1 year ago

I completely agree with you on this one.

The reason I bring this up is that people dont really think of deep-linking to other chats in native so that usecase is not in their mind when they think of the patterns.

There is no problem with the technical details here, all I meant to say is that people are not on the same page when they read the plain words descriptions of the navigation patterns which has proven in many discussions we had in Slack.

The test cases and walkthroughs would serve as clear example we can point to and people can quickly understand and get on a same page. Just running a bit short on time these days to put this together.

marcaaron commented 1 year ago

Thanks, sounds like we agree we can use this issue mainly to update people on how the project going at a high level moving forward.

mountiny commented 1 year ago

Posted a quick update in open-source channel here.

mountiny commented 1 year ago

The state at the moment:

Next steps:

mountiny commented 1 year ago

Latest update from SWM is here.

mountiny commented 1 year ago

Daily Update:

mountiny commented 1 year ago

Daily Update:

marcaaron commented 1 year ago

Last I heard, we are engaging some react-navigation folks to help with the proposal. Excited to see the results of that conversation.