@rific/scroll-view 0.7.0 → 0.7.1

package/dist/index.js

@@ -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

@@ -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.7.0",
+  "version": "0.7.1",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",

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