@rific/scroll-view 0.1.0

package/src/ScrollViewHeader.tsx

@@ -0,0 +1,159 @@
+import { BlurView } from '@rific/auto-paper'
+import { type ReactNode, useContext } from 'react'
+import { type LayoutChangeEvent, StyleSheet, Text, View, type ViewStyle } from 'react-native'
+import { Appbar, ProgressBar, Surface, useTheme } from 'react-native-paper'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { ScrollViewContext } from './ScrollViewContext'
+import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
+
+export type ScrollViewHeaderProps = {
+  actionSize?: number
+  actionStyle?: ViewStyle
+  backAction?: () => void
+  backActionFixed?: boolean
+  caption?: string
+  centerContent?: ReactNode
+  children?: ReactNode | ReactNode[]
+  iconSize?: number
+  style?: ViewStyle
+  title?: string
+  topInset?: boolean
+  trailingAction?: ReactNode
+  trailingActionFixed?: boolean
+}
+
+type ActionBgProps = { blur: boolean; style?: ViewStyle }
+
+const ActionBg = ({ blur, style }: ActionBgProps) =>
+  blur ? (
+    <View style={[StyleSheet.absoluteFill, styles.actionBg, style]}>
+      <BlurView blur style={StyleSheet.absoluteFill} />
+    </View>
+  ) : (
+    <View style={[StyleSheet.absoluteFill, styles.actionBg, style]} pointerEvents='none'>
+      <Surface style={StyleSheet.absoluteFill} elevation={1}>
+        {null}
+      </Surface>
+    </View>
+  )
+
+export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }: ScrollViewHeaderProps) => {
+  const { blur, headerHeight, headerFixed, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const { settings } = useContext(ScrollViewSettingsContext)
+  const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed
+  const insets = useSafeAreaInsets()
+  const theme = useTheme()
+  const top = topInset ? insets.top : 0
+  const handleLayout = ({
+    nativeEvent: {
+      layout: { height }
+    }
+  }: LayoutChangeEvent) => {
+    if (headerHeight !== height) setHeaderHeight(height)
+  }
+  const translateStyle = useAnimatedStyle(() => {
+    if (headerFixed) return { transform: [{ translateY: 0 }] }
+    if (snapBackHeaderShared.value) return { transform: [{ translateY: headerOffset.value }] }
+    const effective = scrollPosition.value + headerHeight - pullSearchHeightShared.value
+    if (effective <= 0) return { transform: [{ translateY: 0 }] }
+    return { transform: [{ translateY: -effective }] }
+  }, [headerFixed, headerHeight])
+  const blurStyle = useAnimatedStyle(() => {
+    if (!headerHeight) return { height: 0 }
+    if (headerFixed) return { height: headerHeight }
+    const translateY = snapBackHeaderShared.value ? headerOffset.value : -Math.max(0, scrollPosition.value + headerHeight - pullSearchHeightShared.value)
+    return { height: Math.max(headerHeight + translateY, top) }
+  }, [headerFixed, headerHeight, top])
+  const progressStyle = useAnimatedStyle(() => {
+    if (headerFixed) return { top: headerHeight }
+    const slide = snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + headerHeight - pullSearchHeightShared.value)
+    return { top: Math.max(headerHeight - slide, top) }
+  }, [headerFixed, headerHeight, top])
+  const actionMargin = 4
+  const contentMinHeight = actionSize + 2 * actionMargin
+  const actionTop = top + actionMargin
+  const buttonStyle = { borderRadius: actionSize, height: actionSize, margin: 0, width: actionSize }
+  const actionShadow = { borderRadius: actionSize / 2, elevation: 2, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 }
+  const leadingStyle = { alignItems: 'center' as const, height: actionSize, justifyContent: 'center' as const, left: actionMargin, position: 'absolute' as const, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow }
+  const trailingStyle = { alignItems: 'center' as const, height: actionSize, justifyContent: 'center' as const, position: 'absolute' as const, right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow }
+  return (
+    <>
+      <Animated.View pointerEvents='none' style={[styles.blur, blurStyle]}>
+        {headerHeight > 0 && <BlurView blur={blur} style={[styles.blurInner, { height: headerHeight }]} />}
+      </Animated.View>
+      <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[headerHeight === 0 ? styles.headerInit : styles.header, translateStyle]}>
+        <View style={[{ paddingTop: top }, style]}>
+          <View style={[styles.content, { minHeight: contentMinHeight }]}>
+            <View style={styles.side} />
+            <View style={styles.spacer} />
+            <View style={styles.side}>{children}</View>
+            {(centerContent || title || caption) && (
+              <View style={[StyleSheet.absoluteFill, styles.titleContainer]} pointerEvents={centerContent ? 'box-none' : 'none'}>
+                {centerContent ?? (
+                  <>
+                    {title && (
+                      <Text numberOfLines={1} style={[styles.title, { color: theme.colors.onSurface }]}>
+                        {title}
+                      </Text>
+                    )}
+                    {caption && (
+                      <Text numberOfLines={1} style={[styles.caption, { color: theme.colors.onSurfaceVariant }]}>
+                        {caption}
+                      </Text>
+                    )}
+                  </>
+                )}
+              </View>
+            )}
+          </View>
+        </View>
+        {!blur && <View style={[styles.divider, { backgroundColor: theme.colors.outlineVariant }]} />}
+      </Animated.View>
+      <Animated.View pointerEvents='none' style={[styles.progress, progressStyle]}>
+        <ProgressBar indeterminate={progress === null} visible={progressing} progress={progress ?? undefined} />
+      </Animated.View>
+      {backAction &&
+        (effectiveBackActionFixed ? (
+          <Animated.View style={leadingStyle}>
+            <ActionBg blur={blur} style={actionStyle} />
+            <Appbar.BackAction onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+          </Animated.View>
+        ) : (
+          <Animated.View style={[leadingStyle, translateStyle]}>
+            <ActionBg blur={blur} style={actionStyle} />
+            <Appbar.BackAction onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+          </Animated.View>
+        ))}
+      {trailingAction &&
+        (trailingActionFixed ? (
+          <View style={trailingStyle}>
+            <ActionBg blur={blur} style={actionStyle} />
+            {trailingAction}
+          </View>
+        ) : (
+          <Animated.View style={[trailingStyle, translateStyle]}>
+            <ActionBg blur={blur} style={actionStyle} />
+            {trailingAction}
+          </Animated.View>
+        ))}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionBg: { borderRadius: 100, overflow: 'hidden' },
+  divider: { bottom: 0, height: StyleSheet.hairlineWidth, left: 0, position: 'absolute', right: 0 },
+  caption: { fontSize: 12, fontWeight: '400', textAlign: 'center' },
+  content: { alignItems: 'center', flexDirection: 'row', width: '100%' },
+  blur: { left: 0, overflow: 'hidden', position: 'absolute', right: 0, top: 0, zIndex: 2 },
+  blurInner: { left: 0, position: 'absolute', right: 0, top: 0 },
+  header: { left: 0, overflow: 'hidden', position: 'absolute', right: 0, top: 0, zIndex: 2 },
+  headerInit: { left: 0, overflow: 'hidden', right: 0, zIndex: 2 },
+  progress: { left: 0, position: 'absolute', right: 0, zIndex: 3 },
+  side: { alignItems: 'center', flexDirection: 'row' },
+  spacer: { flex: 1 },
+  title: { fontSize: 20, fontWeight: '400', textAlign: 'center' },
+  titleContainer: { alignItems: 'center', justifyContent: 'center' }
+})

