@rific/scroll-view 0.6.7 → 0.7.1

package/README.md

@@ -150,6 +150,7 @@ Drop-in for React Native's `FlatList`. Accepts all `FlatListProps<T>` plus:
 | `onRefresh` | `() => Promise<void> \| void` | Enables pull-to-refresh |
 | `pullSearchHeight` | `number` | Reserve space above content for `PullSearch` |
 | `ref` | `RefObject<RNFlatList>` | Forward ref to the underlying list |
+| `refreshing` | `boolean` | Controlled refreshing state |
 | `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
 
 Performance props are user-overridable with sensible defaults:
@@ -194,6 +195,7 @@ import { CustomList } from '@rific/scroll-view'
 | `keyboardAware` | `boolean` | Add keyboard height to bottom content inset |
 | `onRefresh` | `() => Promise<void> \| void` | Enables pull-to-refresh |
 | `pullSearchHeight` | `number` | Reserve space above content for `PullSearch` |
+| `refreshing` | `boolean` | Controlled refreshing state |
 | `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
 | `scrollRef` | `RefObject<{ scrollToOffset }>` | Forward ref to the underlying list |
 

package/dist/index.d.mts

@@ -31,10 +31,11 @@ type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     pullSearchHeight?: number;
+    refreshing?: boolean;
     scrollRef?: RefObject<ScrollToOffsetRef | null>;
     style?: StyleProp<ViewStyle>;
 };
-declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
+declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
 declare const CustomList: typeof CustomListInner;
 
 type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
@@ -52,8 +53,9 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     pullSearchHeight?: number;
     ref?: RefObject<FlatList$1 | null>;
+    refreshing?: boolean;
 };
-declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
+declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, refreshing, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
 declare const FlatList: typeof FlatListInner;
 
 type PullSearchHandle = {

package/dist/index.d.ts

@@ -31,10 +31,11 @@ type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     pullSearchHeight?: number;
+    refreshing?: boolean;
     scrollRef?: RefObject<ScrollToOffsetRef | null>;
     style?: StyleProp<ViewStyle>;
 };
-declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
+declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
 declare const CustomList: typeof CustomListInner;
 
 type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
@@ -52,8 +53,9 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     pullSearchHeight?: number;
     ref?: RefObject<FlatList$1 | null>;
+    refreshing?: boolean;
 };
-declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
+declare const FlatListInner: <T>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, keyExtractor, maxToRenderPerBatch, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, refreshing, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
 declare const FlatList: typeof FlatListInner;
 
 type PullSearchHandle = {

package/dist/index.js

@@ -474,7 +474,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
 
 // src/CustomList.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
+var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, scrollRef, style, ...props }) => {
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = (0, import_react6.useContext)(ScrollViewContext);
@@ -535,7 +535,7 @@ var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilter
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollViewInternal.current?.scrollToOffset({ offset, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const refreshControl = (0, import_react6.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RefreshControl, {}), []);
+  const refreshControl = (0, import_react6.useMemo)(() => onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RefreshControl, {}), [onRefresh, refreshing]);
   const nativeGesture = (0, import_react6.useMemo)(() => import_react_native_gesture_handler.Gesture.Native(), []);
   const combinedGesture = (0, import_react6.useMemo)(() => gesture !== void 0 ? import_react_native_gesture_handler.Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
@@ -729,7 +729,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
 
 // src/FlatList.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
+var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, refreshing, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = (0, import_react9.useRef)(null);
   const isHorizontal = horizontal === true;
   const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1;
@@ -828,7 +828,7 @@ var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentCont
     },
     [onContentSizeChange]
   );
-  const refreshControl = (0, import_react9.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefreshControl, {}), []);
+  const refreshControl = (0, import_react9.useMemo)(() => onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RefreshControl, {}), [onRefresh, refreshing]);
   const nativeGesture = (0, import_react9.useMemo)(() => import_react_native_gesture_handler2.Gesture.Native(), []);
   const combinedGesture = (0, import_react9.useMemo)(() => gesture !== void 0 ? import_react_native_gesture_handler2.Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
@@ -1193,11 +1193,11 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
 };
 var styles7 = import_react_native12.StyleSheet.create({
   actionBg: { borderRadius: 100, overflow: "hidden" },
-  divider: { bottom: 0, height: import_react_native12.StyleSheet.hairlineWidth, left: 0, position: "absolute", right: 0 },
-  caption: { fontSize: 12, fontWeight: "400", textAlign: "center" },
-  content: { alignItems: "center", flexDirection: "row", width: "100%" },
   blur: { left: 0, overflow: "hidden", position: "absolute", right: 0, top: 0, zIndex: 2 },
   blurInner: { left: 0, position: "absolute", right: 0, top: 0 },
+  caption: { fontSize: 12, fontWeight: "400", textAlign: "center" },
+  content: { alignItems: "center", flexDirection: "row", width: "100%" },
+  divider: { bottom: 0, height: import_react_native12.StyleSheet.hairlineWidth, left: 0, position: "absolute", right: 0 },
   header: { left: 0, overflow: "hidden", position: "absolute", right: 0, top: 0, zIndex: 2 },
   headerInit: { left: 0, overflow: "hidden", right: 0, zIndex: 2 },
   progress: { left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -1258,6 +1258,17 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
     }, 3e3);
     return () => clearTimeout(timeout);
   }, [headerHeight]);
