@rific/scroll-view 0.6.2 → 0.6.4

package/dist/index.js

@@ -1072,11 +1072,13 @@ var ScrollViewFooter = ({ children, style }) => {
   const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = (0, import_react13.useContext)(ScrollViewContext);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const keyboardHeight = useKeyboardInset();
+  const setFooterHeightRef = (0, import_react13.useRef)(setFooterHeight);
+  setFooterHeightRef.current = setFooterHeight;
   (0, import_react13.useEffect)(
     () => () => {
-      setFooterHeight(null);
+      setFooterHeightRef.current(null);
     },
-    [setFooterHeight]
+    []
   );
   const handleLayout = ({
     nativeEvent: {

package/dist/index.mjs

@@ -1005,7 +1005,7 @@ var ScrollView = memo3(ScrollViewInner);
 
 // src/ScrollViewFooter.tsx
 import { BlurView as BlurView2 } from "@rific/auto-paper";
-import { useContext as useContext10, useEffect as useEffect4 } from "react";
+import { useContext as useContext10, useEffect as useEffect4, useRef as useRef7 } from "react";
 import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
 import Animated5, { useAnimatedStyle as useAnimatedStyle4 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
@@ -1014,11 +1014,13 @@ var ScrollViewFooter = ({ children, style }) => {
   const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext10(ScrollViewContext);
   const insets = useSafeAreaInsets3();
   const keyboardHeight = useKeyboardInset();
+  const setFooterHeightRef = useRef7(setFooterHeight);
+  setFooterHeightRef.current = setFooterHeight;
   useEffect4(
     () => () => {
-      setFooterHeight(null);
+      setFooterHeightRef.current(null);
     },
-    [setFooterHeight]
+    []
   );
   const handleLayout = ({
     nativeEvent: {
@@ -1153,7 +1155,7 @@ var styles7 = StyleSheet6.create({
 
 // src/ScrollViewProvider.tsx
 import { useBlur } from "@rific/auto-paper";
-import { useCallback as useCallback7, useContext as useContext12, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback7, useContext as useContext12, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef8, useState as useState5 } from "react";
 import { Dimensions as Dimensions3 } from "react-native";
 import { useSharedValue as useSharedValue7 } from "react-native-reanimated";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -1169,7 +1171,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const [progressing, setProgressing] = useState5(false);
   const scrollPosition = useSharedValue7(0);
   const listGeneration = useSharedValue7(0);
-  const jsListGeneration = useRef7(0);
+  const jsListGeneration = useRef8(0);
   const headerHeightShared = useSharedValue7(0);
   const footerHeightShared = useSharedValue7(0);
   const headerOffset = useSharedValue7(0);
@@ -1240,13 +1242,13 @@ var ScrollViewSettingsProvider = ({ children, onChange, initialValue }) => {
 };
 
 // src/SectionList.tsx
-import { memo as memo4, useCallback as useCallback10, useContext as useContext14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect6, useMemo as useMemo7, useRef as useRef9 } from "react";
+import { memo as memo4, useCallback as useCallback10, useContext as useContext14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect6, useMemo as useMemo7, useRef as useRef10 } from "react";
 import { Dimensions as Dimensions4, Platform as Platform5, SectionList as RNSectionList, View as View7 } from "react-native";
 import { Gesture as Gesture4, GestureDetector as GestureDetector4 } from "react-native-gesture-handler";
 import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue9 } from "react-native-reanimated";
 
 // src/internal/useStickyHeaders.ts
-import { useCallback as useCallback9, useContext as useContext13, useLayoutEffect as useLayoutEffect5, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback9, useContext as useContext13, useLayoutEffect as useLayoutEffect5, useRef as useRef9, useState as useState7 } from "react";
 import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue8 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
 function useStickyHeaders(headerFixed, enabled) {
@@ -1259,8 +1261,8 @@ function useStickyHeaders(headerFixed, enabled) {
   useLayoutEffect5(() => {
     contentIndexShared.value = activeIndex;
   }, [activeIndex, contentIndexShared]);
-  const positionsCache = useRef8([]);
-  const heightsCache = useRef8([]);
+  const positionsCache = useRef9([]);
+  const heightsCache = useRef9([]);
   useAnimatedReaction2(
     () => {
       if (!enabled) return -1;
@@ -1363,7 +1365,7 @@ function useStickyHeaders(headerFixed, enabled) {
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var AnimatedSectionList = Animated7.createAnimatedComponent(RNSectionList);
 var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
-  const scrollView = useRef9(null);
+  const scrollView = useRef10(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured: true, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = useContext14(ScrollViewContext);
@@ -1384,7 +1386,7 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
   useLayoutEffect6(() => {
     if (usesCustomSticky) resetPositions(sections.length);
   }, [sections, usesCustomSticky, resetPositions, headerHeight]);
-  const sectionViewRefs = useRef9(/* @__PURE__ */ new Map());
+  const sectionViewRefs = useRef10(/* @__PURE__ */ new Map());
   const wrappedRenderSectionHeader = useMemo7(() => {
     if (!usesCustomSticky) return renderSectionHeader ?? void 0;
     return (info) => {
@@ -1433,7 +1435,7 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
       renderFilters
     ] });
   }, [pullSearchHeader, renderFilters]);
-  const pullSearchSettled = useRef9(false);
+  const pullSearchSettled = useRef10(false);
   useEffect6(() => {
     if (!usesCustomSticky || activeListHeader == null || pullSearchSettled.current) return;
     pullSearchSettled.current = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.12.0",
-    "@rific/auto-paper": "^0.8.0",
+    "@rific/auto-paper": "^0.9.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -93,7 +93,7 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "@rific/auto-paper": "^0.8.0",
+    "@rific/auto-paper": "^0.9.2",
     "react": ">=19.0.0",
     "react-native": ">=0.83.0",
     "react-native-gesture-handler": ">=2.0.0 <3.0.0",

package/src/ScrollViewFooter.tsx

@@ -1,5 +1,5 @@
 import { BlurView } from '@rific/auto-paper'
-import { type ReactNode, useContext, useEffect } from 'react'
+import { type ReactNode, useContext, useEffect, useRef } 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'
@@ -16,11 +16,21 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
   const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext(ScrollViewContext)
   const insets = useSafeAreaInsets()
   const keyboardHeight = useKeyboardInset()
+  // setFooterHeight's own identity changes on every real measurement (ScrollViewProvider's
+  // useCallback closes over `footerHeight` itself, so setting it recreates the callback). Depending
+  // on it directly here re-ran this effect on every measurement too — tearing down the PREVIOUS
+  // closure as a "cleanup" and calling ITS setFooterHeight(null) right after the real height had
+  // just been set, permanently clobbering it back to null with no further layout event left to
+  // recover it (the DOM node's true size never changed, so onLayout never fires again). Reading
+  // through a ref sidesteps that: the effect itself only ever runs once, on mount/unmount, so its
+  // cleanup fires exactly when it's meant to (a real unmount) rather than after every measurement.
+  const setFooterHeightRef = useRef(setFooterHeight)
+  setFooterHeightRef.current = setFooterHeight
   useEffect(
     () => () => {
-      setFooterHeight(null)
+      setFooterHeightRef.current(null)
     },
-    [setFooterHeight]
+    []
   )
   const handleLayout = ({
     nativeEvent: {