@rific/scroll-view 0.1.0

package/src/internal/useScrollList.ts

@@ -0,0 +1,64 @@
+import { useContext, useEffect, useMemo } from 'react'
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native'
+import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+import { useKeyboardInset } from '../useKeyboardInset'
+
+const CHIP_SLIDE = 48
+
+export type UseScrollListOptions = {
+  footerFixed?: boolean
+  headerFixed?: boolean
+  isHorizontal?: boolean
+  keyboardAware?: boolean
+  pullSearchHeight?: number
+  style?: StyleProp<ViewStyle>
+}
+
+export function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style }: UseScrollListOptions = {}) {
+  const insets = useSafeAreaInsets()
+  const keyboardHeight = useKeyboardInset()
+  const { footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext(ScrollViewContext)
+
+  const headerFixed = isHorizontal ? true : (headerFixedProp ?? contextHeaderFixed)
+  const footerFixed = isHorizontal ? true : (footerFixedProp ?? contextFooterFixed)
+
+  useEffect(() => {
+    pullSearchHeightShared.value = pullSearchHeight ?? 0
+  }, [pullSearchHeight, pullSearchHeightShared])
+
+  // First render (headerHeight===0): flex:1 so the list sits naturally below the in-flow header.
+  // After header measures: absoluteFill with contentOffset to match the same visual position.
+  const containerStyle = useMemo(() => (headerHeight === 0 ? [{ flex: 1 }, style] : [StyleSheet.absoluteFill, style]), [headerHeight, style])
+
+  const contentInset = useMemo(() => ({ bottom: (footerFixed ? footerHeight || insets.bottom : insets.bottom) + (keyboardAware ? keyboardHeight : 0), top: headerHeight }), [footerFixed, footerHeight, insets.bottom, headerHeight, keyboardAware, keyboardHeight])
+
+  // Synchronously positions the scroll view to match the in-flow layout from the first render.
+  // Fabric applies this atomically with the containerStyle switch, so there is no visible jump.
+  const contentOffset = useMemo(() => ({ x: 0, y: -contentInset.top }), [contentInset.top])
+
+  const chipHidden = useSharedValue(1)
+  const chipStyle = useAnimatedStyle(() => {
+    const pointerEvents = chipHidden.value ? ('none' as const) : ('box-none' as const)
+    if (isHorizontal) {
+      return {
+        opacity: chipHidden.value ? withTiming(0) : withTiming(1),
+        pointerEvents,
+        top: Math.max(headerHeight, insets.top) + 4,
+        transform: [{ translateX: chipHidden.value ? withTiming(-CHIP_SLIDE) : withTiming(0) }]
+      }
+    }
+    const slide = headerFixed ? 0 : snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + headerHeight - pullSearchHeightShared.value)
+    const top = Math.max(headerHeight - slide, insets.top) + 4
+    return {
+      opacity: chipHidden.value ? withTiming(0) : withTiming(1),
+      pointerEvents,
+      top,
+      transform: [{ translateY: chipHidden.value ? withTiming(-CHIP_SLIDE) : withTiming(0) }]
+    }
+  }, [isHorizontal, headerFixed, headerHeight, insets.top])
+
+  return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false }
+}

package/src/internal/useStickyHeaders.ts

