[HOLD for payment 2021-12-06] [Hold for payment on 25th Nov] [$1000] Android/iOS - Changing orientation breaks layout

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! https://www.upwork.com/jobs/~0130cf8bfe4742fbde

---

Action Performed:

1. On an Android with a big screen
2. Open the app
3. On LHN, change the orientation to landscape

Expected Result:

Layout should not break

Actual Result:

Layout is broken after changing the orientation to landscape.

Workaround:

Closing and reopening the app removes the issue.

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.3-3

Reproducible in staging?: yes
Reproducible in production?: yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

layout.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1631730111364600

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[isagoico]

I was able to reproduce this issue in a Galaxy A52 (6.5-inch screen size)

[MonilBhavsar]

Was able to reproduce the reported issue on Android simulator and iOS device...

... But looking more into screen orientation of our app, looks like we need to improve it a lot. In the app, on login page in landscape mode, the highlighted part of screen is responsive, Trying to scroll down by sideways makes one feel like app is unresponsive...

...We also need to improve transition when changing from landscape to portrait and vice versa.

RPReplay_Final1632986507.MP4

[laurenreidexpensify]

Having some issues getting this on Upwork, will upload tomorrow

[laurenreidexpensify]

https://www.upwork.com/jobs/~0130cf8bfe4742fbde

[MelvinBot]

Triggered auto assignment to @Julesssss (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[laurenreidexpensify]

@MonilBhavsar @Julesssss you can decide between two of you who wants to stay assigned 🙃

[MonilBhavsar]

Oh, I should have unassigned myself from this one after adding external label.

[Julesssss]

Honestly, I think we should just block landscape mode for now. It can be a lot of work to support a rarely used feature.

[MonilBhavsar]

👍 I see slack doesn't have this feature too

[roryabraham]

I do think we should just fix this – though we should take it one problem at a time. It doesn't need to be a top priority for us, but when we find something that's very broken with orientation change, we can fix it.

[Julesssss]

Although the team mostly disagrees that landscape mode is an important feature for mobile, valid counterpoints have been made here. We support iPad, and landscape mode is arguably the best way to consume the app. So we should fix landscape bugs.

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[parasharrajat]

@Julesssss

Proposal

After research and testing on all platforms, I found that there is glitch in Drawer animation which we can't solve by adjusting any of its props. When we switch between slide to permanent drawer type the translation style is not removed either from Screen or sidebar(it's random). I am also able to reproduce this on the web when we switch between mobile and web resolution. I am working on a PR where I updated the version of R-Navigation and its severity got increased.

I have a solution for this.

• Using key prop on the BaseDrawerNavigator

  App/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js

  Line 37 in 7986e4e

  <Drawer.Navigator

as

key={`BaseDrawerNavigator${props.isSmallScreenWidth}`} //There is only one instance of BaseDrawerNavigator so no duplicate keys

we can cause a re-render of the drawer on orientation change and which will recalculate and fix it. The cost of it is the same as switching reports (Does not affect UX).

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @Julesssss!
Please apply to this job in Upwork and let us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Julesssss]

Smart fix, the re-render is definitely a change worth making.

Lauren is off for a few days, but please feel free to make a start on the PR if that suits you @parasharrajat.

@laurenreidexpensify please hire @parasharrajat when you are back.

[kadiealexander]

Just helping Lauren out, @parasharrajat could you please submit in Upwork so I can hire you? Thanks!

[parasharrajat]

@kadiealexander Did.

[Julesssss]

Merged, awaiting payment.

[laurenreidexpensify]

Thanks Julesbot 🤖

[laurenreidexpensify]

I completely missed hiring Rajat in Upwork on this one, so making a daily so I make sure to pay as soon as he's accepted the offer

[parasharrajat]

Just did @laurenreidexpensify.

[laurenreidexpensify]

@parasharrajat paid!

@Santhosh-Sellavel I'll issue you a $250 bonus now

[laurenreidexpensify]

Nearly finished with payment for Santhosh, will close after that

[laurenreidexpensify]

Everyone has been paid - closing 👍🏽

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.16-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• force recalculation of drawer on orientation change #6356

If no regressions arise, payment will be issued on 2021-12-06. 🎊