fix: useScrollEnabled alway false in the bottom tab

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

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;

src/hooks/useScrollEnabled/types.ts

@@ -1,3 +1,3 @@
-type UseScrollEnabled = () => boolean | undefined;
+type UseScrollEnabled = (scrollEnabled?: boolean) => boolean | undefined;
 
 export default UseScrollEnabled;

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) => {

src/pages/settings/InitialSettingsPage.tsx

@@ -439,6 +439,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                 scrollEventThrottle={16}
                 contentContainerStyle={[styles.w100]}
                 showsVerticalScrollIndicator={false}
+                scrollEnabled
             >
                 {accountMenuItems}
                 {workspaceMenuItems}