@@ -0,0 +1,149 @@
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'
+import { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+
+export type StickyHeadersApi = {
+  activeIndex: number
+  clipStyle: ReturnType<typeof useAnimatedStyle>
+  measureHeader: (index: number, y: number, height: number) => void
+  overlayStyle: ReturnType<typeof useAnimatedStyle>
+  resetPositions: (count: number) => void
+}
+
+export function useStickyHeaders(headerFixed: boolean, enabled: boolean): StickyHeadersApi {
+  const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const insetsTop = useSafeAreaInsets().top
+
+  const sectionYPositions = useSharedValue<number[]>([])
+  const sectionHeights = useSharedValue<number[]>([])
+  const [activeIndex, setActiveIndex] = useState(-1)
+  // Mirrors activeIndex React state but lives on the UI thread for overlayStyle.
+  // Updated via useLayoutEffect so content and style always change together.
+  const contentIndexShared = useSharedValue(-1)
+  useLayoutEffect(() => {
+    contentIndexShared.value = activeIndex
+  }, [activeIndex, contentIndexShared])
+
+  // JS-side source of truth — sectionYPositions is a snapshot pushed to the worklet.
+  // Reading sectionYPositions.value from JS returns the UI-thread's stale copy, so
+  // rapid async measure callbacks would overwrite each other; refs avoid that.
+  const positionsCache = useRef<number[]>([])
+  const heightsCache = useRef<number[]>([])
+
+  useAnimatedReaction(
+    () => {
+      if (!enabled) return -1
+      const positions = sectionYPositions.value
+      if (positions.length === 0) return -1
+
+      const hHeight = headerHeightShared.value
+      const scrollPos = scrollPosition.value
+      let stickyTop: number
+      if (headerFixed) {
+        stickyTop = hHeight
+      } else if (snapBackHeaderShared.value) {
+        stickyTop = Math.max(insetsTop, hHeight + headerOffset.value)
+      } else {
+        const effective = scrollPos + hHeight - pullSearchHeightShared.value
+        stickyTop = effective <= 0 ? hHeight : Math.max(insetsTop, hHeight - effective)
+      }
+
+      const threshold = scrollPos + stickyTop
+      let active = -1
+      for (let i = 0; i < positions.length; i++) {
+        if (positions[i] >= 0 && positions[i] < threshold) active = i
+        else if (positions[i] >= 0) break
+      }
+
+      return active
+    },
+    (curr, prev) => {
+      if (curr !== prev) runOnJS(setActiveIndex)(curr)
+    },
+    [enabled, headerFixed, insetsTop]
+  )
+
+  // Positions the clip container at stickyTop so overflow:hidden hides the outgoing
+  // header as it slides above the sticky line during a push transition.
+  const clipStyle = useAnimatedStyle(() => {
+    const hHeight = headerHeightShared.value
+    const scrollPos = scrollPosition.value
+    let stickyTop: number
+    if (!enabled || headerFixed) {
+      stickyTop = hHeight
+    } else if (snapBackHeaderShared.value) {
+      stickyTop = Math.max(insetsTop, hHeight + headerOffset.value)
+    } else {
+      const effective = scrollPos + hHeight - pullSearchHeightShared.value
+      stickyTop = effective <= 0 ? hHeight : Math.max(insetsTop, hHeight - effective)
+    }
+    return { top: stickyTop }
+  }, [enabled, headerFixed, insetsTop])
+
+  // overlayStyle positions the header at top:0 relative to the clip container.
+  // The push animation uses 1:1 speed with pushThreshold = stickyTop + currentHeight
+  // (incoming header touches outgoing header's bottom). The clip container's
+  // overflow:hidden hides the outgoing header once it exits the top of the container.
+  const overlayStyle = useAnimatedStyle(() => {
+    const hidden = { opacity: 0, top: 0, transform: [{ translateY: 0 }] }
+    if (!enabled) return hidden
+
+    const index = contentIndexShared.value
+    const positions = sectionYPositions.value
+    if (index < 0 || index >= positions.length) return hidden
+
+    const hHeight = headerHeightShared.value
+    const scrollPos = scrollPosition.value
+    let stickyTop: number
+    if (headerFixed) {
+      stickyTop = hHeight
+    } else if (snapBackHeaderShared.value) {
+      stickyTop = Math.max(insetsTop, hHeight + headerOffset.value)
+    } else {
+      const effective = scrollPos + hHeight - pullSearchHeightShared.value
+      stickyTop = effective <= 0 ? hHeight : Math.max(insetsTop, hHeight - effective)
+    }
+
+    if (positions[index] - scrollPos >= stickyTop) return hidden
+
+    const currentHeight = Math.max(0, sectionHeights.value[index] ?? 0)
+    const nextIndex = index + 1
+    let translateY = 0
+    if (currentHeight > 0 && nextIndex < positions.length && positions[nextIndex] >= 0) {
+      const nextScreenY = positions[nextIndex] - scrollPos
+      const pushThreshold = stickyTop + currentHeight
+      if (nextScreenY < pushThreshold) translateY = nextScreenY - pushThreshold
+    }
+
+    return { opacity: 1, top: 0, transform: [{ translateY }] }
+  }, [enabled, headerFixed, insetsTop])
+
+  // pageY is the view's window-coordinate Y from view.measure().
+  // contentY = pageY + contentOffset.y, since screenY = contentY - contentOffset.y.
+  const measureHeader = useCallback(
+    (index: number, pageY: number, height: number) => {
+      const contentY = pageY + scrollPosition.value
+      positionsCache.current[index] = contentY
+      sectionYPositions.value = positionsCache.current.slice()
+
+      heightsCache.current[index] = height
+      sectionHeights.value = heightsCache.current.slice()
+    },
+    [scrollPosition, sectionHeights, sectionYPositions]
+  )
+
+  const resetPositions = useCallback(
+    (count: number) => {
+      positionsCache.current = Array.from({ length: count }, () => -1)
+      sectionYPositions.value = positionsCache.current.slice()
+
+      heightsCache.current = Array.from({ length: count }, () => -1)
+      sectionHeights.value = heightsCache.current.slice()
+    },
+    [sectionHeights, sectionYPositions]
+  )
+
+  return { activeIndex, clipStyle, measureHeader, overlayStyle, resetPositions }
+}

package/src/out.txt

@@ -0,0 +1,61 @@
+jay~/Developer/React-Native-Scroll-View% yalc publish && yalc push
+Running prepublishOnly script: npm run build
+
+> @rific/scroll-view@0.1.0 prepublishOnly
+> npm run build
+
+
+> @rific/scroll-view@0.1.0 build
+> tsup src/index.ts --format cjs,esm --dts --clean
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Target: es2020
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js 103.45 KB
+CJS ⚡️ Build success in 78ms
+ESM dist/index.mjs 95.24 KB
+ESM ⚡️ Build success in 78ms
+DTS Build start
+src/ScrollView.tsx(48,49): error TS2339: Property 'scrollTo' does not exist on type 'ScrollResponderMixin'.
+
+Error: error occurred in dts build
+    at Worker.<anonymous> (/Users/jay/Developer/React-Native-Scroll-View/node_modules/tsup/dist/index.js:1545:26)
+    at Worker.emit (node:events:509:20)
+    at MessagePort.<anonymous> (node:internal/worker:333:53)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:843:20)
+    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
+DTS Build error
+yalc publish
+
+Publish package in yalc local repo
+
+Options:
+  --version            Show version number                             [boolean]
+  --help               Show help                                       [boolean]
+  --sig                                               [boolean] [default: false]
+  --dev-mod                                            [boolean] [default: true]
+  --workspace-resolve                                            [default: true]
+
+Error: Command failed: npm run prepublishOnly
+    at genericNodeError (node:internal/errors:998:15)
+    at wrappedFn (node:internal/errors:543:14)
+    at checkExecSyncError (node:child_process:925:11)
+    at Object.execSync (node:child_process:997:15)
+    at runPmScript (/opt/homebrew/lib/node_modules/yalc/src/publish.js:75:41)
+    at Array.forEach (<anonymous>)
+    at /opt/homebrew/lib/node_modules/yalc/src/publish.js:90:28
+    at step (/opt/homebrew/lib/node_modules/yalc/src/publish.js:44:23)
+    at Object.next (/opt/homebrew/lib/node_modules/yalc/src/publish.js:25:53)
+    at /opt/homebrew/lib/node_modules/yalc/src/publish.js:19:71 {
+  status: 1,
+  signal: null,
+  output: [ null, null, null ],
+  pid: 71344,
+  stdout: null,
+  stderr: null
+}
+jay~/Developer/React-Native-Scroll-View% 

