@rific/scroll-view 0.1.0

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@rific/scroll-view",
+  "version": "0.1.0",
+  "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
+  "keywords": [
+    "react-native",
+    "expo",
+    "scroll-view",
+    "blur",
+    "header",
+    "footer",
+    "keyboard-aware",
+    "reanimated",
+    "gesture-handler"
+  ],
+  "homepage": "https://github.com/jayrdeaton/react-native-scroll-view#readme",
+  "bugs": {
+    "url": "https://github.com/jayrdeaton/react-native-scroll-view/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jayrdeaton/react-native-scroll-view.git"
+  },
+  "license": "MIT",
+  "author": "Jay Deaton",
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "react-native": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --clean --watch",
+    "fix": "eslint --fix",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "push": "yalc publish --push",
+    "release": "git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:patch": "npm version patch && git push --follow-tags",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "typecheck": "tsc --noEmit",
+    "preversion": "npm run lint && npm test && npm run build"
+  },
+  "devDependencies": {
+    "@reduxjs/toolkit": "^2.12.0",
+    "@rific/auto-paper": "^0.3.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/parser": "^8.59.3",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-package-json": "^1.0.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "prettier": "^3.8.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": "^0.76.0",
+    "react-native-gesture-handler": "*",
+    "react-native-keyboard-controller": "*",
+    "react-native-paper": "^5.12.0",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "ts-jest": "^29.4.9",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.59.3"
+  },
+  "peerDependencies": {
+    "@rific/auto-paper": "^0.3.1",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-gesture-handler": "*",
+    "react-native-keyboard-controller": "*",
+    "react-native-paper": ">=5.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/CustomList.tsx

@@ -0,0 +1,127 @@
+import { type ComponentType, memo, type ReactElement, type ReactNode, type RefObject, useCallback, useMemo, useRef } from 'react'
+import { Dimensions, type NativeScrollEvent, type NativeSyntheticEvent, type StyleProp, View, type ViewStyle } from 'react-native'
+import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
+
+import { RefreshControl } from './internal/RefreshControl'
+import { ScrollViewChip } from './internal/ScrollViewChip'
+import { useScrollHandler } from './internal/useScrollHandler'
+import { useScrollList } from './internal/useScrollList'
+import { useScrollInit } from './useScrollInit'
+
+type ScrollToOffsetRef = { scrollToOffset: (params: { animated?: boolean; offset: number }) => void }
+
+export type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset' | 'onScroll' | 'refreshControl' | 'scrollEventThrottle'> & {
+  component: ComponentType<P>
+  renderFilters?: ReactNode
+  footerFixed?: boolean
+  gesture?: GestureType
+  headerFixed?: boolean
+  keyboardAware?: boolean
+  onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onRefresh?: () => Promise<void> | void
+  onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  pullSearchHeight?: number
+  scrollRef?: RefObject<ScrollToOffsetRef | null>
+  style?: StyleProp<ViewStyle>
+}
+
+const CustomListInner = <P extends object>({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => {
+  // Intercept ListHeaderComponent so useScrollInit can apply the same 2-phase measurement as FlatList.
+  const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props as Record<string, unknown>
+
+  const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style })
+
+  const scrollViewInternal = useRef<ScrollToOffsetRef | null>(null)
+
+  const handleRef = useCallback(
+    (el: ScrollToOffsetRef | null) => {
+      scrollViewInternal.current = el
+      if (scrollRef) scrollRef.current = el
+    },
+    [scrollRef]
+  )
+
+  const scrollTo = useCallback((offset: number, animated: boolean) => {
+    scrollViewInternal.current?.scrollToOffset({ offset, animated })
+  }, [])
+
+  const {
+    activeListHeader: pullSearchHeader,
+    handleMomentumScrollEnd,
+    handleScrollBeginDrag,
+    handleScrollEndDrag,
+    hiddenHeader,
+    pullSearchMinHeight
+  } = useScrollInit({
+    listHeaderComponent: listHeaderComponent as ComponentType<object> | ReactElement | null | undefined,
+    onMomentumScrollEnd: externalMomentumScrollEnd,
+    onRefresh: pullSearchHeight ? onRefresh : undefined,
+    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])
+
+  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
+    scrollViewInternal.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true })
+  }, [contentInset.top, pullSearchHeight])
+
+  const onScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+
+  const handleScrollToTop = useCallback(() => {
+    const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
+    scrollViewInternal.current?.scrollToOffset({ offset, animated: true })
+  }, [contentInset.top, pullSearchHeight])
+
+  const refreshControl = useMemo(() => <RefreshControl />, [])
+  const nativeGesture = useMemo(() => Gesture.Native(), [])
+  const combinedGesture = useMemo(() => (gesture !== undefined ? Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture), [gesture, nativeGesture])
+  const detectorGesture = gesture !== undefined ? combinedGesture : undefined
+
+  const TypedList = List as ComponentType<{
+    contentContainerStyle?: unknown
+    contentInset: typeof contentInset
+    contentOffset: typeof contentOffset
+    ListHeaderComponent?: unknown
+    onMomentumScrollEnd: typeof handleMomentumScrollEnd
+    onScroll: typeof onScroll
+    onScrollBeginDrag: typeof handleScrollBeginDrag
+    onScrollEndDrag: typeof handleScrollEndDrag
+    ref?: ((el: ScrollToOffsetRef | null) => void) | RefObject<ScrollToOffsetRef | null>
+    refreshControl: ReactElement
+    scrollEventThrottle: 16
+    [key: string]: unknown
+  }>
+
+  const content = (
+    <View style={containerStyle}>
+      <TypedList {...restProps} contentContainerStyle={contentContainerStyle} contentInset={contentInset} contentOffset={contentOffset} ListHeaderComponent={activeListHeader} onMomentumScrollEnd={handleMomentumScrollEnd} onScroll={onScroll} onScrollBeginDrag={handleScrollBeginDrag} onScrollEndDrag={handleScrollEndDrag} ref={handleRef} refreshControl={refreshControl} scrollEventThrottle={16} />
+      {hiddenHeader && (
+        <View pointerEvents='none' style={styles.measureContainer}>
+          {hiddenHeader}
+        </View>
+      )}
+      <ScrollViewChip onPress={handleScrollToTop} style={chipStyle} />
+    </View>
+  )
+  return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content
+}
+
+const styles = { measureContainer: { left: 0, opacity: 0, position: 'absolute' as const, right: 0, top: -9999 } }
+
+export const CustomList = memo(CustomListInner) as typeof CustomListInner

