@rific/scroll-view 0.1.0

package/src/__tests__/CustomList.test.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { CustomList } from '../CustomList'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+type MockListProps = {
+  contentInset?: unknown
+  contentOffset?: unknown
+  onScroll?: unknown
+  scrollEventThrottle?: number
+  onMomentumScrollEnd?: unknown
+  onScrollBeginDrag?: unknown
+  onScrollEndDrag?: unknown
+  [key: string]: unknown
+}
+
+const MockList = jest.fn((_props: MockListProps) => null)
+
+describe('CustomList', () => {
+  beforeEach(() => MockList.mockClear())
+
+  it('renders without crashing', () => {
+    render(<CustomList component={MockList} />, { wrapper })
+  })
+
+  it('wires up contentInset and contentOffset', () => {
+    render(<CustomList component={MockList} />, { wrapper })
+    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
+    expect(props).toHaveProperty('contentInset')
+    expect(props).toHaveProperty('contentOffset')
+  })
+
+  it('passes scrollEventThrottle={16}', () => {
+    render(<CustomList component={MockList} />, { wrapper })
+    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
+    expect(props?.scrollEventThrottle).toBe(16)
+  })
+
+  it('passes onScroll handler', () => {
+    render(<CustomList component={MockList} />, { wrapper })
+    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
+    expect(typeof props?.onScroll).toBe('function')
+  })
+
+  it('passes momentum and drag scroll handlers', () => {
+    render(<CustomList component={MockList} />, { wrapper })
+    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
+    expect(typeof props?.onMomentumScrollEnd).toBe('function')
+    expect(typeof props?.onScrollBeginDrag).toBe('function')
+    expect(typeof props?.onScrollEndDrag).toBe('function')
+  })
+
+  it('forwards extra props to the inner component', () => {
+    render(<CustomList component={MockList} testID='my-list' />, { wrapper })
+    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
+    expect(props?.testID).toBe('my-list')
+  })
+})

package/src/__tests__/FlatList.test.tsx

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { FlatList } from '../FlatList'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+describe('FlatList', () => {
+  it('renders without crashing', () => {
+    render(<FlatList data={[]} renderItem={() => null} />, { wrapper })
+  })
+
+  it('renders with data items', () => {
+    render(
+      <FlatList data={['a', 'b', 'c']} renderItem={({ item }) => <>{item}</>} keyExtractor={(item) => item} />,
+      { wrapper }
+    )
+  })
+
+  it('renders horizontal', () => {
+    render(<FlatList data={[]} renderItem={() => null} horizontal />, { wrapper })
+  })
+
+  it('renders horizontal paged list with HorizontalDots for multiple items', () => {
+    render(
+      <FlatList
+        data={['a', 'b', 'c']}
+        renderItem={({ item }) => <>{item}</>}
+        keyExtractor={(item) => item}
+        horizontal
+        pagingEnabled
+      />,
+      { wrapper }
+    )
+  })
+
+  it('renders with pullSearchHeight', () => {
+    render(<FlatList data={[]} renderItem={() => null} pullSearchHeight={60} />, { wrapper })
+  })
+
+  it('renders with renderFilters', () => {
+    render(
+      <FlatList data={[]} renderItem={() => null} renderFilters={<></>} />,
+      { wrapper }
+    )
+  })
+
+  it('renders with keyboardAware', () => {
+    render(<FlatList data={[]} renderItem={() => null} keyboardAware />, { wrapper })
+  })
+})

package/src/__tests__/PullSearch.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { PullSearch, type PullSearchHandle } from '../PullSearch'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+describe('PullSearch', () => {
+  it('renders without crashing', () => {
+    render(<PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
+  })
+
+  it('renders with placeholder', () => {
+    render(
+      <PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} placeholder='Search items...' />,
+      { wrapper }
+    )
+  })
+
+  it('renders with initial value', () => {
+    render(<PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} value='hello' />, { wrapper })
+  })
+
+  it('exposes blur and focus via imperative ref', () => {
+    const ref = React.createRef<PullSearchHandle>()
+    render(<PullSearch ref={ref} onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
+    expect(typeof ref.current?.blur).toBe('function')
+    expect(typeof ref.current?.focus).toBe('function')
+  })
+
+  it('does not throw when blur/focus called with no input mounted', () => {
+    const ref = React.createRef<PullSearchHandle>()
+    render(<PullSearch ref={ref} onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
+    expect(() => ref.current?.blur()).not.toThrow()
+    expect(() => ref.current?.focus()).not.toThrow()
+  })
+})

package/src/__tests__/ScrollView.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { ScrollView } from '../ScrollView'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+describe('ScrollView', () => {
+  it('renders without crashing', () => {
+    render(<ScrollView />, { wrapper })
+  })
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <ScrollView>
+        <></>
+      </ScrollView>,
+      { wrapper }
+    )
+    expect(getByText).toBeDefined()
+  })
+})

