From a4aea2bcc6e1820d78585ccaaf7c99a3fe26601e Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Fri, 7 Mar 2025 13:46:35 +0100
Subject: [PATCH] Get state from useRootNavigationState

---
 .../Navigation/TopLevelBottomTabBar/index.tsx |  2 +-
 src/components/SidePane/index.tsx             | 24 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/Navigation/TopLevelBottomTabBar/index.tsx b/src/components/Navigation/TopLevelBottomTabBar/index.tsx
index fc9ad86fe328..c75664051697 100644
--- a/src/components/Navigation/TopLevelBottomTabBar/index.tsx
+++ b/src/components/Navigation/TopLevelBottomTabBar/index.tsx
@@ -65,7 +65,7 @@ function TopLevelBottomTabBar({state}: TopLevelBottomTabBarProps) {
                     isTooltipAllowed={isReadyToDisplayBottomBar}
                 />
             </View>
-            <SidePane state={state} />
+            <SidePane />
         </>
     );
 }
diff --git a/src/components/SidePane/index.tsx b/src/components/SidePane/index.tsx
index 62a2b62e94bf..eafd0f9ca69f 100644
--- a/src/components/SidePane/index.tsx
+++ b/src/components/SidePane/index.tsx
@@ -1,6 +1,5 @@
-import type {ParamListBase} from '@react-navigation/native';
 import {findFocusedRoute} from '@react-navigation/native';
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated, View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -8,32 +7,23 @@ import useEnvironment from '@hooks/useEnvironment';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useRootNavigationState from '@hooks/useRootNavigationState';
 import useSidePane from '@hooks/useSidePane';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {triggerSidePane} from '@libs/actions/SidePane';
 import Navigation from '@libs/Navigation/Navigation';
-import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
 import {substituteRouteParameters} from '@libs/SidePaneUtils';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import getHelpContent from './getHelpContent';
 import SidePaneOverlay from './SidePaneOverlay';
 
-type SidePaneProps = {
-    state: PlatformStackNavigationState<ParamListBase>;
-};
-
-function SidePane({state}: SidePaneProps) {
+function SidePane() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isProduction} = useEnvironment();
-
-    const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
-    const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop} = useSidePane();
-    const {paddingTop} = useStyledSafeAreaInsets();
-
-    const {route, isInNarrowPaneModal} = useMemo(() => {
+    const {route, isInNarrowPaneModal} = useRootNavigationState((state) => {
         const params = (findFocusedRoute(state)?.params as Record<string, string>) ?? {};
         const activeRoute = Navigation.getActiveRouteWithoutParams();
 
@@ -41,7 +31,11 @@ function SidePane({state}: SidePaneProps) {
             route: substituteRouteParameters(activeRoute, params),
             isInNarrowPaneModal: state?.routes?.some((r) => r.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR),
         };
-    }, [state]);
+    });
+
+    const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {sidePaneTranslateX, shouldHideSidePane, shouldHideSidePaneBackdrop} = useSidePane();
+    const {paddingTop} = useStyledSafeAreaInsets();
 
     const onClose = useCallback(
         (shouldUpdateNarrow = false) => {