package/src/FlatList.tsx

@@ -0,0 +1,139 @@
+import { memo, type ReactNode, type RefObject, useCallback, useMemo, useRef } from 'react'
+import { Dimensions, FlatList as RNFlatList, type FlatListProps as RNFlatListProps, type NativeScrollEvent, type NativeSyntheticEvent, View } from 'react-native'
+import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
+
+import { HorizontalDots } from './internal/HorizontalDots'
+import { RefreshControl } from './internal/RefreshControl'
+import { ScrollViewChip } from './internal/ScrollViewChip'
+import { useScrollHandler } from './internal/useScrollHandler'
+import { useScrollList } from './internal/useScrollList'
+import { useScrollInit } from './useScrollInit'
+
+export type FlatListProps<T> = Omit<RNFlatListProps<T>, 'onRefresh' | 'refreshing'> & {
+  renderFilters?: ReactNode
+  footerFixed?: boolean
+  gesture?: GestureType
+  headerFixed?: boolean
+  keyboardAware?: boolean
+  onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onRefresh?: () => Promise<void> | void
+  onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  pullSearchHeight?: number
+  ref?: RefObject<RNFlatList | null>
+}
+
+const FlatListInner = <T,>({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }: FlatListProps<T>) => {
+  const scrollView = useRef<RNFlatList>(null)
+  const isHorizontal = horizontal === true
+  const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1
+
+  const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style })
+
+  const scrollTo = useCallback((offset: number, animated: boolean) => {
+    scrollView.current?.scrollToOffset({ offset, animated })
+  }, [])
+
+  const {
+    activeListHeader: pullSearchHeader,
+    handleMomentumScrollEnd,
+    handleScrollBeginDrag,
+    handleScrollEndDrag,
+    hiddenHeader,
+    pullSearchMinHeight
+  } = useScrollInit({
+    listHeaderComponent: externalListHeaderComponent,
+    onMomentumScrollEnd: externalMomentumScrollEnd,
+    onRefresh: pullSearchHeight ? onRefresh : undefined,
+    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])
+
+  const contentContainerStyle = useMemo(() => (isHorizontal ? externalContentContainerStyle : [{ minHeight: Dimensions.get('window').height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle]), [isHorizontal, contentInset.bottom, contentInset.top, externalContentContainerStyle, pullSearchMinHeight])
+
+  const onPullSearchZoneEnter = useCallback(() => {
+    if (!pullSearchHeight) return
+    scrollView.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true })
+  }, [contentInset.top, pullSearchHeight])
+
+  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+
+  const handleScrollToTop = useCallback(() => {
+    if (isHorizontal) {
+      scrollView.current?.scrollToOffset({ offset: 0, animated: true })
+      return
+    }
+    const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
+    scrollView.current?.scrollToOffset({ offset, animated: true })
+  }, [isHorizontal, contentInset.top, pullSearchHeight])
+
+  const handleContentSizeChange = useCallback(
+    (w: number, h: number) => {
+      if (onContentSizeChange) onContentSizeChange(w, h)
+    },
+    [onContentSizeChange]
+  )
+
+  const refreshControl = useMemo(() => <RefreshControl />, [])
+  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}>
+      <Animated.FlatList
+        {...(props as Omit<RNFlatListProps<T>, 'CellRendererComponent'>)}
+        contentContainerStyle={contentContainerStyle}
+        contentInset={contentInset}
+        contentOffset={contentOffset}
+        data={data}
+        horizontal={isHorizontal}
+        initialNumToRender={initialNumToRender}
+        ListHeaderComponent={activeListHeader}
+        maxToRenderPerBatch={maxToRenderPerBatch}
+        onContentSizeChange={handleContentSizeChange}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        onScroll={handleScroll}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        pagingEnabled={pagingEnabled}
+        ref={(el: RNFlatList | null) => {
+          if (externalRef) externalRef.current = el
+          scrollView.current = el
+        }}
+        refreshControl={refreshControl}
+        removeClippedSubviews={removeClippedSubviews}
+        scrollEventThrottle={16}
+        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator ?? isHorizontal}
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator ?? !isHorizontal}
+        windowSize={windowSize}
+      />
+      {hiddenHeader && (
+        <View pointerEvents='none' style={styles.measureContainer}>
+          {hiddenHeader}
+        </View>
+      )}
+      <ScrollViewChip isHorizontal={isHorizontal} onPress={handleScrollToTop} style={chipStyle} />
+      {showDots && <HorizontalDots total={data?.length ?? 0} />}
+    </View>
+  )
+  return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content
+}
+
+const styles = { measureContainer: { left: 0, opacity: 0, position: 'absolute' as const, right: 0, top: -9999 } }
+
+export const FlatList = memo(FlatListInner) as typeof FlatListInner