package/src/__tests__/ScrollViewHeader.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import { ScrollViewFooter } from '../ScrollViewFooter'
+import { ScrollViewHeader } from '../ScrollViewHeader'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+describe('ScrollViewHeader', () => {
+  it('renders without crashing', () => {
+    render(<ScrollViewHeader />, { wrapper })
+  })
+
+  it('renders with children', () => {
+    render(<ScrollViewHeader><></></ScrollViewHeader>, { wrapper })
+  })
+})
+
+describe('ScrollViewFooter', () => {
+  it('renders without crashing', () => {
+    render(<ScrollViewFooter />, { wrapper })
+  })
+
+  it('renders with children', () => {
+    render(<ScrollViewFooter><></></ScrollViewFooter>, { wrapper })
+  })
+})

package/src/__tests__/ScrollViewProvider.test.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react'
+import React, { useContext } from 'react'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+import { useScrollView } from '../useScrollView'
+
+const ContextReader = ({ onRead }: { onRead: (v: ReturnType<typeof useScrollView>) => void }) => {
+  const value = useScrollView()
+  onRead(value)
+  return null
+}
+
+describe('ScrollViewProvider', () => {
+  it('renders without crashing', () => {
+    render(
+      <ScrollViewProvider>
+        <></>
+      </ScrollViewProvider>
+    )
+  })
+
+  it('provides default context values', () => {
+    let capturedValue: ReturnType<typeof useScrollView> | undefined
+    render(
+      <ScrollViewProvider>
+        <ContextReader onRead={(v) => { capturedValue = v }} />
+      </ScrollViewProvider>
+    )
+    expect(capturedValue?.progress).toBeNull()
+    expect(capturedValue?.progressing).toBe(false)
+  })
+
+  it('accepts headerFixed and footerFixed props', () => {
+    let capturedCtx: { headerFixed: boolean; footerFixed: boolean } | undefined
+    const Reader = () => {
+      const ctx = useContext(ScrollViewContext)
+      capturedCtx = { headerFixed: ctx.headerFixed, footerFixed: ctx.footerFixed }
+      return null
+    }
+    render(
+      <ScrollViewProvider headerFixed footerFixed>
+        <Reader />
+      </ScrollViewProvider>
+    )
+    expect(capturedCtx?.headerFixed).toBe(true)
+    expect(capturedCtx?.footerFixed).toBe(true)
+  })
+
+  it('setProgress updates progress value', () => {
+    let capturedValue: ReturnType<typeof useScrollView> | undefined
+    const { rerender } = render(
+      <ScrollViewProvider>
+        <ContextReader onRead={(v) => { capturedValue = v }} />
+      </ScrollViewProvider>
+    )
+    capturedValue?.setProgress(0.5)
+    rerender(
+      <ScrollViewProvider>
+        <ContextReader onRead={(v) => { capturedValue = v }} />
+      </ScrollViewProvider>
+    )
+    expect(capturedValue?.progress).toBe(0.5)
+  })
+})

package/src/__tests__/SectionList.test.tsx

