[Due for payment 2025-09-17] [Due for payment 2025-09-12] [$250] Use route preloading functionality from react-navigation 7 to improve user experience by making switching between tabs faster and smoother

[mountiny]

Coming from

Proposal

Use route preloading functionality from react-navigation 7 to improve user experience by making switching between tabs faster and smoother.

Background

react-navigation 7 is set to be merged into the main branch soon. This PR bumping the version of the library in its current state allows to use new features of react-navigation 7 such as preloading routes. Initial testing shows that using it can be beneficial in many scenarios within our application, notably in features like expense creation, onboarding flow, and tab navigation — the latter is what we focus on here.

Problem

Currently, users experience a delay when switching between tabs, such as moving from the Reports tab to the Inbox tab. This lag occurs because each screen needs time to render and load its data, which significantly disrupts the smoothness of the user experience. More context can be found here.

Solution

To address this issue, we propose preloading initial screens on adjacent tabs while users are still viewing the current one. This proactive approach allows the application to render and load data in the background. Consequently, when a user selects a tab, the transition feels much faster, as the data for that tab has already been loaded and only requires the animation to perform (this mechanism is described more in detail here).

To evaluate the effectiveness of the proposed preloading method, Time to Interaction (TTI) times were measured for the initial tab screens while switching between them. The data shown below represents the average results from five separate tests for each version. In the optimized setup, we preloaded navigators for adjacent tabs, skipping any that were already preloaded.
Tests were conducted on the following platforms and simulators:

• Web: MacOS using Chrome browser
• Android: Pixel XL on API 34 Simulator
• iOS: iPhone 16 Simulator

More details in the linked thread

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021939801367613472955
• Upwork Job ID: 1939801367613472955
• Last Price Increase: 2025-06-30

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021939801367613472955

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

[melvin-bot]

Triggered auto assignment to @RachCHopkins (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.