package/src/PullSearch.tsx

@@ -0,0 +1,99 @@
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { type LayoutChangeEvent, StyleSheet, type TextInput } from 'react-native'
+import { Searchbar, useTheme } from 'react-native-paper'
+import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated'
+
+import { ScrollViewContext } from './ScrollViewContext'
+
+export type PullSearchHandle = {
+  blur: () => void
+  focus: () => void
+}
+
+export type PullSearchProps = {
+  debounce?: boolean
+  onChangeText: (text: string) => void
+  onHeightChange: (height: number) => void
+  placeholder?: string
+  value?: string
+}
+
+export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function PullSearch({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
+  const { headerHeight, scrollPosition } = useContext(ScrollViewContext)
+  const theme = useTheme()
+  const inputRef = useRef<TextInput>(null)
+  const [barHeight, setBarHeight] = useState(0)
+  const [value, setValue] = useState(propValue ?? '')
+  const prevPropValueRef = useRef<string | undefined>(propValue)
+
+  useEffect(() => {
+    if (prevPropValueRef.current === propValue) return
+    prevPropValueRef.current = propValue
+    setValue(propValue ?? '')
+  }, [propValue])
+
+  useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur(),
+    focus: () => inputRef.current?.focus()
+  }))
+
+  const blurInput = useCallback(() => inputRef.current?.blur(), [])
+
+  useAnimatedReaction(
+    () => {
+      if (barHeight === 0) return false
+      return scrollPosition.value >= -headerHeight + barHeight
+    },
+    (isHidden, wasHidden) => {
+      if (isHidden && !wasHidden) runOnJS(blurInput)()
+    },
+    [barHeight, headerHeight, blurInput]
+  )
+
+  const handleClear = useCallback(() => {
+    setValue('')
+    onChangeText('')
+  }, [onChangeText])
+
+  const handleLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height }
+      }
+    }: LayoutChangeEvent) => {
+      setBarHeight(height)
+      onHeightChange(height)
+    },
+    [onHeightChange]
+  )
+
+  useEffect(() => {
+    const normalizedValue = value.trim()
+    if (debounce) {
+      const timeout = setTimeout(() => onChangeText(normalizedValue), 500)
+      return () => clearTimeout(timeout)
+    }
+    onChangeText(normalizedValue)
+  }, [debounce, onChangeText, value])
+
+  // Fade out as the bar scrolls up into the header blur region.
+  // showY = -headerHeight: natural rest, bar fully visible just below header.
+  // hideY = -headerHeight + barHeight: bar scrolled behind header, opacity 0.
+  const animatedStyle = useAnimatedStyle(() => {
+    if (barHeight === 0) return { opacity: 0 }
+    const showY = -headerHeight
+    const hideY = -headerHeight + barHeight
+    return { opacity: interpolate(scrollPosition.value, [showY, hideY], [1, 0], Extrapolation.CLAMP) }
+  }, [barHeight, headerHeight])
+
+  return (
+    <Animated.View onLayout={handleLayout} style={[styles.container, animatedStyle]}>
+      <Searchbar autoCorrect={false} onChangeText={(text) => setValue((text || '').trimStart())} onClearIconPress={handleClear} placeholder={placeholder} placeholderTextColor={theme.colors.onSurfaceVariant} ref={inputRef} spellCheck={false} style={styles.input} value={value} />
+    </Animated.View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: { paddingVertical: 8 },
+  input: { margin: 0 }
+})