@@ -0,0 +1,88 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { SectionList as RNSectionList } from 'react-native'
+
+import { SectionList } from '../SectionList'
+import { ScrollViewProvider } from '../ScrollViewProvider'
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
+
+type Section = { title: string; data: string[] }
+const sections: Section[] = [
+  { title: 'Fruits', data: ['Apple', 'Banana'] },
+  { title: 'Veggies', data: ['Carrot'] }
+]
+
+describe('SectionList', () => {
+  beforeEach(() => {
+    ;(RNSectionList as jest.Mock).mockClear()
+  })
+
+  it('renders without crashing', () => {
+    render(
+      <SectionList sections={sections} renderItem={({ item }) => <>{item}</>} keyExtractor={(item) => item} />,
+      { wrapper }
+    )
+  })
+
+  it('renders with renderSectionHeader', () => {
+    render(
+      <SectionList
+        sections={sections}
+        renderItem={({ item }) => <>{item}</>}
+        keyExtractor={(item) => item}
+        renderSectionHeader={({ section }) => <>{(section as Section).title}</>}
+      />,
+      { wrapper }
+    )
+  })
+
+  it('disables native stickySectionHeadersEnabled when custom renderSectionHeader is provided', () => {
+    render(
+      <SectionList
+        sections={sections}
+        renderItem={({ item }) => <>{item}</>}
+        keyExtractor={(item) => item}
+        renderSectionHeader={({ section }) => <>{(section as Section).title}</>}
+      />,
+      { wrapper }
+    )
+    const calls = (RNSectionList as jest.Mock).mock.calls
+    const lastProps = calls[calls.length - 1]?.[0]
+    expect(lastProps?.stickySectionHeadersEnabled).toBe(false)
+  })
+
+  it('keeps native sticky when no renderSectionHeader provided', () => {
+    render(
+      <SectionList sections={sections} renderItem={({ item }) => <>{item}</>} keyExtractor={(item) => item} />,
+      { wrapper }
+    )
+    const calls = (RNSectionList as jest.Mock).mock.calls
+    const lastProps = calls[calls.length - 1]?.[0]
+    expect(lastProps?.stickySectionHeadersEnabled).toBe(false)
+  })
+
+  it('renders with pullSearchHeight', () => {
+    render(
+      <SectionList
+        sections={sections}
+        renderItem={({ item }) => <>{item}</>}
+        keyExtractor={(item) => item}
+        pullSearchHeight={60}
+      />,
+      { wrapper }
+    )
+  })
+
+  it('renders with renderFilters', () => {
+    render(
+      <SectionList
+        sections={sections}
+        renderItem={({ item }) => <>{item}</>}
+        keyExtractor={(item) => item}
+        renderFilters={<></>}
+      />,
+      { wrapper }
+    )
+  })
+})

package/src/index.ts

@@ -0,0 +1,26 @@
+export type { CustomListProps } from './CustomList'
+export { CustomList } from './CustomList'
+export type { FlatListProps } from './FlatList'
+export { FlatList } from './FlatList'
+export type { PullSearchHandle, PullSearchProps } from './PullSearch'
+export { PullSearch } from './PullSearch'
+export { scrollViewActions, scrollViewReducer } from './redux/scrollViewSlice'
+export type { ScrollViewProps } from './ScrollView'
+export { ScrollView } from './ScrollView'
+export type { ScrollViewContextType } from './ScrollViewContext'
+export { ScrollViewContext } from './ScrollViewContext'
+export type { ScrollViewFooterProps } from './ScrollViewFooter'
+export { ScrollViewFooter } from './ScrollViewFooter'
+export type { ScrollViewHeaderProps } from './ScrollViewHeader'
+export { ScrollViewHeader } from './ScrollViewHeader'
+export type { ScrollViewProviderProps } from './ScrollViewProvider'
+export { ScrollViewProvider } from './ScrollViewProvider'
+export type { ScrollViewSettings, ScrollViewSettingsContextType } from './ScrollViewSettingsContext'
+export { defaultScrollViewSettings, ScrollViewSettingsContext } from './ScrollViewSettingsContext'
+export type { ScrollViewSettingsProviderProps } from './ScrollViewSettingsProvider'
+export { ScrollViewSettingsProvider } from './ScrollViewSettingsProvider'
+export type { SectionListProps } from './SectionList'
+export { SectionList } from './SectionList'
+export { useKeyboardInset } from './useKeyboardInset'
+export { useScrollView } from './useScrollView'
+export { useScrollViewSettings } from './useScrollViewSettings'

package/src/internal/FAB.tsx

@@ -0,0 +1,6 @@
+import { FAB as AutoPaperFAB } from '@rific/auto-paper'
+import { FABProps } from 'react-native-paper'
+
+type InternalFABProps = Pick<FABProps, 'icon' | 'onPress' | 'style'>
+
+export const FAB = (props: InternalFABProps) => <AutoPaperFAB animated={false} label='' size='small' {...props} />

package/src/internal/HorizontalDots.tsx