package/src/ScrollViewProvider.tsx

@@ -0,0 +1,62 @@
+import { useBlur } from '@rific/auto-paper'
+import { type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { Dimensions } from 'react-native'
+import { useSharedValue } from 'react-native-reanimated'
+
+import { ScrollViewContext } from './ScrollViewContext'
+import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
+
+export type ScrollViewProviderProps = {
+  blur?: boolean
+  children: ReactNode
+  fixed?: boolean
+  footerFixed?: boolean
+  headerFixed?: boolean
+  snapBack?: boolean
+  snapBackFooter?: boolean
+  snapBackHeader?: boolean
+  tabBarHeight?: number
+}
+
+export const ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 60 }: ScrollViewProviderProps) => {
+  const { settings } = useContext(ScrollViewSettingsContext)
+  const effectiveBlur = useBlur(blur)
+  const effectiveSnapBack = snapBack ?? settings.snapBack
+  const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader
+  const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter
+  const [headerHeight, setHeaderHeightState] = useState(0)
+  const [footerHeight, setFooterHeightState] = useState(0)
+  const [progress, setProgress] = useState<number | null>(null)
+  const [progressing, setProgressing] = useState(false)
+  const scrollPosition = useSharedValue(0)
+  const headerHeightShared = useSharedValue(0)
+  const footerHeightShared = useSharedValue(0)
+  const headerOffset = useSharedValue(0)
+  const footerOffset = useSharedValue(0)
+  const pullSearchHeightShared = useSharedValue(0)
+  const snapBackHeaderShared = useSharedValue(false)
+  const snapBackFooterShared = useSharedValue(false)
+  useEffect(() => {
+    snapBackHeaderShared.value = effectiveSnapBackHeader ?? effectiveSnapBack
+    snapBackFooterShared.value = effectiveSnapBackFooter ?? effectiveSnapBack
+  }, [effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared])
+  const setHeaderHeight = useCallback(
+    (h: number) => {
+      setHeaderHeightState(h)
+      headerHeightShared.value = h
+    },
+    [headerHeightShared]
+  )
+  const setFooterHeight = useCallback(
+    (h: number) => {
+      setFooterHeightState(h)
+      footerHeightShared.value = h
+    },
+    [footerHeightShared]
+  )
+  const scrollHeight = useMemo(() => Dimensions.get('window').height - headerHeight - footerHeight, [headerHeight, footerHeight])
+  const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed)
+  const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed)
+  const value = useMemo(() => ({ blur: effectiveBlur, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight])
+  return <ScrollViewContext.Provider value={value}>{children}</ScrollViewContext.Provider>
+}