package/src/redux/scrollViewSlice.ts

@@ -0,0 +1,14 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
+
+import { defaultScrollViewSettings, type ScrollViewSettings } from '../ScrollViewSettingsContext'
+
+const slice = createSlice({
+  name: 'scrollView',
+  initialState: defaultScrollViewSettings,
+  reducers: {
+    initialize: (_state, action: PayloadAction<ScrollViewSettings>) => action.payload
+  }
+})
+
+export const scrollViewActions = slice.actions
+export const scrollViewReducer = slice.reducer

package/src/useKeyboardInset.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useKeyboardHandler } from 'react-native-keyboard-controller'
+import { runOnJS } from 'react-native-reanimated'
+
+export const useKeyboardInset = () => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0)
+  useKeyboardHandler(
+    {
+      onMove: (e) => {
+        'worklet'
+        runOnJS(setKeyboardHeight)(e.height)
+      },
+      onEnd: (e) => {
+        'worklet'
+        runOnJS(setKeyboardHeight)(e.height)
+      }
+    },
+    []
+  )
+  return keyboardHeight
+}

package/src/useScrollInit.ts

@@ -0,0 +1,112 @@
+import { type ComponentType, createElement, type ReactElement, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
+
+import { ScrollViewContext } from './ScrollViewContext'
+
+export type UseScrollInitOptions = {
+  listHeaderComponent?: ComponentType<object> | ReactElement | null
+  onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onRefresh?: () => Promise<void> | void
+  onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  pullSearchHeight?: number
+  scrollTo: (offset: number, animated: boolean) => void
+}
+
+export type UseScrollInitResult = {
+  activeListHeader: ComponentType<object> | ReactElement | null | undefined
+  handleMomentumScrollEnd: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  handleScrollBeginDrag: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  handleScrollEndDrag: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  hiddenHeader: ReactElement | null
+  pullSearchMinHeight: number
+}
+
+export function useScrollInit({ listHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollTo }: UseScrollInitOptions): UseScrollInitResult {
+  const { headerHeight, scrollPosition, setProgressing } = useContext(ScrollViewContext)
+  const hasPullSearch = pullSearchHeight !== undefined
+  const [phase, setPhase] = useState<'measuring' | 'ready'>(hasPullSearch ? 'measuring' : 'ready')
+  const [refreshing, setRefreshing] = useState(false)
+  const dragStartY = useRef<number | null>(null)
+  const deliberatelyOpened = useRef(false)
+
+  // Transition to 'ready' once both measurements are available
+  useEffect(() => {
+    if (phase === 'ready' || !headerHeight || !pullSearchHeight) return
+    scrollPosition.value = -headerHeight + pullSearchHeight
+    setPhase('ready')
+  }, [phase, headerHeight, pullSearchHeight, scrollPosition])
+
+  // Effect A: scroll to natural top the first time headerHeight is measured
+  const headerInitialized = useRef(false)
+  useLayoutEffect(() => {
+    if (!headerHeight || headerInitialized.current) return
+    headerInitialized.current = true
+    scrollPosition.value = -headerHeight
+    scrollTo(-headerHeight, false)
+  }, [headerHeight, scrollPosition, scrollTo])
+
+  // Effect B: scroll to hideY when pullSearch phase is ready (same Fabric commit as ListHeaderComponent addition)
+  const pullSearchInitialized = useRef(false)
+  useLayoutEffect(() => {
+    if (!hasPullSearch || phase !== 'ready' || pullSearchInitialized.current || !headerHeight || !pullSearchHeight) return
+    pullSearchInitialized.current = true
+    scrollPosition.value = -headerHeight + pullSearchHeight
+    scrollTo(-headerHeight + pullSearchHeight, false)
+  }, [hasPullSearch, phase, headerHeight, pullSearchHeight, scrollPosition, scrollTo])
+
+  useEffect(() => {
+    if (pullSearchHeight) setProgressing(refreshing)
+  }, [pullSearchHeight, refreshing, setProgressing])
+
+  const handleScrollBeginDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      deliberatelyOpened.current = false
+      if (pullSearchHeight) dragStartY.current = e.nativeEvent.contentOffset.y
+      externalScrollBeginDrag?.(e)
+    },
+    [externalScrollBeginDrag, pullSearchHeight]
+  )
+
+  const handleScrollEndDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (pullSearchHeight && headerHeight) {
+        const y = e.nativeEvent.contentOffset.y
+        const showY = -headerHeight
+        const hideY = -headerHeight + pullSearchHeight
+        const pulledDown = (dragStartY.current ?? hideY) <= hideY
+        dragStartY.current = null
+        if (pulledDown && y <= showY + pullSearchHeight * 0.5) {
+          deliberatelyOpened.current = true
+          if (y <= showY && !refreshing && onRefresh) {
+            setRefreshing(true)
+            Promise.resolve(onRefresh()).finally(() => setRefreshing(false))
+          }
+          scrollTo(showY, true)
+        } else if (y < hideY) {
+          scrollTo(hideY, true)
+        }
+      }
+      externalScrollEndDrag?.(e)
+    },
+    [externalScrollEndDrag, headerHeight, onRefresh, pullSearchHeight, refreshing, scrollTo]
+  )
+
+  const handleMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (pullSearchHeight && headerHeight && !deliberatelyOpened.current && !refreshing) {
+        const y = e.nativeEvent.contentOffset.y
+        const hideY = -headerHeight + pullSearchHeight
+        if (y < hideY - 1) scrollTo(hideY, true)
+      }
+      deliberatelyOpened.current = false
+      externalMomentumScrollEnd?.(e)
+    },
+    [externalMomentumScrollEnd, headerHeight, pullSearchHeight, refreshing, scrollTo]
+  )
+
+  const activeListHeader = hasPullSearch && phase === 'measuring' ? null : listHeaderComponent
+  const hiddenHeader = phase === 'measuring' && listHeaderComponent != null ? (typeof listHeaderComponent === 'function' ? createElement(listHeaderComponent as ComponentType<object>) : (listHeaderComponent as ReactElement)) : null
+
+  return { activeListHeader, handleMomentumScrollEnd, handleScrollBeginDrag, handleScrollEndDrag, hiddenHeader, pullSearchMinHeight: pullSearchHeight ?? 0 }
+}

package/src/useScrollView.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+
+import { ScrollViewContext } from './ScrollViewContext'
+
+export const useScrollView = () => {
+  const { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing } = useContext(ScrollViewContext)
+  return { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing }
+}

package/src/useScrollViewSettings.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react'
+
+import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
+
+export const useScrollViewSettings = () => useContext(ScrollViewSettingsContext)