Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+7 −2
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e4841b4
enable freeze
andrepimenta May 8, 2025
be1c6b4
Render only active tab on browser
andrepimenta May 8, 2025
d47b68d
unmount Browser when unfocused
andrepimenta May 8, 2025
988cbe0
Unmount Transactions when unfocused
andrepimenta May 8, 2025
642b3ab
Fix linting issue
andrepimenta May 8, 2025
1b25f12
Fix useCallback issue
andrepimenta May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/components/Nav/Main/MainNavigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,7 @@ const HomeTabs = () => {
);
},
rootScreenName: Routes.BROWSER_VIEW,
unmountOnBlur: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>}
 />

},
activity: {
tabBarIconKey: TabBarIconKey.Activity,
Expand All @@ -519,6 +520,7 @@ const HomeTabs = () => {
);
},
rootScreenName: Routes.TRANSACTIONS_VIEW,
unmountOnBlur: true,
},
settings: {
tabBarIconKey: TabBarIconKey.Setting,
Expand Down
4 changes: 2 additions & 2 deletions app/components/Views/Browser/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ export const Browser = (props) => {
return null;
};

const renderBrowserTabWindows = useCallback(() => tabs.filter((tab) => !tab.isArchived).map((tab) => (
const renderBrowserTabWindows = useCallback(() => tabs.filter((tab) => !tab.isArchived).map((tab) => activeTabId === tab.id ? (
<BrowserTab
id={tab.id}
key={`tab_${tab.id}`}
Expand All @@ -374,7 +374,7 @@ export const Browser = (props) => {
isInTabsView={route.params?.showTabs}
homePageUrl={homePageUrl()}
/>
)), [tabs, route.params?.showTabs, newTab, homePageUrl, updateTabInfo, showTabs]);
) : null), [tabs, route.params?.showTabs, newTab, homePageUrl, updateTabInfo, showTabs, activeTabId]);

return (
<View
Expand Down
3 changes: 3 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import './shim.js';

import { enableFreeze } from 'react-native-screens';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

enableFreeze(true);

// Needed to polyfill random number generation.
import 'react-native-get-random-values';
import '@walletconnect/react-native-compat';
Expand Down
Loading