package/src/ScrollViewSettingsContext.ts

@@ -0,0 +1,27 @@
+import { createContext } from 'react'
+
+export type ScrollViewSettings = {
+  backActionFixed: boolean
+  footerFixed: boolean
+  headerFixed: boolean
+  snapBack: boolean
+  snapBackFooter?: boolean
+  snapBackHeader?: boolean
+}
+
+export const defaultScrollViewSettings: ScrollViewSettings = {
+  backActionFixed: true,
+  footerFixed: false,
+  headerFixed: false,
+  snapBack: false
+}
+
+export type ScrollViewSettingsContextType = {
+  settings: ScrollViewSettings
+  set: (patch: Partial<ScrollViewSettings>) => void
+}
+
+export const ScrollViewSettingsContext = createContext<ScrollViewSettingsContextType>({
+  settings: defaultScrollViewSettings,
+  set: () => {}
+})

package/src/ScrollViewSettingsProvider.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode, useCallback, useMemo, useState } from 'react'
+
+import { defaultScrollViewSettings, type ScrollViewSettings, ScrollViewSettingsContext } from './ScrollViewSettingsContext'
+
+export type ScrollViewSettingsProviderProps = {
+  children: ReactNode
+  onChange?: (settings: ScrollViewSettings) => void
+  value?: Partial<ScrollViewSettings>
+}
+
+export const ScrollViewSettingsProvider = ({ children, onChange, value }: ScrollViewSettingsProviderProps) => {
+  const [settings, setSettings] = useState<ScrollViewSettings>(() => ({
+    ...defaultScrollViewSettings,
+    ...value
+  }))
+
+  const set = useCallback(
+    (patch: Partial<ScrollViewSettings>) => {
+      setSettings((prev) => {
+        const next = { ...prev, ...patch }
+        onChange?.(next)
+        return next
+      })
+    },
+    [onChange]
+  )
+
+  const ctx = useMemo(() => ({ settings, set }), [settings, set])
+
+  return <ScrollViewSettingsContext.Provider value={ctx}>{children}</ScrollViewSettingsContext.Provider>
+}

package/src/SectionList.tsx

@@ -0,0 +1,195 @@
+import { memo, type ReactNode, type RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { Dimensions, type NativeScrollEvent, type NativeSyntheticEvent, SectionList as RNSectionList, type SectionListProps as RNSectionListProps, View } from 'react-native'
+import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
+import Animated, { createAnimatedComponent } from 'react-native-reanimated'
+
+import { RefreshControl } from './internal/RefreshControl'
+import { ScrollViewChip } from './internal/ScrollViewChip'
+import { useScrollHandler } from './internal/useScrollHandler'
+import { useScrollList } from './internal/useScrollList'
+import { useStickyHeaders } from './internal/useStickyHeaders'
+import { useScrollInit } from './useScrollInit'
+
+const AnimatedSectionList = createAnimatedComponent(RNSectionList) as unknown as typeof RNSectionList
+
+export type SectionListProps<ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }> = Omit<RNSectionListProps<ItemT, SectionT>, 'horizontal'> & {
+  renderFilters?: ReactNode
+  footerFixed?: boolean
+  gesture?: GestureType
+  headerFixed?: boolean
+  keyboardAware?: boolean
+  onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  pullSearchHeight?: number
+  ref?: RefObject<RNSectionList<ItemT, SectionT> | null>
+}
+
+const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }>({ contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }: SectionListProps<ItemT, SectionT>) => {
+  const scrollView = useRef<RNSectionList<ItemT, SectionT>>(null)
+
+  const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props as RNSectionListProps<ItemT, SectionT>
+
+  const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style })
+
+  const usesCustomSticky = stickySectionHeadersEnabled && renderSectionHeader != null
+  const { activeIndex, clipStyle, measureHeader, overlayStyle, resetPositions } = useStickyHeaders(headerFixed, usesCustomSticky)
+
+  // useLayoutEffect (not useEffect) so the reset runs before native layout fires onLayout
+  // for the newly mounted section headers — otherwise the reset would clear correct positions.
+  useLayoutEffect(() => {
+    if (usesCustomSticky) resetPositions(sections.length)
+  }, [sections, usesCustomSticky, resetPositions, headerHeight])
+
+  // Per-section view refs so we can call view.measure() for window-coordinate Y.
+  const sectionViewRefs = useRef<Map<number, View | null>>(new Map())
+
+  const wrappedRenderSectionHeader = useMemo(() => {
+    if (!usesCustomSticky) return renderSectionHeader ?? undefined
+    return (info: { section: SectionT }) => {
+      const idx = sections.findIndex((s) => s === info.section)
+      return (
+        <View
+          ref={(el: View | null) => {
+            sectionViewRefs.current.set(idx, el)
+          }}
+          onLayout={() => {
+            const el = sectionViewRefs.current.get(idx)
+            el?.measure((_x, _y, _w, h, _px, pageY) => {
+              // Guard against stale callbacks from unmounted views (e.g. after key remount)
+              if (idx >= 0 && sectionViewRefs.current.get(idx) === el) measureHeader(idx, pageY, h)
+            })
+          }}
+        >
+          {renderSectionHeader(info)}
+        </View>
+      )
+    }
+  }, [usesCustomSticky, renderSectionHeader, sections, measureHeader])
+
+  const scrollTo = useCallback((offset: number, animated: boolean) => {
+    scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated })
+  }, [])
+
+  const {
+    activeListHeader: pullSearchHeader,
+    handleMomentumScrollEnd,
+    handleScrollBeginDrag,
+    handleScrollEndDrag,
+    hiddenHeader,
+    pullSearchMinHeight
+  } = useScrollInit({
+    listHeaderComponent: externalListHeaderComponent,
+    onMomentumScrollEnd: externalMomentumScrollEnd,
+    onScrollBeginDrag: externalScrollBeginDrag,
+    onScrollEndDrag: externalScrollEndDrag,
+    pullSearchHeight,
+    scrollTo
+  })
+
+  const activeListHeader = useMemo(() => {
+    if (!renderFilters) return pullSearchHeader
+    const Inner = pullSearchHeader
+    return () => (
+      <>
+        {Inner ? typeof Inner === 'function' ? <Inner /> : Inner : null}
+        {renderFilters}
+      </>
+    )
+  }, [pullSearchHeader, renderFilters])
+
+  // When PullSearch is first added to the list, onLayout doesn't re-fire for already-visible
+  // section headers (their frame relative to their direct parent is unchanged). Re-measure them
+  // once after the layout settles so positions account for the PullSearch height offset.
+  const pullSearchSettled = useRef(false)
+  useEffect(() => {
+    if (!usesCustomSticky || activeListHeader == null || pullSearchSettled.current) return
+    pullSearchSettled.current = true
+    const handle = requestAnimationFrame(() => {
+      sectionViewRefs.current.forEach((el, idx) => {
+        el?.measure((_x, _y, _w, h, _px, pageY) => {
+          if (sectionViewRefs.current.get(idx) === el) measureHeader(idx, pageY, h)
+        })
+      })
+    })
+    return () => cancelAnimationFrame(handle)
+  }, [activeListHeader, usesCustomSticky, measureHeader])
+
+  const contentContainerStyle = useMemo(() => [{ minHeight: Dimensions.get('window').height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle], [contentInset.bottom, contentInset.top, externalContentContainerStyle, pullSearchMinHeight])
+
+  const onPullSearchZoneEnter = useCallback(() => {
+    if (!pullSearchHeight) return
+    scrollTo(-contentInset.top + pullSearchHeight, true)
+  }, [contentInset.top, pullSearchHeight, scrollTo])
+
+  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+
+  const handleScrollToTop = useCallback(() => {
+    const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
+    scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated: true })
+  }, [contentInset.top, pullSearchHeight])
+
+  const handleContentSizeChange = useCallback(
+    (w: number, h: number) => {
+      if (onContentSizeChange) onContentSizeChange(w, h)
+    },
+    [onContentSizeChange]
+  )
+
+  const refreshControl = useMemo(() => (onRefresh ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing ?? false} /> : <RefreshControl />), [onRefresh, refreshing])
+  const nativeGesture = useMemo(() => Gesture.Native(), [])
+  const combinedGesture = useMemo(() => (gesture !== undefined ? Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture), [gesture, nativeGesture])
+  const detectorGesture = gesture !== undefined ? combinedGesture : undefined
+
+  const content = (
+    <View style={containerStyle}>
+      <AnimatedSectionList
+        key={headerHeight > 0 ? 1 : 0}
+        {...passThroughProps}
+        contentContainerStyle={contentContainerStyle}
+        contentInset={contentInset}
+        contentOffset={contentOffset}
+        initialNumToRender={initialNumToRender}
+        ListHeaderComponent={activeListHeader}
+        maxToRenderPerBatch={maxToRenderPerBatch}
+        onContentSizeChange={handleContentSizeChange}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        onScroll={handleScroll}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        ref={(el: RNSectionList<ItemT, SectionT> | null) => {
+          if (externalRef) externalRef.current = el
+          scrollView.current = el
+        }}
+        refreshControl={refreshControl}
+        removeClippedSubviews={removeClippedSubviews}
+        renderSectionHeader={wrappedRenderSectionHeader}
+        scrollEventThrottle={16}
+        sections={sections}
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator ?? true}
+        stickySectionHeadersEnabled={false}
+        windowSize={windowSize}
+      />
+      {hiddenHeader && (
+        <View pointerEvents='none' style={styles.measureContainer}>
+          {hiddenHeader}
+        </View>
+      )}
+      <ScrollViewChip onPress={handleScrollToTop} style={chipStyle} />
+      {usesCustomSticky && (
+        <Animated.View pointerEvents='none' style={[styles.stickyClip, clipStyle]}>
+          {activeIndex >= 0 && activeIndex < sections.length && <Animated.View style={[styles.stickyOverlay, overlayStyle]}>{renderSectionHeader({ section: sections[activeIndex] })}</Animated.View>}
+        </Animated.View>
+      )}
+    </View>
+  )
+  return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content
+}
+
+const styles = {
+  measureContainer: { left: 0, opacity: 0, position: 'absolute' as const, right: 0, top: -9999 },
+  stickyClip: { bottom: 0, left: 0, overflow: 'hidden' as const, position: 'absolute' as const, right: 0, zIndex: 2 },
+  stickyOverlay: { left: 0, position: 'absolute' as const, right: 0 }
+}
+
+export const SectionList = memo(SectionListInner) as typeof SectionListInner

package/src/__mocks__/auto-paper.ts

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+export const BlurView = jest.fn(stub)
+export const FAB = jest.fn(stub)
+export const usePaperDefaults = () => ({ FAB: {} })
+export const useBlur = (blur?: boolean) => blur ?? false

package/src/__mocks__/flash-list.ts

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+// Minimal type surface so ts-jest can resolve FlashListProps without the real package
+export type FlashListProps<T> = {
+  data?: readonly T[] | null
+  estimatedItemSize?: number
+  renderItem?: ((info: { item: T; index: number }) => React.ReactElement | null) | null
+  contentInset?: { top?: number; bottom?: number; left?: number; right?: number }
+  contentOffset?: { x: number; y: number }
+  onRefresh?: (() => void) | null
+  onScroll?: unknown
+  refreshControl?: React.ReactElement | null
+  refreshing?: boolean | null
+  scrollEventThrottle?: number
+  [key: string]: unknown
+}
+
+export const FlashList = jest.fn(stub)

package/src/__mocks__/react-native-gesture-handler.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+export const GestureDetector = stub
+export const useNativeGesture = jest.fn(() => ({}))
+export const useSimultaneousGestures = jest.fn((...gestures: unknown[]) => gestures[0])
+export const Gesture = {
+  Native: () => ({}),
+  Simultaneous: (..._gestures: unknown[]) => ({})
+}
+export type GestureType = object
+export type SingleGesture = object

