iOS- 1.0.2-51- Left menu shown in the center and need to reload App to fix it

[mallenexpensify]

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

---

Expected Result:

App should be open and show chat as usually.

Actual Result:

App is opened but left menu is shown in the middle. Need to toggle device orientation again to fix it.

Action Performed:

1. Launch App
2. Open any chat
3. Switch orientation of iPad from landscape to portrait
4. Switch orientation back to landscape
5. Tap on home button on iPAD to put app into the background
6. Open App from background

Platform:

iOS - iPad

Version Number: 1.0.2-51

Notes/Photos/Videos:

Expensify/Expensify Issue URL:
https://github.com/Expensify/Expensify/issues/157516

[Amazing1974]

can you share the source code? then i can fix it.

[mallenexpensify]

Hi @Amazing1974 everything you should need to propose a solution should be in
https://github.com/Expensify/Expensify.cash/blob/master/CONTRIBUTING.md
and/or
https://github.com/Expensify/Expensify.cash/blob/master/README.md
and/or
https://github.com/Expensify/Expensify.cash

[mallenexpensify]

@marcaaron assigned to you for incoming proposal reviews since you added the External label to the E/E issue

[marcaaron]

Gonna unassign myself from this one as the process changed on that.
Adding the Exported label should auto-assign someone now.

[MelvinBot]

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

[mallenexpensify]

on hold to see if #2051 magically fixes this too.

[deetergp]

🤞

[tugbadogan]

I debugged this issue and found that react native's Dimensions module is behaving weirdly on older iPad devices. When the app is sent to background, onDimensionChange callback function is called with wrong window dimensions before it's called with the right dimensions.

While using iPad in portrait mode (width: 768, height: 1024), when I send the app to the background this function is first called with (width: 1024, height: 768) and then with (width: 768, height: 1024). Components are rendered based on the first call and it's causing elements to be positioned badly on the screen.

I'm still trying to find out why it behaves like this on older iPad versions while it's working as expected on iPhone and iPad Pro.

[marcaaron]

Could be related to this ? facebook/react-native#29290

[tugbadogan]

@marcaaron

Could be related to this ? facebook/react-native#29290

Yes, it looks similar. I couldn't find any workaround or temporary solution yet.

[deetergp]

Any word on your findings, @tugbadogan?

[tugbadogan]

Yes, I have a proposal for this issue now.

Since this problem is caused by Dimensions native class is calling 'change' callback too many times with wrong dimensions, we can use debounce to slow down listening these changes, so we can avoid breaking call sites by triggering too many window dimension updates.

Making these changes resolve this issue.

[marcaaron]

Thanks, but maybe there's more to it? I applied this and was able to break it quickly by just changing the orientation a few times.

[tugbadogan]

Which device/emulator are you using to test this? I couldn't reproduce the issue after this fix even though I changed the orientation many times.

Screen.Recording.2021-04-22.at.18.41.09.480p.mov

[marcaaron]

I was testing on on simulator iPad Pro (9.7-inch). Sorry, I think maybe I had an old bundle cached when adding in the suggested change? Tested again and it does seem to fix it. Probably, it's fine to make this change since debouncing this event is a fine idea anyway. But we are not quite addressing the root problem.

[tugbadogan]

