Merge branch 'custom-algos' of github.com:bluesky-social/social-app into custom-algos

3 files changed, 19 insertions, 3 deletions

diff --git a/src/view/com/pager/DraggableScrollView.tsx b/src/view/com/pager/DraggableScrollView.tsx
new file mode 100644
index 000000000..4b7396eaa
--- /dev/null
+++ b/src/view/com/pager/DraggableScrollView.tsx
@@ -0,0 +1,15 @@
+import {useDraggableScroll} from 'lib/hooks/useDraggableScrollView'
+import React, {ComponentProps} from 'react'
+import {ScrollView} from 'react-native'
+
+export const DraggableScrollView = React.forwardRef<
+  ScrollView,
+  ComponentProps<typeof ScrollView>
+>(function DraggableScrollView(props, ref) {
+  const {refs} = useDraggableScroll<ScrollView>({
+    outerRef: ref,
+    cursor: 'grab', // optional, default
+  })
+
+  return <ScrollView ref={refs} horizontal {...props} />
+})
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index fc04c3b2c..b51db1741 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -53,8 +53,8 @@ const FeedsTabBarDesktop = observer(
       // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
       <Animated.View style={[pal.view, styles.tabBar, transform]}>
         <TabBar
-          {...props}
           key={items.join(',')}
+          {...props}
           items={items}
           indicatorColor={pal.colors.link}
         />
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 485219730..cebf58b48 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -11,6 +11,7 @@ import {Text} from '../util/text/Text'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isDesktopWeb} from 'platform/detection'
+import {DraggableScrollView} from './DraggableScrollView'
 
 export interface TabBarProps {
   testID?: string
@@ -75,7 +76,7 @@ export function TabBar({
 
   return (
     <View testID={testID} style={[pal.view, styles.outer]}>
-      <ScrollView
+      <DraggableScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         ref={scrollElRef}
@@ -98,7 +99,7 @@ export function TabBar({
             </PressableWithHover>
           )
         })}
-      </ScrollView>
+      </DraggableScrollView>
     </View>
   )
 }