perf: Freeze screens and unmount Browser and Transactions screens when unfocused

[andrepimenta]

Description

This PR improves the performance of the app by:

• Suspending all screens that are not visible to the user (using React Freeze)
• Unmounting completely the Browser and the Transaction screens when they are not active
• Unmounting all Browser tabs that are not active when using the Browser.

Note: Unmounting the Browser also fixes this Browser issue: https://github.com/MetaMask/mobile-planning/issues/1247

Related issues

Fixes: https://github.com/MetaMask/mobile-planning/issues/1247

Manual testing steps

1. Go to Browser or Transactions
2. Leave that screen
3. Re-enter screen, notice it loads again

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 988cbe0
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/adc065a8-a7c5-47ac-94dc-63f185456657

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Cal-L]

Left some comments. Let's also provide some vids on before and after showing that the screens are frozen

[Cal-L]

Since we're on React Navigation v5, it looks like we also need to enable screens via enableScreens(true) and then passing detachInactiveScreens option to stack / tabs / etc.

[Cal-L]

https://github.com/software-mansion/react-freeze?tab=readme-ov-file#quick-start---using-freeze-directly-react-and-react-native-

[Cal-L]

Since React Navigation v6 removes this option, let's go with the useIsFocus implementation for now since that will still work once we upgrade to v6 - https://reactnavigation.org/docs/upgrading-from-6.x/#the-unmountonblur-option-is-removed-in-favor-of-poptotoponblur-in-bottom-tab-navigator-and-drawer-navigator

[joaoloureirop]

Good point Cal.
I like the high order component proposal presented on the docs

function UnmountOnBlur({ children }) {
  const isFocused = useIsFocused();

  if (!isFocused) {
    return null;
  }

  return children;
}

Then we can use it in the layout prop of the screen

<Tab.Screen
  name={Routes.BROWSER.HOME}
  options={options.browser}
  component={BrowserFlow}
  layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
 />

[Cal-L]

@andrepimenta Let's also check if this breaks deeplink behavior cc @tommasini