Hmm, I was able to reproduce broken view on orientation change on an iPhone (I couldn't find a reliable way to reproduce though). This looks like a separate issue then iPad having broken view when the app is sent to background. It looks like a bug on Drawer.Navigator.

[marcaaron]

Hmm, I was able to reproduce broken view on orientation change on an iPhone

I'm confused as the current discussion is not about iPhone.

This looks like a separate issue then iPad having broken view when the app is sent to background. It looks like a bug on Drawer.Navigator.

Not too sure what you are referring to exactly, but if you have discovered another issue please create a new issue or add context to an existing one.

[mallenexpensify]

I doubled price to $500 in Upwork https://www.upwork.com/jobs/~01e2db72cd3240af67

[mallenexpensify]

The link above wasn't getting any 👀 so I closed it and created another with the $500 price.
https://www.upwork.com/jobs/~01acd19801f956e8ed

[ViniSchonardie]

Im having some difficulties to reproduce the error on Ipad Pro 9-7 emulator;
But a good option would be to transform the hook to functional component and use this react native hook
import { useWindowDimensions } from 'react-native';
https://reactnative.dev/docs/usewindowdimensions
Its more reliable;

From React Native Docs:

useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm.

[ViniSchonardie]

Also, i am watching the React Native changelog, and aparently they made some changes about this on 0.63.4, and the Expensify.cash its on 0.63.3...

https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
Dimension update events are now properly sent following orientation change (0e9296b95d by @ajpaulingalls)
facebook/react-native@0e9296b

It says android versions, but its enough to give it a try

[marcaaron]

Its more reliable;

What makes it more reliable?

Dimension update events are now properly sent following orientation change (0e9296b95d by @ajpaulingalls)

Thanks, but that commit looks like it changed Java code and we are experiencing an issue on iOS.

[mallenexpensify]

@Jag96 Should I plan to pay @tugbadogan on June 15th for this?

[Jag96]

@mallenexpensify yes, updated the title 👍

[tugbadogan]

@mallenexpensify It looks like Upwork approved the milestone and paid me automatically after some time passed.

[mallenexpensify]

Hi @tugbadogan is this issue the 'exact' same as this one? #2447

The combo of these two has been confusing me for WEEKS

[tugbadogan]

@mallenexpensify This issue and #2447 are both caused by some animation bugs in react-navigation library. These issues are separate symptoms of similar bugs in react-navigation.

• In this issue, react navigation fails to update the position of the left menu when orientation is changed to landscape, so it's displayed in the center and UI breaks.
• In iPad - Chat - Chats are not accessible on iPad in Portrait mode (Pay on June 15th) #2447, when device orientation is changed to portrait, react-navigation fails to move the left menu out of screen, left menu is displayed correctly on the screen, but chat buttons are not clickable.

By upgrading react-navigation to 6.x, we started using React Animated 2 which I expect to solve positioning issues, so both of these issues can be closed.

[parasharrajat]

By upgrading react-navigation to 6.x, we started using React Animated 2

@tugbadogan I believe this perception is wrong here as per the docs https://reactnavigation.org/docs/6.x/drawer-navigator#uselegacyimplementation. And you have not set the flag explicitly.

[tugbadogan]

The documentation says

This defaults to true in following cases:
* Reanimated 2 is not configured
* App is connected to Chrome debugger (Reanimated 2 cannot be used with Chrome debugger)
* App is running on Web

Otherwise, it defaults to false

That prop defaults to false when Reanimated 2 is configured. This issue and other issue come back when I set useLegacyImplementation prop to true.

[parasharrajat]

I meant that we should set useLegacyImplementation as false explicitly as I think it says for any of those cases it's true. But its fine if issue is fixed.

[tugbadogan]

I meant that we should set useLegacyImplementation as false explicitly as I think it says for any of those cases it's true. But its fine if issue is fixed.

Yeah, it'd be better to set it false to enable Reanimated 2 on web and have consistency. That's need to be tested thoroughly on web though.

[tugbadogan]

I tried and it throws some exceptions, it may not be ready for react-native-web yet or we need to fix a couple of more things to enable it on web.

[parasharrajat]

@tugbadogan
I think Reanimated 2 is not configured on Android as well. I see a warning

[parasharrajat]

We may be missing these https://docs.swmansion.com/react-native-reanimated/docs/2.1.0/installation#android

[mallenexpensify]

This should have been paid via Upwork

[tugbadogan]

Hi @mallenexpensify,

Other issue (#2447) is closed now. I think we can close this issue as well.

[mallenexpensify]

Let's do it @tugbadogan !!!

[dklymenk]

Hello, I think the job posting for this issue is no longer relevant, right? https://www.upwork.com/jobs/~012e79714137f7faa6

[mallenexpensify]

Closed, thanks @dklymenk . This issue was a nightmare for me, think it got double posted months ago.