@rific/scroll-view 0.2.0 → 0.4.0

package/src/SectionList.tsx

@@ -1,16 +1,17 @@
-import { memo, type ReactNode, type RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { memo, type ReactNode, type RefObject, useCallback, useContext, 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 Animated, { runOnUI, useSharedValue } from 'react-native-reanimated'
 
 import { RefreshControl } from './internal/RefreshControl'
 import { type ChipProps, ScrollViewChip } from './internal/ScrollViewChip'
 import { useScrollHandler } from './internal/useScrollHandler'
 import { useScrollList } from './internal/useScrollList'
 import { useStickyHeaders } from './internal/useStickyHeaders'
+import { ScrollViewContext } from './ScrollViewContext'
 import { useScrollInit } from './useScrollInit'
 
-const AnimatedSectionList = createAnimatedComponent(RNSectionList) as unknown as typeof RNSectionList
+const AnimatedSectionList = Animated.createAnimatedComponent(RNSectionList) as unknown as typeof RNSectionList
 
 export type SectionListProps<ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }> = Omit<RNSectionListProps<ItemT, SectionT>, 'horizontal'> & {
   chipProps?: ChipProps
@@ -34,6 +35,29 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
   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 { listGeneration, onListUnmount } = useContext(ScrollViewContext)
+  // -1 never matches a real generation (starts at 0, only increments) — the runOnUI call below
+  // corrects it before any scroll event could observe the placeholder.
+  const capturedGeneration = useSharedValue(-1)
+  // Layout effect (not passive effect): React guarantees all layout-effect cleanups for fibers
+  // removed in a commit run before any layout-effect setups for fibers added in that same commit,
+  // but gives no such ordering guarantee for passive effects. On a key-forced remount, the outgoing
+  // instance's unmount and the incoming instance's mount land in the same commit — with passive
+  // effects, the incoming instance's sync could run before the outgoing instance's bump, permanently
+  // capturing a stale generation and silently disabling this instance's onScroll handling forever.
+  // Correct ordering alone isn't sufficient, though: the onScroll worklet reads capturedGeneration
+  // on the UI thread, and a plain JS-thread write to a SharedValue is not guaranteed to be visible
+  // there before a scroll event the UI thread schedules shortly after (e.g. useScrollInit's mount-time
+  // imperative scrollTo calls). Routing the write itself through runOnUI puts it on the UI thread's
+  // own serial queue, so it's guaranteed to run before any onScroll worklet invocation that could
+  // only be queued after this component finishes mounting.
+  useLayoutEffect(() => {
+    const generation = listGeneration.value
+    runOnUI((gen: number) => {
+      'worklet'
+      capturedGeneration.value = gen
+    })(generation)
+  }, [capturedGeneration, listGeneration])
 
   const usesCustomSticky = stickySectionHeadersEnabled && renderSectionHeader != null
   const { activeIndex, clipStyle, measureHeader, overlayStyle, resetPositions } = useStickyHeaders(headerFixed, usesCustomSticky)
@@ -70,6 +94,8 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
     }
   }, [usesCustomSticky, renderSectionHeader, sections, measureHeader])
 
+  useLayoutEffect(() => () => onListUnmount(), [onListUnmount])
+
   const scrollTo = useCallback((offset: number, animated: boolean) => {
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated })
   }, [])
@@ -120,12 +146,7 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
 
   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, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+  const handleScroll = useScrollHandler({ capturedGeneration, chipHidden, chipThreshold, footerFixed, headerFixed, listGeneration })
 
   const handleScrollToTop = useCallback(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
@@ -147,7 +168,7 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
   const content = (
     <View style={containerStyle}>
       <AnimatedSectionList
-        key={headerHeight > 0 ? 1 : 0}
+        key={headerHeight !== null && headerHeight > 0 ? 1 : 0}
         {...passThroughProps}
         contentContainerStyle={contentContainerStyle}
         contentInset={contentInset}

package/src/internal/useScrollHandler.ts

@@ -3,27 +3,41 @@ import type { SharedValue } from 'react-native-reanimated'
 import { runOnJS, useAnimatedScrollHandler, useSharedValue, withTiming } from 'react-native-reanimated'
 
 import { ScrollViewContext } from '../ScrollViewContext'
+import { REMOUNT_SYNC_TOLERANCE } from '../useScrollInit'
 
 type UseScrollHandlerOptions = {
+  capturedGeneration: SharedValue<number>
   chipHidden: SharedValue<number>
   chipThreshold?: number
   footerFixed: boolean
   headerFixed: boolean
   isHorizontal?: boolean
-  onPullSearchZoneEnter?: () => void
+  listGeneration: SharedValue<number>
+  onRemountSyncRetry?: (currentY: number) => void
+  onRemountSynced?: (y: number) => void
+  remountSyncTarget?: SharedValue<number | null>
 }
 
-export function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }: UseScrollHandlerOptions) {
+export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget }: 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 (remountSyncTarget && remountSyncTarget.value !== null) {
+          const target = remountSyncTarget.value
+          if (Math.abs(y - target) < REMOUNT_SYNC_TOLERANCE) {
+            remountSyncTarget.value = null
+            if (onRemountSynced) runOnJS(onRemountSynced)(y)
+          } else if (onRemountSyncRetry) {
+            runOnJS(onRemountSyncRetry)(y)
+          }
+          return
+        }
+        if (listGeneration.value !== capturedGeneration.value) return
         if (isHorizontal) {
           scrollPosition.value = x
           chipHidden.value = x < chipThreshold ? 1 : 0
@@ -39,13 +53,6 @@ export function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed,
         } 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) {
@@ -71,16 +78,9 @@ export function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed,
       },
       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