package/src/ScrollView.tsx

@@ -0,0 +1,89 @@
+import { memo, type RefObject, useCallback, useMemo, useRef } from 'react'
+import { type NativeScrollEvent, type NativeSyntheticEvent, ScrollView as RNScrollView, type ScrollViewProps as RNScrollViewProps, View } from 'react-native'
+import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
+import Animated 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 { useScrollInit } from './useScrollInit'
+
+export type ScrollViewProps = RNScrollViewProps & {
+  footerFixed?: boolean
+  gesture?: GestureType
+  headerFixed?: boolean
+  keyboardAware?: boolean
+  onRefresh?: () => void
+  onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  pullSearchHeight?: number
+  ref?: RefObject<RNScrollView | null>
+  refreshing?: boolean
+}
+
+const ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => {
+  const scrollView = useRef<RNScrollView>(null)
+  const isHorizontal = horizontal === true
+
+  const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style })
+
+  const scrollTo = useCallback((offset: number, animated: boolean) => {
+    scrollView.current?.scrollTo({ y: offset, animated })
+  }, [])
+
+  const { handleMomentumScrollEnd, handleScrollBeginDrag, handleScrollEndDrag } = useScrollInit({
+    onMomentumScrollEnd: externalMomentumScrollEnd,
+    onScrollBeginDrag: externalScrollBeginDrag,
+    onScrollEndDrag: externalScrollEndDrag,
+    pullSearchHeight,
+    scrollTo
+  })
+
+  const onPullSearchZoneEnter = useCallback(() => {
+    if (!pullSearchHeight) return
+    scrollTo(-contentInset.top + pullSearchHeight, true)
+  }, [contentInset.top, pullSearchHeight, scrollTo])
+
+  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+
+  const handleScrollToTop = useCallback(() => {
+    if (isHorizontal) {
+      scrollView.current?.scrollTo({ x: 0, animated: true })
+      return
+    }
+    const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
+    scrollView.current?.scrollTo({ y: offset, animated: true })
+  }, [isHorizontal, contentInset.top, pullSearchHeight])
+
+  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}>
+      <Animated.ScrollView
+        {...props}
+        contentInset={contentInset}
+        contentOffset={contentOffset}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        onScroll={handleScroll}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        ref={(el: RNScrollView | null) => {
+          if (props.ref) props.ref.current = el
+          scrollView.current = el
+        }}
+        refreshControl={refreshControl}
+        scrollEventThrottle={16}
+      >
+        {children}
+      </Animated.ScrollView>
+      <ScrollViewChip isHorizontal={isHorizontal} onPress={handleScrollToTop} style={chipStyle} />
+    </View>
+  )
+  return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content
+}
+
+export const ScrollView = memo(ScrollViewInner) as typeof ScrollViewInner

