Show tabs when swiping feeds (#1856)

bluesky-social · Nov 9, 2023 · c627a76 · c627a76
1 parent 7a55ca6
commit c627a76
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx
@@ -26,6 +26,9 @@ interface Props {
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
   onPageSelecting?: (index: number) => void
+  onPageScrollStateChanged?: (
+    scrollState: 'idle' | 'dragging' | 'settling',
+  ) => void
   testID?: string
 }
 export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
@@ -35,6 +38,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
       tabBarPosition = 'top',
       initialPage = 0,
       renderTabBar,
+      onPageScrollStateChanged,
       onPageSelected,
       onPageSelecting,
       testID,
@@ -97,11 +101,12 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
       [lastOffset, lastDirection, onPageSelecting],
     )
 
-    const onPageScrollStateChanged = React.useCallback(
+    const handlePageScrollStateChanged = React.useCallback(
       (e: PageScrollStateChangedNativeEvent) => {
         scrollState.current = e.nativeEvent.pageScrollState
+        onPageScrollStateChanged?.(e.nativeEvent.pageScrollState)
       },
-      [scrollState],
+      [scrollState, onPageScrollStateChanged],
     )
 
     const onTabBarSelect = React.useCallback(
@@ -123,7 +128,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
           ref={pagerView}
           style={s.flex1}
           initialPage={initialPage}
-          onPageScrollStateChanged={onPageScrollStateChanged}
+          onPageScrollStateChanged={handlePageScrollStateChanged}
           onPageSelected={onPageSelectedInner}
           onPageScroll={onPageScroll}>
           {children}

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
@@ -85,6 +85,15 @@ export const HomeScreen = withAuthRequired(
       store.emitScreenSoftReset()
     }, [store])
 
+    const onPageScrollStateChanged = React.useCallback(
+      (state: 'idle' | 'dragging' | 'settling') => {
+        if (state === 'dragging') {
+          setMinimalShellMode(false)
+        }
+      },
+      [setMinimalShellMode],
+    )
+
     const renderTabBar = React.useCallback(
       (props: RenderTabBarFnProps) => {
         return (
@@ -113,6 +122,7 @@ export const HomeScreen = withAuthRequired(
         ref={pagerRef}
         testID="homeScreen"
         onPageSelected={onPageSelected}
+        onPageScrollStateChanged={onPageScrollStateChanged}
         renderTabBar={renderTabBar}
         tabBarPosition="top">
         <FeedPage