package/src/__mocks__/react-native-keyboard-controller.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+export const KeyboardAwareScrollView = stub
+export const KeyboardAwareFlatList = stub
+export const useKeyboardHandler = jest.fn()
+export const useReanimatedKeyboardAnimation = () => ({
+  height: { value: 0 },
+  progress: { value: 0 }
+})

package/src/__mocks__/react-native-paper.ts

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+export const ProgressBar = jest.fn(() => null)
+export const Surface = jest.fn(stub)
+export const Chip = jest.fn(stub)
+export const Searchbar = jest.fn(() => null)
+
+const BackAction = jest.fn(() => null)
+export const Appbar = { BackAction }
+
+export const useTheme = () => ({
+  dark: false,
+  colors: {
+    primary: '#6200ee',
+    surface: '#ffffff',
+    onSurface: '#000000',
+    onSurfaceVariant: '#49454f',
+    outlineVariant: '#cac4d0'
+  }
+})

package/src/__mocks__/react-native-reanimated.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+export const useSharedValue = (init: number) => ({ value: init })
+export const useAnimatedStyle = (_factory: () => object) => ({})
+export const useAnimatedProps = (_factory: () => object) => ({})
+export const useAnimatedScrollHandler = (_handler: unknown) => jest.fn()
+export const useAnimatedReaction = jest.fn()
+export const useDerivedValue = (factory: () => unknown) => ({ value: factory() })
+export const withTiming = (value: number) => value
+export const withSpring = (value: number) => value
+export const runOnJS =
+  <T extends (...args: unknown[]) => unknown>(fn: T) =>
+  (...args: Parameters<T>) =>
+    fn(...args)
+
+export const createAnimatedComponent = (C: React.ComponentType) => C
+
+// The default export IS the Animated namespace — `import Animated from 'reanimated'` → Animated.View
+const Animated = {
+  View: stub,
+  Text: stub,
+  ScrollView: stub,
+  FlatList: stub,
+  createAnimatedComponent
+}
+
+export { Animated }
+export default Animated

package/src/__mocks__/react-native-safe-area-context.ts

@@ -0,0 +1,2 @@
+export const useSafeAreaInsets = () => ({ top: 44, bottom: 34, left: 0, right: 0 })
+export const SafeAreaProvider = ({ children }: { children?: React.ReactNode }) => children ?? null

package/src/__mocks__/react-native.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
+
+const StyleSheet = {
+  absoluteFill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  create: <T extends object>(styles: T): T => styles,
+  flatten: (style: unknown) => style
+}
+
+const Dimensions = {
+  get: (_dim: string) => ({ width: 390, height: 844 })
+}
+
+const Platform = {
+  OS: 'ios' as 'ios' | 'android',
+  select: (obj: Record<string, unknown>) => obj[Platform.OS] ?? obj.default
+}
+
+export { Dimensions, Platform, StyleSheet }
+
+export const View = stub
+export const Text = stub
+export const Pressable = stub
+export const TouchableOpacity = stub
+export const FlatList = jest.fn(stub)
+export const RefreshControl = jest.fn(stub)
+export const SectionList = jest.fn(stub)
+export const ScrollView = jest.fn(stub)
+export const useWindowDimensions = () => ({ width: 390, height: 844, fontScale: 1, scale: 1 })