[HOLD for payment 2024-10-17] LOW: Investigate using native-stack on native platforms instead of stack

[mountiny]

Coming from here

When we have refactored the App navigation, we have chose to use the normal react-navigation stack as that gave us more control over animation/ transitions of pages on web. This was to also not complicate the MVP for the project with two types of stack.

The problem is that the normal stack does not lead to native feel of app page transitions in native device which makes the feel of the app worse as the page transitions are ever so slightly off compared to the other native apps you might be using on daily basis.

Its important to address this discrepancy and ideally introduce the native-stack for native iOS and Android platforms, as chat/ P2P users have high standards for native app quality.

cc @hannojg @adamgrzybowski

Issue Owner

Current Issue Owner: @anmurali

[hannojg]

Yes, will help investigating this or next week 🤝!

[hannojg]

PR is up:

• Perf/native stack navigation #29991

[hannojg]

We got two blockers at the minute:

• iOS 17 has bugs with the keyboard which hit in expensify once we turn on the native stack, waiting for an OS update here
• This upstream PR: feat(Android): add ios like slide animation software-mansion/react-native-screens#1945 so we have the same native transitions on android (right now the native transitions on android feel outdated)

[WoLewicki]

@hannojg as for the second dot, the ios like do you think that this animation is what people want on Android to have the native feel? Maybe we could explore the other animations that are strictly taken from the Android XMLs?

Also, could you elaborate how does native-stack improve the performance of the app exactly? One thing I can think of is native swipe to go back on iOS which is controlled by the native code, but you still need to mount the previous screen on the native side when it happens, did you check how it performs when going back to reports with many many messages?

[hannojg]

ios like do you think that this animation is what people want on Android to have the native feel

We have to double check the animation. Its called iOS like but I think it actually feels like the android default slide transition

Also, could you elaborate how does native-stack improve the performance of the app exactly

This is more about perceived performance and UX feeling. Right now you can tell by using the expensify app, that the transitions aren't the native transitions. So we want to have the native transitions so expensify feels like a native app.

you still need to mount the previous screen on the native side when it happens, did you check how it performs when going back to reports with many many messages?

Do I understand it correctly that you are suggesting that switching to native-stack could be a performance issue when doing the swipe back gesture?

[WoLewicki]

Do I understand it correctly that you are suggesting that switching to native-stack could be a performance issue when doing the swipe back gesture?

We have the same abstraction in the stack navigator, where we control the mounting/unmounting the views by using activityState prop. Native-stack should not have worse performance, I'm just curious if it is fast enough no to be laggy in high traffic accounts 😅

[mountiny]

we should test it out with high traffic accounts, the E2E tests once are built in like 2 weeks should also tell us more how it performs there

[melvin-bot]

This issue has not been updated in over 15 days. @hannojg, @mountiny eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mountiny]

Keeping this monthly, its not high priority and still waiting on some issues to get resolved.

[melvin-bot]

@hannojg, @mountiny, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[mountiny]

@hannojg How is this looking now with latesst ios, have they fixed anything?

[hannojg]

Hey, I am handing this over to our Chief Keyboard Officer @kirillzyusko who is way more familiar with those keyboard issues. Once he is done with fixing some other keyboard handling issues he'll take a look!

[mountiny]

@kidroca Can you comment on this one?

[kirillzyusko]

I'm ready to pick up this task, so you can assign it on me 👀

[quinthar]

Should this be closed? If not, what is the next step, who is doing it, and when?

[mountiny]

The PR is actively being worked on #37891, we are addressing some changes required upstream

[melvin-bot]

@anmurali, @kirillzyusko, @mountiny, @abdulrahuman5196, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[kirillzyusko]

@mountiny should we re-open this?

[mountiny]

Working on the PR again

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• [NoQA] Perf: PlatormStackNavigation - Use @react-navigation/native-stack on mobile platforms #37891

If no regressions arise, payment will be issued on 2024-10-17. 🎊

For reference, here are some details about the assignees on this issue:

• @kirillzyusko does not require payment (Contractor)
• @ishpaul777 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@anmurali] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mountiny]

Not awaiting for payment yet, we split this up to two PRs

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @kirillzyusko is from an agency-contributor and not due payment
• ROLE: @ishpaul777 paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@anmurali)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct