@rific/scroll-view 0.6.3 → 0.6.5

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: {
@@ -1094,9 +1096,10 @@ var ScrollViewFooter = ({ children, style }) => {
   }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
+  const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
     (footerHeight ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
   ] });
 };
 var styles6 = import_react_native11.StyleSheet.create({

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: {
@@ -1036,6 +1038,7 @@ var ScrollViewFooter = ({ children, style }) => {
   }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
+  const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {};
   return (
     // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
     // tab bar (a fixture outside this package's header/footer concepts entirely, same as
@@ -1043,7 +1046,7 @@ var ScrollViewFooter = ({ children, style }) => {
     // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
     /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
       (footerHeight ?? 0) > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
-      /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
+      /* @__PURE__ */ jsx8(View5, { style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
     ] })
   );
 };
@@ -1153,7 +1156,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 +1172,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 +1243,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 +1262,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 +1366,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 +1387,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 +1436,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.3",
+  "version": "0.6.5",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",

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: {
@@ -65,6 +75,12 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
   // padding's growth cancel out exactly, so the content holds still at the safe-area line instead
   // of dropping past it and correcting back up.
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom
+  // A consumer's own `style.paddingBottom` (e.g. tightening the row's vertical rhythm to match a
+  // header's actionMargin) is spread after rowPaddingBottom below, so it has to be added to it
+  // rather than assigned after it — plain style-array merge would otherwise let it silently
+  // replace the safe-area clearance instead of sitting on top of it, leaving the row's real
+  // content (buttons, etc.) flush against the home indicator.
+  const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {}
   return (
     // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
     // tab bar (a fixture outside this package's header/footer concepts entirely, same as
@@ -72,7 +88,7 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
     // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
     <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle]}>
       {(footerHeight ?? 0) > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
-      <View style={[styles.row, { paddingBottom: rowPaddingBottom }, style]}>{children}</View>
+      <View style={[styles.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === 'number' ? consumerPaddingBottom : 0) }]}>{children}</View>
     </Animated.View>
   )
 }