From 3895981e64ac2e2f953da2b3397618eebc0ad967 Mon Sep 17 00:00:00 2001
From: Linh Vo <vovanlinh29546@gmail.com>
Date: Tue, 11 Feb 2025 16:10:14 +0700
Subject: [PATCH] fix: useScrollEnabled alway false in the bottom tab

---
 src/components/ScrollView.tsx              |  4 +--
 src/hooks/useScrollEnabled/index.ts        | 32 +++++++++++++++++++---
 src/hooks/useScrollEnabled/types.ts        |  2 +-
 src/pages/Search/SearchTypeMenu.tsx        |  1 +
 src/pages/settings/InitialSettingsPage.tsx |  1 +
 5 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/ScrollView.tsx b/src/components/ScrollView.tsx
index f6ee32223e50..cbf1b99b5c53 100644
--- a/src/components/ScrollView.tsx
+++ b/src/components/ScrollView.tsx
@@ -5,8 +5,8 @@ import {ScrollView as RNScrollView} from 'react-native';
 import type {ScrollViewProps} from 'react-native';
 import useScrollEnabled from '@hooks/useScrollEnabled';
 
-function ScrollView({children, scrollIndicatorInsets, ...props}: ScrollViewProps, ref: ForwardedRef<RNScrollView>) {
-    const scrollEnabled = useScrollEnabled();
+function ScrollView({children, scrollIndicatorInsets, scrollEnabled: RNScrollEnabled, ...props}: ScrollViewProps, ref: ForwardedRef<RNScrollView>) {
+    const scrollEnabled = useScrollEnabled(RNScrollEnabled);
 
     return (
         <RNScrollView
diff --git a/src/hooks/useScrollEnabled/index.ts b/src/hooks/useScrollEnabled/index.ts
index 0ad4671222b0..288e4a1198af 100644
--- a/src/hooks/useScrollEnabled/index.ts
+++ b/src/hooks/useScrollEnabled/index.ts
@@ -1,10 +1,34 @@
 import {useIsFocused} from '@react-navigation/native';
-import usePrevious from '@hooks/usePrevious';
+import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native';
+import {useEffect, useState} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import SCREENS from '@src/SCREENS';
 import type UseScrollEnabled from './types';
 
-const useScrollEnabled: UseScrollEnabled = () => {
+const useScrollEnabled: UseScrollEnabled = (RNScrollEnabled?: boolean) => {
     const isFocused = useIsFocused();
-    const prevIsFocused = usePrevious(isFocused);
-    return !(prevIsFocused && !isFocused);
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+    useEffect(() => {
+        const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => {
+            const routName = Navigation.getRouteNameFromStateEvent(event);
+            if (routName === SCREENS.SEARCH.CENTRAL_PANE || routName === SCREENS.SETTINGS_CENTRAL_PANE || routName === SCREENS.HOME) {
+                setIsScreenFocused(true);
+                return;
+            }
+            setIsScreenFocused(false);
+        };
+        navigationRef.addListener('state', listener);
+        return () => navigationRef.removeListener('state', listener);
+    }, []);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    // On the Search, Settings, Home screen, isFocused returns false, but it is actually focused
+    if (shouldUseNarrowLayout) {
+        return isFocused || isScreenFocused;
+    }
+
+    //  On desktop screen sizes, isFocused always returns false when useIsFocused is called inside the bottom tab. So, we need to manually set scrollEnabled for ScrollView in this case
+    return isFocused || RNScrollEnabled;
 };
 export default useScrollEnabled;
diff --git a/src/hooks/useScrollEnabled/types.ts b/src/hooks/useScrollEnabled/types.ts
index 5bb84e5ef6a8..6429de7a716e 100644
--- a/src/hooks/useScrollEnabled/types.ts
+++ b/src/hooks/useScrollEnabled/types.ts
@@ -1,3 +1,3 @@
-type UseScrollEnabled = () => boolean | undefined;
+type UseScrollEnabled = (scrollEnabled?: boolean) => boolean | undefined;
 
 export default UseScrollEnabled;
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 7c68c9db5979..0a83a7d73520 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -232,6 +232,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
         <ScrollView
             onScroll={onScroll}
             ref={scrollViewRef}
+            scrollEnabled
         >
             <View style={[styles.pb4, styles.mh3, styles.mt3]}>
                 {typeMenuItems.map((item, index) => {
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index e5b269a7be6e..6349888c2d6d 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -439,6 +439,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                 scrollEventThrottle={16}
                 contentContainerStyle={[styles.w100]}
                 showsVerticalScrollIndicator={false}
+                scrollEnabled
             >
                 {accountMenuItems}
                 {workspaceMenuItems}