@@ -91,12 +91,10 @@ export function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed,
       },
       onMomentumEnd: () => {
         'worklet'
-        isMomentum.value = false
-        momentumPullSearchFired.value = false
         fromBottomBounce.value = false
         snapUpAccum.value = 0
       }
     },
-    [headerFixed, footerFixed, isHorizontal, chipThreshold, onPullSearchZoneEnter]
+    [capturedGeneration, headerFixed, footerFixed, isHorizontal, chipThreshold, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget]
   )
 }

package/src/internal/useScrollHandlerJS.ts

@@ -0,0 +1,141 @@
+import { type RefObject, useCallback, useContext, useRef } from 'react'
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
+import type { SharedValue } from 'react-native-reanimated'
+import { withTiming } from 'react-native-reanimated'
+
+import { ScrollViewContext } from '../ScrollViewContext'
+
+const REMOUNT_RETRY_TOLERANCE = 1
+const REMOUNT_RETRY_MAX_ATTEMPTS = 8
+
+type UseScrollHandlerJSOptions = {
+  capturedGeneration: RefObject<number>
+  chipHidden: SharedValue<number>
+  chipThreshold?: number
+  footerFixed: boolean
+  headerFixed: boolean
+  isHorizontal?: boolean
+  jsListGeneration: RefObject<number>
+  remountTarget?: number | null
+  scrollTo?: (offset: number, animated: boolean) => void
+}
+
+export type ScrollHandlerJS = {
+  onMomentumScrollBegin: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onMomentumScrollEnd: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollBeginDrag: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+}
+
+// Plain JS-thread scroll handler for a non-Animated scrollable. Reanimated shared values are
+// readable/writable from any thread, so driving them via a regular onScroll callback (rather than
+// a useAnimatedScrollHandler worklet, which requires an Animated-wrapped component to attach to at
+// the native level) works fine here — the header/footer animations just pick up the change on
+// their next UI-thread frame. This trades a small amount of latency for a plain scrollable that
+// reliably honors the initial `contentOffset` prop on (re)mount, which Animated.FlatList does not.
+export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, jsListGeneration, remountTarget = null, scrollTo }: UseScrollHandlerJSOptions): ScrollHandlerJS {
+  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const snapUpAccum = useRef(0)
+  const fromBottomBounce = useRef(false)
+  // On a remount, the very first native position after mount isn't reliable — Fabric can skip
+  // reapplying `contentOffset` when the target is numerically unchanged from before, and native
+  // scroll settling can overshoot or undershoot it. Rather than trust either the declarative prop
+  // or a single imperative scrollTo call, keep correcting (without hiding anything — content stays
+  // visible throughout) until an onScroll event actually confirms the intended resting position.
+  const pendingRemountTarget = useRef(remountTarget)
+  const remountAttempts = useRef(0)
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (jsListGeneration.current !== capturedGeneration.current) return
+      const {
+        contentOffset: { x, y },
+        contentSize: { height: contentHeight },
+        layoutMeasurement: { height: layoutHeight }
+      } = event.nativeEvent
+      if (pendingRemountTarget.current !== null) {
+        const target = pendingRemountTarget.current
+        if (Math.abs(y - target) < REMOUNT_RETRY_TOLERANCE) {
+          pendingRemountTarget.current = null
+        } else {
+          remountAttempts.current += 1
+          if (remountAttempts.current > REMOUNT_RETRY_MAX_ATTEMPTS) {
+            pendingRemountTarget.current = null
+          } else {
+            scrollTo?.(target, false)
+            return
+          }
+        }
+      }
+      if (isHorizontal) {
+        scrollPosition.value = x
+        chipHidden.value = x < chipThreshold ? 1 : 0
+        return
+      }
+      const delta = y - scrollPosition.value
+      scrollPosition.value = y
+      chipHidden.value = y < chipThreshold ? 1 : 0
+      const maxScroll = contentHeight - layoutHeight
+      if (maxScroll > 0 && y >= maxScroll) {
+        fromBottomBounce.current = true
+        snapUpAccum.current = 0
+      } else if (fromBottomBounce.current) {
+        fromBottomBounce.current = false
+      }
+      const snapHeader = snapBackHeaderShared.value && !headerFixed
+      const snapFooter = snapBackFooterShared.value && !footerFixed
+      if (snapHeader || snapFooter) {
+        if (y <= -headerHeightShared.value) {
+          snapUpAccum.current = 0
+          if (snapHeader) headerOffset.value = 0
+          if (snapFooter) footerOffset.value = 0
+        } else if (delta > 0) {
+          snapUpAccum.current = 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.current) {
+          if (y >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.current -= delta
+          if (snapUpAccum.current >= 10) {
+            snapUpAccum.current = 999
+            if (snapHeader) headerOffset.value = withTiming(0, { duration: 200 })
+            if (snapFooter) footerOffset.value = withTiming(0, { duration: 200 })
+          }
+        }
+      }
+    },
+    [capturedGeneration, chipHidden, chipThreshold, footerFixed, footerHeightShared, footerOffset, headerFixed, headerHeightShared, headerOffset, isHorizontal, jsListGeneration, pullSearchHeightShared, scrollPosition, scrollTo, snapBackFooterShared, snapBackHeaderShared]
+  )
+
+  const onScrollBeginDrag = useCallback(() => {
+    fromBottomBounce.current = false
+    snapUpAccum.current = 0
+  }, [])
+
+  const onMomentumScrollBegin = useCallback(() => {}, [])
+
+  const onScrollEndDrag = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (isHorizontal) return
+      const {
+        contentOffset: { y },
+        contentSize: { height: contentHeight },
+        layoutMeasurement: { height: layoutHeight }
+      } = event.nativeEvent
+      if (y >= contentHeight - layoutHeight - 10) {
+        fromBottomBounce.current = true
+        snapUpAccum.current = 0
+      }
+    },
+    [isHorizontal]
+  )
+
+  const onMomentumScrollEnd = useCallback(() => {
+    fromBottomBounce.current = false
+    snapUpAccum.current = 0
+  }, [])
+
+  return { onMomentumScrollBegin, onMomentumScrollEnd, onScroll, onScrollBeginDrag, onScrollEndDrag }
+}