package/src/ScrollViewContext.ts

@@ -0,0 +1,50 @@
+import { createContext } from 'react'
+import { SharedValue } from 'react-native-reanimated'
+
+export type ScrollViewContextType = {
+  blur: boolean
+  footerHeight: number
+  footerHeightShared: SharedValue<number>
+  footerFixed: boolean
+  footerOffset: SharedValue<number>
+  headerHeight: number
+  headerHeightShared: SharedValue<number>
+  headerFixed: boolean
+  headerOffset: SharedValue<number>
+  progress: number | null
+  pullSearchHeightShared: SharedValue<number>
+  snapBackFooterShared: SharedValue<boolean>
+  snapBackHeaderShared: SharedValue<boolean>
+  progressing: boolean
+  scrollHeight: number
+  scrollPosition: SharedValue<number>
+  setFooterHeight: (h: number) => void
+  setHeaderHeight: (h: number) => void
+  setProgress: (p: number | null) => void
+  setProgressing: (b: boolean) => void
+  tabBarHeight: number
+}
+
+export const ScrollViewContext = createContext<ScrollViewContextType>({
+  blur: true,
+  footerHeight: 0,
+  footerHeightShared: null as unknown as SharedValue<number>,
+  footerFixed: false,
+  footerOffset: null as unknown as SharedValue<number>,
+  headerHeight: 0,
+  headerHeightShared: null as unknown as SharedValue<number>,
+  headerFixed: false,
+  headerOffset: null as unknown as SharedValue<number>,
+  progress: null,
+  progressing: false,
+  pullSearchHeightShared: null as unknown as SharedValue<number>,
+  scrollHeight: 0,
+  scrollPosition: null as unknown as SharedValue<number>,
+  setFooterHeight: () => {},
+  setHeaderHeight: () => {},
+  setProgress: () => {},
+  setProgressing: () => {},
+  snapBackFooterShared: null as unknown as SharedValue<boolean>,
+  snapBackHeaderShared: null as unknown as SharedValue<boolean>,
+  tabBarHeight: 60
+})

package/src/ScrollViewFooter.tsx

@@ -0,0 +1,48 @@
+import { BlurView } from '@rific/auto-paper'
+import { type ReactNode, useContext, useEffect } from 'react'
+import { type LayoutChangeEvent, StyleSheet, View, type ViewStyle } from 'react-native'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { ScrollViewContext } from './ScrollViewContext'
+
+export type ScrollViewFooterProps = {
+  children?: ReactNode | ReactNode[]
+  style?: ViewStyle
+}
+
+export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) => {
+  const { blur, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext(ScrollViewContext)
+  const insets = useSafeAreaInsets()
+  useEffect(
+    () => () => {
+      setFooterHeight(0)
+    },
+    [setFooterHeight]
+  )
+  const handleLayout = ({
+    nativeEvent: {
+      layout: { height }
+    }
+  }: LayoutChangeEvent) => {
+    if (footerHeight !== height) setFooterHeight(height)
+  }
+  const footerStyle = useAnimatedStyle(() => {
+    if (footerFixed) return { transform: [{ translateY: 0 }] }
+    if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] }
+    const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value
+    if (effective <= 0) return { transform: [{ translateY: 0 }] }
+    return { transform: [{ translateY: Math.min(effective, footerHeight) }] }
+  }, [footerHeight, footerFixed])
+  return (
+    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, footerStyle]}>
+      {footerHeight > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
+      <View style={[styles.row, { paddingBottom: insets.bottom }, style]}>{children}</View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  footer: { bottom: 0, left: 0, position: 'absolute', right: 0, zIndex: 2 },
+  row: { alignItems: 'center', flexDirection: 'row', zIndex: 1 }
+})