@@ -0,0 +1,99 @@
+import { BlurView } from '@rific/auto-paper'
+import { useContext } from 'react'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useTheme } from 'react-native-paper'
+import type { SharedValue } from 'react-native-reanimated'
+import Animated, { interpolateColor, useAnimatedStyle } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+
+const DOT_FULL = 8
+const DOT_SMALL = 3
+const DOT_GAP = 6
+const DOT_STEP = DOT_FULL + DOT_GAP
+const CLIP_COUNT = 5
+const CLIP_WIDTH = CLIP_COUNT * DOT_STEP - DOT_GAP
+const PILL_PAD_H = 10
+const PILL_PAD_V = 6
+const PILL_HEIGHT = DOT_FULL + PILL_PAD_V * 2
+const PILL_RADIUS = PILL_HEIGHT / 2
+const PILL_WIDTH = CLIP_WIDTH + PILL_PAD_H * 2
+
+type DotProps = {
+  activeColor: string
+  index: number
+  inactiveColor: string
+  pageWidth: number
+  scrollPosition: SharedValue<number>
+}
+
+const Dot = ({ activeColor, index, inactiveColor, pageWidth, scrollPosition }: DotProps) => {
+  const circleStyle = useAnimatedStyle(() => {
+    const page = scrollPosition.value / pageWidth
+    const distance = Math.abs(index - page)
+    const t = Math.max(0, Math.min((distance - 0.5) / 2, 1))
+    const size = DOT_FULL + (DOT_SMALL - DOT_FULL) * t
+    const backgroundColor = interpolateColor(t, [0, 1], [activeColor, inactiveColor])
+    return { backgroundColor, borderRadius: size / 2, height: size, width: size }
+  })
+  return (
+    <View style={styles.dotContainer}>
+      <Animated.View style={circleStyle} />
+    </View>
+  )
+}
+
+type Props = { total: number }
+
+export const HorizontalDots = ({ total }: Props) => {
+  const { blur, footerHeightShared, scrollPosition } = useContext(ScrollViewContext)
+  const { width } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
+  const theme = useTheme()
+  const insetsBottom = insets.bottom
+
+  const activeColor = theme.colors.primary
+  const inactiveColor = theme.colors.outlineVariant
+
+  const pillContainerStyle = useAnimatedStyle(() => ({
+    bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
+  }))
+
+  const rowStyle = useAnimatedStyle(() => {
+    const page = scrollPosition.value / width
+    const maxOffset = Math.max(0, (total - CLIP_COUNT) * DOT_STEP)
+    const offset = Math.max(0, Math.min((page - (CLIP_COUNT - 1) / 2) * DOT_STEP, maxOffset))
+    return { transform: [{ translateX: -offset }] }
+  })
+
+  return (
+    <Animated.View pointerEvents='none' style={[styles.pillContainer, pillContainerStyle]}>
+      <View style={styles.pill}>
+        <BlurView blur={blur} style={StyleSheet.absoluteFill} />
+        <View style={styles.dotsClip}>
+          <Animated.View style={[styles.dotsRow, rowStyle]}>
+            {Array.from({ length: total }).map((_, i) => (
+              <Dot key={i} activeColor={activeColor} index={i} inactiveColor={inactiveColor} pageWidth={width} scrollPosition={scrollPosition} />
+            ))}
+          </Animated.View>
+        </View>
+      </View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  dotContainer: { alignItems: 'center', height: DOT_FULL, justifyContent: 'center', width: DOT_FULL },
+  dotsClip: { overflow: 'hidden', width: CLIP_WIDTH },
+  dotsRow: { flexDirection: 'row', gap: DOT_GAP },
+  pill: {
+    alignItems: 'center',
+    borderRadius: PILL_RADIUS,
+    height: PILL_HEIGHT,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: PILL_WIDTH
+  },
+  pillContainer: { alignItems: 'center', left: 0, position: 'absolute', right: 0, zIndex: 3 }
+})

package/src/internal/RefreshControl.tsx

@@ -0,0 +1,5 @@
+import { RefreshControl as RNRefreshControl, type RefreshControlProps } from 'react-native'
+
+export type { RefreshControlProps }
+
+export const RefreshControl = (props: Partial<RefreshControlProps>) => <RNRefreshControl refreshing={false} {...props} />

package/src/internal/ScrollViewChip.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet, type ViewStyle } from 'react-native'
+import { Chip } from 'react-native-paper'
+import Animated, { type AnimatedStyle } from 'react-native-reanimated'
+
+type Props = {
+  isHorizontal?: boolean
+  onPress: () => void
+  style: AnimatedStyle<ViewStyle>
+}
+
+export const ScrollViewChip = ({ isHorizontal, onPress, style }: Props) => (
+  <Animated.View style={[styles.chip, style]}>
+    <Chip compact icon={isHorizontal ? 'chevron-left' : 'chevron-up'} onPress={onPress} style={styles.chipInner}>
+      {isHorizontal ? 'Start' : 'Top'}
+    </Chip>
+  </Animated.View>
+)
+
+const styles = StyleSheet.create({
+  chip: { alignItems: 'center', left: 0, position: 'absolute', right: 0, zIndex: 3 },
+  chipInner: { elevation: 2, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 }
+})