+  (0, import_react15.useEffect)(() => {
+    if (import_react_native13.Platform.OS !== "web" || headerHeight !== null) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setHeaderHeight(0));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [headerHeight, setHeaderHeight]);
   const setFooterHeight = (0, import_react15.useCallback)(
     (h) => {
       if (h === 0 && footerHeight) return;

package/dist/index.mjs

@@ -422,7 +422,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
 
 // src/CustomList.tsx
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
-var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
+var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, scrollRef, style, ...props }) => {
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = useContext4(ScrollViewContext);
@@ -483,7 +483,7 @@ var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilter
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollViewInternal.current?.scrollToOffset({ offset, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const refreshControl = useMemo2(() => /* @__PURE__ */ jsx3(RefreshControl, {}), []);
+  const refreshControl = useMemo2(() => onRefresh ? /* @__PURE__ */ jsx3(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ jsx3(RefreshControl, {}), [onRefresh, refreshing]);
   const nativeGesture = useMemo2(() => Gesture.Native(), []);
   const combinedGesture = useMemo2(() => gesture !== void 0 ? Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
@@ -677,7 +677,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
 
 // src/FlatList.tsx
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
+var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, refreshing, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = useRef4(null);
   const isHorizontal = horizontal === true;
   const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1;
@@ -776,7 +776,7 @@ var FlatListInner = ({ chipProps, chipThreshold, columnWrapperStyle, contentCont
     },
     [onContentSizeChange]
   );
-  const refreshControl = useMemo3(() => /* @__PURE__ */ jsx5(RefreshControl, {}), []);
+  const refreshControl = useMemo3(() => onRefresh ? /* @__PURE__ */ jsx5(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ jsx5(RefreshControl, {}), [onRefresh, refreshing]);
   const nativeGesture = useMemo3(() => Gesture2.Native(), []);
   const combinedGesture = useMemo3(() => gesture !== void 0 ? Gesture2.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
@@ -1141,11 +1141,11 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
 };
 var styles7 = StyleSheet6.create({
   actionBg: { borderRadius: 100, overflow: "hidden" },
-  divider: { bottom: 0, height: StyleSheet6.hairlineWidth, left: 0, position: "absolute", right: 0 },
-  caption: { fontSize: 12, fontWeight: "400", textAlign: "center" },
-  content: { alignItems: "center", flexDirection: "row", width: "100%" },
   blur: { left: 0, overflow: "hidden", position: "absolute", right: 0, top: 0, zIndex: 2 },
   blurInner: { left: 0, position: "absolute", right: 0, top: 0 },
+  caption: { fontSize: 12, fontWeight: "400", textAlign: "center" },
+  content: { alignItems: "center", flexDirection: "row", width: "100%" },
+  divider: { bottom: 0, height: StyleSheet6.hairlineWidth, left: 0, position: "absolute", right: 0 },
   header: { left: 0, overflow: "hidden", position: "absolute", right: 0, top: 0, zIndex: 2 },
   headerInit: { left: 0, overflow: "hidden", right: 0, zIndex: 2 },
   progress: { left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -1158,7 +1158,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 useRef8, useState as useState5 } from "react";
-import { Dimensions as Dimensions3 } from "react-native";
+import { Dimensions as Dimensions3, Platform as Platform5 } from "react-native";
 import { useSharedValue as useSharedValue7 } from "react-native-reanimated";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
@@ -1206,6 +1206,17 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
     }, 3e3);
     return () => clearTimeout(timeout);
   }, [headerHeight]);
+  useEffect5(() => {
+    if (Platform5.OS !== "web" || headerHeight !== null) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setHeaderHeight(0));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [headerHeight, setHeaderHeight]);
   const setFooterHeight = useCallback7(
     (h) => {
       if (h === 0 && footerHeight) return;
@@ -1245,7 +1256,7 @@ 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 useRef10 } from "react";
-import { Dimensions as Dimensions4, Platform as Platform5, SectionList as RNSectionList, View as View7 } from "react-native";
+import { Dimensions as Dimensions4, Platform as Platform6, 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";
 
@@ -1374,7 +1385,7 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
   const capturedGeneration = useSharedValue9(-1);
   useLayoutEffect6(() => {
     const generation = listGeneration.value;
-    if (Platform5.OS === "web") {
+    if (Platform6.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.6.7",
+  "version": "0.7.1",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",
@@ -61,9 +61,9 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
-    "@infinitetoken/jest-config": "^0.2.0",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/eslint-config": "0.2.0",
+    "@infinitetoken/jest-config": "^0.3.0",
+    "@infinitetoken/tsconfig": "^0.4.1",
     "@reduxjs/toolkit": "^2.12.0",
     "@rific/auto-paper": "^0.10.3",
     "@testing-library/dom": "^10.4.1",

package/src/CustomList.tsx

@@ -27,11 +27,12 @@ export type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'conten
   onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   pullSearchHeight?: number
+  refreshing?: boolean
   scrollRef?: RefObject<ScrollToOffsetRef | null>
   style?: StyleProp<ViewStyle>
 }
 
-const CustomListInner = <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => {
+const CustomListInner = <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, 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>
 
@@ -123,7 +124,7 @@ const CustomListInner = <P extends object>({ chipProps, chipThreshold, component
     scrollViewInternal.current?.scrollToOffset({ offset, animated: true })
   }, [contentInset.top, pullSearchHeight])
 
-  const refreshControl = useMemo(() => <RefreshControl />, [])
+  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

package/src/FlatList.tsx

@@ -25,9 +25,10 @@ export type FlatListProps<T> = Omit<RNFlatListProps<T>, 'onRefresh' | 'refreshin
   onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   pullSearchHeight?: number
   ref?: RefObject<RNFlatList | null>
+  refreshing?: boolean
 }
 
-const FlatListInner = <T,>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }: FlatListProps<T>) => {
+const FlatListInner = <T,>({ chipProps, chipThreshold, columnWrapperStyle, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, keyExtractor, maxToRenderPerBatch = 50, numColumns, renderFilters, renderItem, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, refreshing, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }: FlatListProps<T>) => {
   // Plain (non-Animated) FlatList: react-native-reanimated's Animated.FlatList does not reliably
   // honor the initial `contentOffset` prop on a key-forced remount — the header/list can briefly
   // render at the wrong position. A plain FlatList honors it correctly, so scroll position is driven
@@ -164,7 +165,7 @@ const FlatListInner = <T,>({ chipProps, chipThreshold, columnWrapperStyle, conte
     [onContentSizeChange]
   )
 
-  const refreshControl = useMemo(() => <RefreshControl />, [])
+  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

package/src/ScrollViewHeader.tsx

@@ -180,11 +180,11 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
 
 const styles = StyleSheet.create({
   actionBg: { borderRadius: 100, overflow: 'hidden' },
-  divider: { bottom: 0, height: StyleSheet.hairlineWidth, left: 0, position: 'absolute', right: 0 },
-  caption: { fontSize: 12, fontWeight: '400', textAlign: 'center' },
-  content: { alignItems: 'center', flexDirection: 'row', width: '100%' },
   blur: { left: 0, overflow: 'hidden', position: 'absolute', right: 0, top: 0, zIndex: 2 },
   blurInner: { left: 0, position: 'absolute', right: 0, top: 0 },
+  caption: { fontSize: 12, fontWeight: '400', textAlign: 'center' },
+  content: { alignItems: 'center', flexDirection: 'row', width: '100%' },
+  divider: { bottom: 0, height: StyleSheet.hairlineWidth, left: 0, position: 'absolute', right: 0 },
   header: { left: 0, overflow: 'hidden', position: 'absolute', right: 0, top: 0, zIndex: 2 },
   headerInit: { left: 0, overflow: 'hidden', right: 0, zIndex: 2 },
   progress: { left: 0, position: 'absolute', right: 0, zIndex: 3 },

package/src/ScrollViewProvider.tsx

@@ -1,6 +1,6 @@
 import { useBlur } from '@rific/auto-paper'
 import { type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
 
 import { ScrollViewContext } from './ScrollViewContext'
@@ -70,6 +70,25 @@ export const ScrollViewProvider = ({ blur, children, fixed = false, footerAboveK
     }, 3000)
     return () => clearTimeout(timeout)
   }, [headerHeight])
+  // Web-only recovery for a real race: a header's ResizeObserver-backed onLayout can simply never
+  // fire on the very first mount through Expo Router (observed in practice, not just theorized —
+  // content stuck at opacity: 0 indefinitely, with no error, only escaping via an unrelated resize
+  // forcing a fresh layout pass). Native RN doesn't have this race — onLayout is reliable there, and
+  // a persistently-null headerHeight really does mean "no header was ever rendered," which the
+  // warning above should keep flagging. On web, give a real first layout two frames to arrive before
+  // assuming there isn't one; setHeaderHeight(0) is exactly what a genuinely header-less screen would
+  // report anyway, so this is indistinguishable from that case once it fires.
+  useEffect(() => {
+    if (Platform.OS !== 'web' || headerHeight !== null) return
+    let raf2 = 0
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setHeaderHeight(0))
+    })
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+    }
+  }, [headerHeight, setHeaderHeight])
   const setFooterHeight = useCallback(
     (h: number | null) => {
       // Same race setHeaderHeight guards against, on the footer side: react-native-screens' web