App
App copied to clipboard
[Wave 8] [Ideal Nav] Back navigation issues
Action Performed:
There are several issues reported that have to do with the back navigation and wrong navigation animations. I listed those issues below.
~~### Issue 1:~~ ~~1. Make sure you're on a mobile phone or on a browser with a smaller width~~ ~~2. Make sure that the test account has at least one workspace~~ ~~3. Click on the Settings icon 🔧 on the bottom tab > Workspaces > Select a workspace~~
~~video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921860615~~
Issue 2:
- Make sure you're on a mobile phone or on a browser with a smaller width
- Click the Chat button on the bottom tab
- Select a chat/report
- Go back
- Confirm that the Chat List page opens from the right when the page should close to the left (watch the video)
- Click the Settings (🔧) button on the bottom tab
- Confirm that the Setting page opens from the right when the page should not animate. Only the part above the bottom tab should change without animation.
https://github.com/Expensify/App/assets/98560306/ac15026d-e47f-471a-bc73-9b7645884a53
Issue 3:
- Click the
Settings
button on the bottom tab > Workspaces - Click the back button (left chevron icon)
- Confirm that the Chat List page opens from the right when the Workspace List page should close to left to go back to the Settings page
https://github.com/Expensify/App/assets/98560306/cfb693cb-e8cd-4cd5-9704-2c39c3dc1cfd
Issue 4:
- Test this on a browser. Shrink the window width.
- Visit https://dev.new.expensify.com:8082/settings/preferences
- Press the back button on the header (left chevron icon next to Preferences)
- The app navigates to the Chats page when it should navigate back to the Settings page.
video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921882304
Other related issues
- https://github.com/Expensify/App/issues/35669
- https://github.com/Expensify/App/issues/35689
- https://github.com/Expensify/App/issues/35697
- https://github.com/Expensify/App/issues/35703
- https://github.com/Expensify/App/issues/35756
- https://github.com/Expensify/App/issues/35729
Workaround:
N/A
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [x] Android: Native
- [x] Android: mWeb Chrome
- [x] iOS: Native
- [x] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [x] MacOS: Desktop
Screenshots/Videos
vides are attached above.
Triggered auto assignment to @CortneyOfstad (Bug
), see https://stackoverflow.com/c/expensify/questions/14418 for more details.
Hi! Working on it!
@adamgrzybowski I added several reported issues that probably related to the back navigation to the original post. Please go through them and let me know if there are issues that should be addressed separately from this issue.
@adamgrzybowski can you also check if this issue can also be fixed by the solution you're thinking about?
⚠️ Looks like this issue was linked to a Deploy Blocker here
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.
If a regression has occurred and you are the assigned CM follow the instructions here.
If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.
Heads up @adamgrzybowski @hayata-suenaga ^^^
Closed the issue linked above 🙇
@adamgrzybowski also another back navigation related issue reported here
Proposal
Please re-state the problem that we are trying to solve in this issue.
Pressing the back button on the "Keyboard Shortcuts" page leads to a blank screen
What is the root cause of that problem?
OnBackButtonPress
is missing in HeaderWithBackButton
component in all the related pages
What changes do you think we should make in order to solve the problem?
Pass the prop onBackButtonPress={() => Navigation.goBack()}
in HeaderWithBackButton
in all the pages pertaining this bug.
What alternative solutions did you explore? (Optional)
N/A
hey @CortneyOfstad , this issue would be eventually opened to external contributors right :)
⚠️ Looks like this issue was linked to a Deploy Blocker here
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.
If a regression has occurred and you are the assigned CM follow the instructions here.
If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.
@GandalfGwaihir this issue will be handled by an engineer from an expert agency. However, thank you for your proposal.
This is another instance of back navigation issue: https://github.com/Expensify/App/issues/35736#issuecomment-1924898853
found one more similar issue: https://github.com/Expensify/App/issues/35689
not 100% sure but maybe this issue https://github.com/Expensify/App/issues/35756 is also in someway related to this root issue
Related: https://github.com/Expensify/App/issues/35669
If you find any back navigation related issues, please add your issue to the Other related issues
section in the original post of this issue. 🙇
@hayata-suenaga when there are that many similar issues, what is the next step here? Have not come across a similar scenario via BugZero before, so just wanted to confirm next steps. Thanks!
@CortneyOfstad I apologize for the confusion.
The fix @adamgrzybowski is working on will probably solve most of these issues. Once C+ is assigned to the PR, we can ask them to test each regression case reported.
Let me know if you have any questions.
Hey @hayata-suenaga I'm continuing to search for the best solution.
I went through the issues in the description of the PR and it looks like the first one:
Issue 1: Make sure you're on a mobile phone or on a browser with a smaller width Make sure that the test account has at least one workspace Click on the Settings icon 🔧 on the bottom tab > Workspaces > Select a workspace video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921860615
Is not actually related to the go back. It's related to this issue
I can't reproduce the issue 2 and 3.
Still can reproduce the issue 4.
I will check out the rest.
Adam, thank you for checking through the issues. I removed (i.e. strikethrough-ed the case 1) and moved it to this issue.
Looks like this is also related: https://github.com/Expensify/App/issues/35969
This one too: https://github.com/Expensify/App/issues/35965
@hayata-suenaga another ones: #36040, #36035
Track this https://github.com/Expensify/App/issues/36054
@muas19 thank you for letting us know about the issue, but that issue is a separate one from this one
@hayata-suenaga on issue 2
Confirm that the Setting page opens from the right when the page should not animate. Only the part above the bottom tab should change without animation.
this is a bit confusing, Settings page should open from the right with animation or just open without any animation?
https://github.com/Expensify/App/assets/75031127/dfe61b17-2dc5-4602-8f0e-d0478c8bf8ff
It is almost impossible to go back from workspace settings without reloading
Is this related @hayata-suenaga @adamgrzybowski
https://github.com/Expensify/App/assets/75031127/0be64152-1836-401b-9e82-1cda6a05fe65
⚠️ Looks like this issue was linked to a Deploy Blocker here
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.
If a regression has occurred and you are the assigned CM follow the instructions here.
If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.
this is a bit confusing, Settings page should open from the right with animation or just open without any animation?
The behavior you recorded is as expected. No animation for switching between bottom tabs.
It is almost impossible to go back from workspace settings without reloading
Not sure why impossible. Do you have any specific case? The back button may not be exactly right in that case though. There is a ticket for that https://github.com/Expensify/App/issues/35610
https://github.com/Expensify/App/assets/67908363/32602d28-9d05-4f33-94df-fcd496e7f233