package/src/internal/useScrollHandler.ts

@@ -0,0 +1,101 @@
+import { useContext } from 'react'
+import type { SharedValue } from 'react-native-reanimated'
+import { runOnJS, useAnimatedScrollHandler, useSharedValue, withTiming } from 'react-native-reanimated'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+
+type UseScrollHandlerOptions = {
+  chipHidden: SharedValue<number>
+  footerFixed: boolean
+  headerFixed: boolean
+  isHorizontal?: boolean
+  onPullSearchZoneEnter?: () => void
+}
+
+export function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }: UseScrollHandlerOptions) {
+  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const snapUpAccum = useSharedValue(0)
+  const fromBottomBounce = useSharedValue(false)
+  const isMomentum = useSharedValue(false)
+  const momentumPullSearchFired = useSharedValue(false)
+
+  return useAnimatedScrollHandler(
+    {
+      onScroll: ({ contentOffset: { x, y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
+        'worklet'
+        if (isHorizontal) {
+          scrollPosition.value = x
+          chipHidden.value = x < 100 ? 1 : 0
+          return
+        }
+        const delta = y - scrollPosition.value
+        scrollPosition.value = y
+        chipHidden.value = y < 100 ? 1 : 0
+        const maxScroll = contentHeight - layoutHeight
+        if (maxScroll > 0 && y >= maxScroll) {
+          fromBottomBounce.value = true
+          snapUpAccum.value = 0
+        } else if (fromBottomBounce.value) {
+          fromBottomBounce.value = false
+        }
+        if (isMomentum.value && pullSearchHeightShared.value > 0 && !momentumPullSearchFired.value) {
+          const hideY = -headerHeightShared.value + pullSearchHeightShared.value
+          if (y < hideY) {
+            momentumPullSearchFired.value = true
+            if (onPullSearchZoneEnter) runOnJS(onPullSearchZoneEnter)()
+          }
+        }
+        const snapHeader = snapBackHeaderShared.value && !headerFixed
+        const snapFooter = snapBackFooterShared.value && !footerFixed
+        if (snapHeader || snapFooter) {
+          if (y <= -headerHeightShared.value) {
+            snapUpAccum.value = 0
+            if (snapHeader) headerOffset.value = 0
+            if (snapFooter) footerOffset.value = 0
+          } else if (delta > 0) {
+            snapUpAccum.value = 0
+            if (y >= -headerHeightShared.value + pullSearchHeightShared.value) {
+              if (snapHeader) headerOffset.value = Math.max(-headerHeightShared.value, Math.min(0, headerOffset.value - delta))
+              if (snapFooter) footerOffset.value = Math.max(0, Math.min(footerHeightShared.value, footerOffset.value + delta))
+            }
+          } else if (delta < 0 && !fromBottomBounce.value) {
+            if (y >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.value -= delta
+            if (snapUpAccum.value >= 10) {
+              snapUpAccum.value = 999
+              if (snapHeader) headerOffset.value = withTiming(0, { duration: 200 })
+              if (snapFooter) footerOffset.value = withTiming(0, { duration: 200 })
+            }
+          }
+        }
+      },
+      onBeginDrag: () => {
+        'worklet'
+        isMomentum.value = false
+        momentumPullSearchFired.value = false
+        fromBottomBounce.value = false
+        snapUpAccum.value = 0
+      },
+      onMomentumBegin: () => {
+        'worklet'
+        isMomentum.value = true
+        momentumPullSearchFired.value = false
+      },
+      onEndDrag: ({ contentOffset: { y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
+        'worklet'
+        if (isHorizontal) return
+        if (y >= contentHeight - layoutHeight - 10) {
+          fromBottomBounce.value = true
+          snapUpAccum.value = 0
+        }
+      },
+      onMomentumEnd: () => {
+        'worklet'
+        isMomentum.value = false
+        momentumPullSearchFired.value = false
+        fromBottomBounce.value = false
+        snapUpAccum.value = 0
+      }
+    },
+    [headerFixed, footerFixed, isHorizontal, onPullSearchZoneEnter]
+  )
+}