package/src/internal/useScrollList.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect, useMemo, useState } 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'
@@ -29,15 +29,19 @@ export function useScrollList({ footerFixed: footerFixedProp, headerFixed: heade
     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])
+  // First render (headerHeight===0): flex:1, hidden until header measures so the key=0→1
+  // transition (and contentOffset change) never appears as a visible jump.
+  // After header measures: absoluteFill with correct contentOffset — then reveal.
+  const containerStyle = useMemo(() => (headerHeight === null ? [{ flex: 1, opacity: 0 }, 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])
+  const contentInset = useMemo(() => ({ bottom: (footerFixed ? footerHeight || insets.bottom : insets.bottom) + (keyboardAware ? keyboardHeight : 0), top: headerHeight ?? 0 }), [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])
+  // Use hideY offset only when this component mounted with headerHeight already known (mode switch).
+  // On initial load, headerHeight is null at mount so we start at showY and let useScrollInit
+  // call scrollTo after the phase transition. On mode switch, headerHeight is already set so we
+  // can position the FlatList at hideY atomically via contentOffset — no scrollTo needed.
+  const [startedWithHeader] = useState(headerHeight !== null)
+  const contentOffset = useMemo(() => ({ x: 0, y: headerHeight !== null ? -headerHeight + (startedWithHeader && !isHorizontal && pullSearchHeight ? pullSearchHeight : 0) : 0 }), [headerHeight, isHorizontal, pullSearchHeight, startedWithHeader])
 
   const chipHidden = useSharedValue(1)
   const chipStyle = useAnimatedStyle(() => {
@@ -46,12 +50,13 @@ export function useScrollList({ footerFixed: footerFixedProp, headerFixed: heade
       return {
         opacity: chipHidden.value ? withTiming(0) : withTiming(1),
         pointerEvents,
-        top: Math.max(headerHeight, insets.top) + 4,
+        top: Math.max(headerHeight ?? 0, 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
+    const h = headerHeight ?? 0
+    const slide = headerFixed ? 0 : snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value)
+    const top = Math.max(h - slide, insets.top) + 4
     return {
       opacity: chipHidden.value ? withTiming(0) : withTiming(1),
       pointerEvents,

package/src/redux/scrollViewSlice.ts

@@ -1,14 +1,22 @@
-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
-  }
-})
+// Hand-rolled slice — no @reduxjs/toolkit dependency. Action types and creator
+// behavior match the previous createSlice implementation exactly, so this works
+// with RTK stores, vanilla Redux, or any reducer-based state container.
+type PayloadAction<P> = { payload: P; type: string }
+
+const createAction = <P>(type: string) => {
+  const actionCreator = (payload: P): PayloadAction<P> => ({ payload, type })
+  actionCreator.type = type
+  actionCreator.match = (action: { type: string }): action is PayloadAction<P> => action.type === type
+  return actionCreator
+}
+
+const initialize = createAction<ScrollViewSettings>('scrollView/initialize')
+
+export const scrollViewActions = { initialize }
 
-export const scrollViewActions = slice.actions
-export const scrollViewReducer = slice.reducer
+export const scrollViewReducer = (state: ScrollViewSettings = defaultScrollViewSettings, action: { type: string }): ScrollViewSettings => {
+  if (initialize.match(action)) return action.payload
+  return state
+}