react-native-header-motion 0.2.0 → 1.0.0-alpha.0

package/README.md

@@ -8,6 +8,19 @@ This library is **100% a wrapper around Reanimated**. All the credit for the und
 <img src="https://github.com/user-attachments/assets/b673349a-f26a-4cc8-bfe1-60d77deb4390" width="70%" />
 </div>
 
+## v1 alpha status
+
+`v1.0.0-alpha.x` is pre-release quality.
+
+- Expect additional API changes (including breaking ones) before stable `1.0.0`.
+- If you are upgrading from `0.3.x`, use the migration doc: [MIGRATION-v1.md](./MIGRATION-v1.md).
+
+## What changed since `v0.3.0`
+
+- **Performance-focused internals:** motion threshold + header height now flow through `SharedValue`s to reduce JS-side churn.
+- **Pannable header support:** new `enableHeaderPan` on `HeaderMotion` and required `animatedHeaderBaseProps` on `AnimatedHeaderBase`.
+- **Ecosystem update:** example app moved to Expo 55 + Reanimated 4.2; `react-native-gesture-handler` is now a peer dependency.
+
 ## What this is (and isn’t)
 
 **✅ This is**
@@ -25,6 +38,7 @@ You build any header motion you want by animating based on `progress`.
 
 You must have these installed in your app:
 
+- `react-native-gesture-handler` **>= 2.0.0**
 - `react-native-reanimated` **>= 4.0.0**
 - `react-native-worklets` **>= 0.4.0**
 
@@ -57,17 +71,20 @@ There are three key concepts:
 - `0` → animation start (initial state)
 - `1` → animation end (final state)
 
-### 2) `progressThreshold`
+### 2) `progressThreshold` (prop vs runtime value)
 
 `progressThreshold` is the distance needed for `progress` to move from `0 → 1`.
 
-You can provide it as:
+As a `HeaderMotion` prop, you can provide:
 
 - a number, or
 - a function `(measuredDynamic) => threshold`
 
 If you provide a function, it uses the value measured by `measureDynamic`.
 
+When you read `progressThreshold` from `useMotionProgress()` / `HeaderMotion.Header`, it is a `SharedValue<number>`.
+Read it inside worklets via `progressThreshold.get()` (or `progressThreshold.value`).
+
 ### 3) Measurement functions
 
 The library gives you two measurement callbacks that you pass to your header layout:
@@ -163,14 +180,16 @@ function MyHeader({
   measureTotalHeight,
   measureDynamic,
   progressThreshold,
+  animatedHeaderBaseProps,
 }: WithCollapsibleHeaderProps) {
   const insets = useSafeAreaInsets();
 
   const containerStyle = useAnimatedStyle(() => {
+    const threshold = progressThreshold.get();
     const translateY = interpolate(
-      progress.value,
+      progress.get(),
       [0, 1],
-      [0, -progressThreshold],
+      [0, -threshold],
       Extrapolation.CLAMP
     );
     return { transform: [{ translateY }] };
@@ -178,6 +197,7 @@ function MyHeader({
 
   return (
     <AnimatedHeaderBase
+      animatedHeaderBaseProps={animatedHeaderBaseProps}
       onLayout={measureTotalHeight}
       style={[{ paddingTop: insets.top }, containerStyle]}
     >
@@ -209,6 +229,7 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { View } from 'react-native';
 
 export function MyScreen() {
@@ -245,14 +266,16 @@ function MyHeader({
   measureTotalHeight,
   measureDynamic,
   progressThreshold,
+  animatedHeaderBaseProps,
 }: WithCollapsibleHeaderProps) {
   const insets = useSafeAreaInsets();
 
   const containerStyle = useAnimatedStyle(() => {
+    const threshold = progressThreshold.get();
     const translateY = interpolate(
-      progress.value,
+      progress.get(),
       [0, 1],
-      [0, -progressThreshold],
+      [0, -threshold],
       Extrapolation.CLAMP
     );
     return { transform: [{ translateY }] };
@@ -260,6 +283,7 @@ function MyHeader({
 
   return (
     <AnimatedHeaderBase
+      animatedHeaderBaseProps={animatedHeaderBaseProps}
       onLayout={measureTotalHeight}
       style={[{ paddingTop: insets.top }, containerStyle]}
     >
@@ -323,21 +347,31 @@ export default function Screen() {
 }
 
 function InlineAnimatedHeader() {
-  const { progress, measureTotalHeight, measureDynamic, progressThreshold } =
-    useMotionProgress();
+  const {
+    progress,
+    measureTotalHeight,
+    measureDynamic,
+    progressThreshold,
+    animatedHeaderBaseProps,
+  } = useMotionProgress();
 
   const containerStyle = useAnimatedStyle(() => {
+    const threshold = progressThreshold.get();
     const translateY = interpolate(
-      progress.value,
+      progress.get(),
       [0, 1],
-      [0, -progressThreshold],
+      [0, -threshold],
       Extrapolation.CLAMP
     );
     return { transform: [{ translateY }] };
   });
 
   return (
-    <AnimatedHeaderBase onLayout={measureTotalHeight} style={containerStyle}>
+    <AnimatedHeaderBase
+      animatedHeaderBaseProps={animatedHeaderBaseProps}
+      onLayout={measureTotalHeight}
+      style={containerStyle}
+    >
       <Animated.View onLayout={measureDynamic}>
         {/* custom animated header content below the native header */}
       </Animated.View>
@@ -374,6 +408,8 @@ The package exports a default compound component plus hooks, types, and a couple
   - Enables multi-scroll orchestration (tabs/pager).
 - `progressExtrapolation?: ExtrapolationType`
   - Controls how progress behaves outside the threshold range (useful for overscroll).
+- `enableHeaderPan?: boolean`
+  - Enables direct pan gestures on `AnimatedHeaderBase` (`false` by default).
 
 #### `HeaderMotion.Header`
 
@@ -407,19 +443,61 @@ Supports `scrollId?: string` for multi-scroll scenarios.
 
 Render-prop API for custom scrollables (pager pages, 3rd party lists, etc.).
 
+If you use `HeaderMotion.ScrollManager` directly for custom integrations, pass refresh-related props to `ScrollManager` (instead of your inner scrollable):
+
+- `refreshControl`
+- `refreshing`
+- `onRefresh`
+- optional `progressViewOffset` if you want to force your offset.
+
+This is required, as the positioning of scrollables is affecting Refresh Control and has to be coupled with the header heights.
+
 ```tsx
 <HeaderMotion.ScrollManager scrollId="A">
   {(
     scrollableProps,
     { originalHeaderHeight, minHeightContentContainerStyle }
+  ) => (
+    <Animated.ScrollView {...scrollableProps}>
+      <Animated.View
+        style={[
+          minHeightContentContainerStyle,
+          { paddingTop: originalHeaderHeight },
+        ]}
+      >
+        {/* content */}
+      </Animated.View>
+    </Animated.ScrollView>
+  )}
+</HeaderMotion.ScrollManager>
+```
+
+Refresh example with explicit props on `ScrollManager`:
+
+```tsx
+<HeaderMotion.ScrollManager
+  scrollId="A"
+  refreshing={refreshing}
+  onRefresh={onRefresh}
+>
+  {(
+    { onScroll, refreshControl: managedRefreshControl, ...scrollableProps },
+    { originalHeaderHeight, minHeightContentContainerStyle }
   ) => (
     <Animated.ScrollView
       {...scrollableProps}
-      contentContainerStyle={[
-        minHeightContentContainerStyle,
-        { paddingTop: originalHeaderHeight },
-      ]}
-    />
+      onScroll={onScroll}
+      refreshControl={managedRefreshControl}
+    >
+      <Animated.View
+        style={[
+          minHeightContentContainerStyle,
+          { paddingTop: originalHeaderHeight },
+        ]}
+      >
+        {/* content */}
+      </Animated.View>
+    </Animated.ScrollView>
   )}
 </HeaderMotion.ScrollManager>
 ```
@@ -431,9 +509,11 @@ Render-prop API for custom scrollables (pager pages, 3rd party lists, etc.).
 Returns:
 
 - `progress` (`SharedValue<number>`)
-- `progressThreshold` (`number`)
+- `progressThreshold` (`SharedValue<number>`)
 - `measureTotalHeight` (`onLayout` callback)
 - `measureDynamic` (`onLayout` callback)
+- `animatedHeaderBaseProps` (required by `AnimatedHeaderBase`)
+- `activeScrollId` (`SharedValue<string> | undefined`)
 
 Only use inside the `HeaderMotion` provider tree.
 
@@ -443,7 +523,7 @@ Lower-level orchestration hook that powers the component APIs. Returns:
 
 - `scrollableProps`: `{ onScroll, scrollEventThrottle, ref }`
 - `headerMotionContext`:
-  - `originalHeaderHeight`
+  - `originalHeaderHeight` (`SharedValue<number>`)
   - `minHeightContentContainerStyle` (helps when content is shorter than the threshold)
 
 #### `useActiveScrollId(initialId)`
@@ -464,11 +544,39 @@ Non-animated absolutely positioned header base.
 
 Reanimated-powered, absolutely positioned header base.
 
+- Requires `animatedHeaderBaseProps` from `useMotionProgress()` / `HeaderMotion.Header`.
+- It is required for header panning functionality.
+- Optional `withGestureHandlerRootView` can wrap this header in `GestureHandlerRootView` when needed.
+
 ### Types
 
 - `WithCollapsibleHeaderProps` – convenience type for headers using motion progress props.
 - `WithCollapsiblePagedHeaderProps` – like above, plus `activeTab` and `onTabChange`.
 
+## Additional notes
+
+### Refresh Control (v.0.3.0+)
+
+Refresh control support was improved in `v0.3.0+`.
+
+- If you use `HeaderMotion.ScrollView` or `HeaderMotion.FlatList`, your refresh-control usage stays the same as in React Native.
+- If you use `HeaderMotion.ScrollManager` directly for custom integrations, pass refresh-related props to `ScrollManager`:
+  - `refreshControl`
+  - `refreshing`
+  - `onRefresh`
+  - optional `progressViewOffset`
+
+This is important because scrollable positioning affects refresh-control behavior and needs to stay coupled with measured header height.
+
+#### Platform support note:
+
+- Support for Refresh Control is currently partial.
+- Android works well with the current implementation.
+- iOS behavior is still not fully deterministic.
+- `progressViewOffset` does not seem to be reliable on iOS in all scenarios.
+- Other iOS approaches tried so far introduced different issues.
+- Additional iOS support improvements are planned for future releases.
+
 ## Contributing
 
 - Development workflow: see [CONTRIBUTING.md](CONTRIBUTING.md)

package/lib/module/components/FlatList.js

@@ -30,8 +30,14 @@ export function HeaderMotionFlatList({
   return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
     scrollId: scrollId,
     animatedRef: animatedRef,
+    refreshControl: props.refreshControl,
+    refreshing: props.refreshing,
+    onRefresh: props.onRefresh,
+    progressViewOffset: props.progressViewOffset,
     children: ({
       onScroll,
+      refreshControl: managedRefreshControl,
+      ref,
       ...scrollViewProps
     }, {
       originalHeaderHeight,
@@ -39,9 +45,13 @@ export function HeaderMotionFlatList({
     }) => /*#__PURE__*/_jsx(Animated.FlatList, {
       ...scrollViewProps,
       ...props,
+      ref: ref,
       onScroll: onScroll,
-      renderScrollComponent: propsz => /*#__PURE__*/_jsx(AnimatedScrollContainer, {
-        ...propsz,
+      ...(managedRefreshControl && {
+        refreshControl: managedRefreshControl
+      }),
+      renderScrollComponent: scrollComponentProps => /*#__PURE__*/_jsx(AnimatedScrollContainer, {
+        ...scrollComponentProps,
         contentContainerStyle: [minHeightContentContainerStyle, {
           paddingTop: originalHeaderHeight
         }, contentContainerStyle]

package/lib/module/components/FlatList.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","animatedRef","contentContainerStyle","props","children","onScroll","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","FlatList","renderScrollComponent","propsz","AnimatedScrollContainer","paddingTop","rest","ref","ScrollView","View","style"],"sourceRoot":"../../../src","sources":["components/FlatList.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAgD,OAAO;AAC1E,OAAOC,QAAQ,MAA4B,yBAAyB;AACpE,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAqB5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAU;EAC5CC,QAAQ;EACRC,WAAW;EACXC,qBAAqB;EACrB,GAAGC;AACyB,CAAC,EAAE;EAC/B,oBACEL,IAAA,CAACF,yBAAyB;IAACI,QAAQ,EAAEA,QAAS;IAACC,WAAW,EAAEA,WAAY;IAAAG,QAAA,EACrEA,CACC;MAAEC,QAAQ;MAAE,GAAGC;IAAgB,CAAC,EAChC;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDV,IAAA,CAACH,QAAQ,CAACc,QAAQ;MAAA,GACZH,eAAe;MAAA,GACfH,KAAK;MACTE,QAAQ,EAAEA,QAAS;MACnBK,qBAAqB,EAAGC,MAAM,iBAC5Bb,IAAA,CAACc,uBAAuB;QAAA,GAClBD,MAAM;QACVT,qBAAqB,EAAE,CACrBM,8BAA8B,EAC9B;UAAEK,UAAU,EAAEN;QAAqB,CAAC,EACpCL,qBAAqB;MACrB,CACH;IACD,CACH;EACF,CACwB,CAAC;AAEhC;AAEA,MAAMU,uBAAuB,gBAAGlB,UAAU,CAGxC,CAAC;EAAEU,QAAQ;EAAEF,qBAAqB;EAAE,GAAGY;AAAK,CAAC,EAAEC,GAAG,KAAK;EACvD,oBACEjB,IAAA,CAACH,QAAQ,CAACqB,UAAU;IAAA,GAAKF,IAAI;IAAEC,GAAG,EAAEA,GAAI;IAAAX,QAAA,eACtCN,IAAA,CAACH,QAAQ,CAACsB,IAAI;MAACC,KAAK,EAAEhB,qBAAsB;MAAAE,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CACpD,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","animatedRef","contentContainerStyle","props","refreshControl","refreshing","onRefresh","progressViewOffset","children","onScroll","managedRefreshControl","ref","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","FlatList","renderScrollComponent","scrollComponentProps","AnimatedScrollContainer","paddingTop","rest","ScrollView","View","style"],"sourceRoot":"../../../src","sources":["components/FlatList.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAgD,OAAO;AAC1E,OAAOC,QAAQ,MAA4B,yBAAyB;AACpE,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAmB5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAU;EAC5CC,QAAQ;EACRC,WAAW;EACXC,qBAAqB;EACrB,GAAGC;AACyB,CAAC,EAAE;EAC/B,oBACEL,IAAA,CAACF,yBAAyB;IACxBI,QAAQ,EAAEA,QAAS;IACnBC,WAAW,EAAEA,WAAiD;IAC9DG,cAAc,EAAED,KAAK,CAACC,cAAe;IACrCC,UAAU,EAAEF,KAAK,CAACE,UAAW;IAC7BC,SAAS,EAAEH,KAAK,CAACG,SAAU;IAC3BC,kBAAkB,EAAEJ,KAAK,CAACI,kBAAmB;IAAAC,QAAA,EAE5CA,CACC;MACEC,QAAQ;MACRL,cAAc,EAAEM,qBAAqB;MACrCC,GAAG;MACH,GAAGC;IACL,CAAC,EACD;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDhB,IAAA,CAACH,QAAQ,CAACoB,QAAQ;MAAA,GACZH,eAAe;MAAA,GACfT,KAAK;MACTQ,GAAG,EAAEA,GAAI;MACTF,QAAQ,EAAEA,QAAS;MAAA,IACdC,qBAAqB,IAAI;QAC5BN,cAAc,EAAEM;MAClB,CAAC;MACDM,qBAAqB,EAAGC,oBAAoB,iBAC1CnB,IAAA,CAACoB,uBAAuB;QAAA,GAClBD,oBAAoB;QACxBf,qBAAqB,EAAE,CACrBY,8BAA8B,EAC9B;UAAEK,UAAU,EAAEN;QAAqB,CAAC,EACpCX,qBAAqB;MACrB,CACH;IACD,CACH;EACF,CACwB,CAAC;AAEhC;AAEA,MAAMgB,uBAAuB,gBAAGxB,UAAU,CAGxC,CAAC;EAAEc,QAAQ;EAAEN,qBAAqB;EAAE,GAAGkB;AAAK,CAAC,EAAET,GAAG,KAAK;EACvD,oBACEb,IAAA,CAACH,QAAQ,CAAC0B,UAAU;IAAA,GAAKD,IAAI;IAAET,GAAG,EAAEA,GAAI;IAAAH,QAAA,eACtCV,IAAA,CAACH,QAAQ,CAAC2B,IAAI;MAACC,KAAK,EAAErB,qBAAsB;MAAAM,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CACpD,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/HeaderBase.js

@@ -1,8 +1,14 @@
 "use strict";
 
-import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useMemo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedReaction, withDecay } from 'react-native-reanimated';
 import { jsx as _jsx } from "react/jsx-runtime";
+const PLATFORM_PANNING_ENABLED = Platform.select({
+  default: true,
+  android: false
+});
 /**
  * Base header component with absolute positioning.
  * Provides a foundation for building headers that need to be positioned absolutely.
@@ -40,13 +46,53 @@ export function HeaderBase({
  * </AnimatedHeaderBase>
  * ```
  */
+
+// TODO: Thinking about DX, perhaps creating another context in AnimatedHeaderBase or somewhere else could make sense
+// Note: Depending on feedback, there might be a need to intercept ongoing scroll when starting to pan (perhaps even on the tap itself but to be checked what feels better when using)
+// Note: Depending on feedback, there might be a need to block momentum by forcing scrollTo
 export function AnimatedHeaderBase({
   style,
+  animatedHeaderBaseProps,
+  withGestureHandlerRootView = false,
   ...rest
 }) {
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [style, styles.container],
-    ...rest
+  if (!animatedHeaderBaseProps) {
+    throw new Error('AnimatedHeaderBase requires `animatedHeaderBaseProps`. Pass the value from HeaderMotion.Header or useMotionProgress.');
+  }
+  const {
+    enableHeaderPan,
+    scrollToRef,
+    headerPanMomentumOffset: momentumScrollOffset
+  } = animatedHeaderBaseProps;
+  useAnimatedReaction(() => momentumScrollOffset.get(), (offset, prevOffset) => {
+    if (offset !== null) {
+      const dy = offset - (prevOffset ?? 0);
+      scrollToRef.current?.(dy);
+    }
+  });
+  const isPanEnabled = PLATFORM_PANNING_ENABLED && enableHeaderPan;
+  const pan = useMemo(() => Gesture.Pan().enabled(isPanEnabled).onChange(e => {
+    const dy = e.changeY;
+    scrollToRef.current?.(dy);
+  }).onEnd(e => {
+    momentumScrollOffset.set(withDecay({
+      velocity: e.velocityY
+    }, () => momentumScrollOffset.set(null)));
+  }).shouldCancelWhenOutside(false),
+  // Note: In first testing Android works without gesture handler whatsoever. If this functionality is needed, we can further control it with a prop in the future
+  [isPanEnabled, scrollToRef, momentumScrollOffset]);
+  const content = /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: pan,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [style, styles.container],
+      ...rest
+    })
+  });
+  if (!withGestureHandlerRootView) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(GestureHandlerRootView, {
+    children: content
   });
 }
 const styles = StyleSheet.create({
@@ -56,4 +102,6 @@ const styles = StyleSheet.create({
     right: 0
   }
 });
+
+// TODO: Lib refactor: context repetition, make people use less boilerplate by just wrapping the header with <HeaderBaseOrSomethingElse ctx={headerProps} /> that does everything under the hood (measuring total for example). That will then allow for people to use context inside
 //# sourceMappingURL=HeaderBase.js.map

package/lib/module/components/HeaderBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","Animated","jsx","_jsx","HeaderBase","style","rest","styles","container","AnimatedHeaderBase","create","position","left","right"],"sourceRoot":"../../../src","sources":["components/HeaderBase.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/D,OAAOC,QAAQ,MAA8B,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAAsB,CAAC,EAAE;EAC9D,oBAAOH,IAAA,CAACH,IAAI;IAACK,KAAK,EAAE,CAACA,KAAK,EAAEE,MAAM,CAACC,SAAS,CAAE;IAAA,GAAKF;EAAI,CAAG,CAAC;AAC7D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,kBAAkBA,CAAC;EACjCJ,KAAK;EACL,GAAGC;AACoB,CAAC,EAAE;EAC1B,oBAAOH,IAAA,CAACF,QAAQ,CAACD,IAAI;IAACK,KAAK,EAAE,CAACA,KAAK,EAAEE,MAAM,CAACC,SAAS,CAAE;IAAA,GAAKF;EAAI,CAAG,CAAC;AACtE;AAEA,MAAMC,MAAM,GAAGR,UAAU,CAACW,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","Platform","StyleSheet","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","useAnimatedReaction","withDecay","jsx","_jsx","PLATFORM_PANNING_ENABLED","select","default","android","HeaderBase","style","rest","styles","container","AnimatedHeaderBase","animatedHeaderBaseProps","withGestureHandlerRootView","Error","enableHeaderPan","scrollToRef","headerPanMomentumOffset","momentumScrollOffset","get","offset","prevOffset","dy","current","isPanEnabled","pan","Pan","enabled","onChange","e","changeY","onEnd","set","velocity","velocityY","shouldCancelWhenOutside","content","gesture","children","create","position","left","right"],"sourceRoot":"../../../src","sources":["components/HeaderBase.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/HeaderMotion.js

@@ -1,10 +1,28 @@
 "use strict";
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useRef, useEffect, useMemo } from 'react';
 import { Extrapolation, interpolate, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { HeaderMotionContext } from "../context.js";
 import { DEFAULT_MEASURE_DYNAMIC, DEFAULT_PROGRESS_THRESHOLD, DEFAULT_SCROLL_ID, getInitialScrollValue } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const resolveScrollIdForProgress = (scrollValues, activeScrollIdValue) => {
+  'worklet';
+
+  if (activeScrollIdValue) {
+    return activeScrollIdValue;
+  }
+  let onlyNonDefaultId = null;
+  for (const key in scrollValues) {
+    if (key === DEFAULT_SCROLL_ID) {
+      continue;
+    }
+    if (onlyNonDefaultId !== null) {
+      return DEFAULT_SCROLL_ID;
+    }
+    onlyNonDefaultId = key;
+  }
+  return onlyNonDefaultId ?? DEFAULT_SCROLL_ID;
+};
 /**
  * Context provider component for HeaderMotion.
  * Manages header animation state and provides it to child components via context.
@@ -16,32 +34,40 @@ function HeaderMotionContextProvider({
   measureDynamicMode = 'mount',
   activeScrollId,
   progressExtrapolation = Extrapolation.CLAMP,
+  enableHeaderPan = false,
   children
 }) {
-  const [dynamicMeasurement, setDynamicMeasurement] = useState(undefined);
-  const [originalHeaderHeight, setOriginalHeaderHeight] = useState(0);
+  const dynamicMeasurement = useSharedValue(undefined);
+  const originalHeaderHeight = useSharedValue(0);
+  const progressThresholdValue = useSharedValue(typeof progressThreshold === 'number' ? progressThreshold : Infinity);
+  const headerPanMomentumOffset = useSharedValue(null);
   const setOrUpdateDynamicMeasurement = useCallback(e => {
+    const prevMeasurement = dynamicMeasurement.get();
+    if (prevMeasurement !== undefined && measureDynamicMode === 'mount') {
+      return;
+    }
     const measured = measureDynamic(e);
-    setDynamicMeasurement(prevMeasurement => {
-      if (prevMeasurement !== undefined && measureDynamicMode === 'mount') {
-        return prevMeasurement;
-      }
-      return measured;
-    });
-  }, [measureDynamicMode, measureDynamic, setDynamicMeasurement]);
-  const calculatedProgressThreshold = useMemo(() => {
-    if (typeof progressThreshold === 'number') {
-      return progressThreshold;
+    if (prevMeasurement === measured) {
+      return;
     }
-    if (dynamicMeasurement === undefined) {
-      return Infinity;
+    dynamicMeasurement.set(measured);
+    progressThresholdValue.set(typeof progressThreshold === 'number' ? progressThreshold : progressThreshold(measured));
+  }, [measureDynamicMode, measureDynamic, dynamicMeasurement, progressThreshold, progressThresholdValue]);
+  useEffect(() => {
+    if (typeof progressThreshold === 'number') {
+      progressThresholdValue.set(progressThreshold);
+      return;
     }
-    return progressThreshold(dynamicMeasurement);
-  }, [dynamicMeasurement, progressThreshold]);
+    const measured = dynamicMeasurement.get();
+    progressThresholdValue.set(measured === undefined ? Infinity : progressThreshold(measured));
+  }, [progressThreshold, dynamicMeasurement, progressThresholdValue]);
   const measureTotalHeight = useCallback(e => {
     const measuredValue = e.nativeEvent.layout.height;
-    setOriginalHeaderHeight(measuredValue);
-  }, [setOriginalHeaderHeight]);
+    if (originalHeaderHeight.get() === measuredValue) {
+      return;
+    }
+    originalHeaderHeight.set(measuredValue);
+  }, [originalHeaderHeight]);
   const scrollValues = useSharedValue({
     [DEFAULT_SCROLL_ID]: getInitialScrollValue()
   });
@@ -55,8 +81,10 @@ function HeaderMotionContextProvider({
     });
   });
   const progress = useDerivedValue(() => {
-    const id = activeScrollId?.get() ?? DEFAULT_SCROLL_ID;
-    const scrollValue = scrollValues.get()[id];
+    const values = scrollValues.get();
+    const id = resolveScrollIdForProgress(values, activeScrollId?.get());
+    const scrollValue = values[id];
+    const threshold = progressThresholdValue.get();
     if (!scrollValue) {
       return 0;
     }
@@ -64,17 +92,31 @@ function HeaderMotionContextProvider({
       min,
       current
     } = scrollValue;
-    return interpolate(current, [min, min + calculatedProgressThreshold], [0, 1], progressExtrapolation);
+    return interpolate(current, [min, min + threshold], [0, 1], progressExtrapolation);
   });
+  const scrollToRef = useRef(null);
+  // FUTURE: SharedValue-based scrollTo was removed for now because function updates
+  // were not propagating reliably, while it works for refs. Revisit later.
+  // We need to be updating the scrollTo on active scroll ID changes and doing it via state would cause re-renders.
+  // It's a bit of an anti-pattern to use refs for this as well, but I am yet to figure out a better way to pass those if SV won't work.
+  const animatedHeaderBaseProps = useMemo(() => ({
+    enableHeaderPan,
+    scrollToRef,
+    headerPanMomentumOffset
+  }), [enableHeaderPan, headerPanMomentumOffset]);
   const ctxValue = useMemo(() => ({
     progress,
     originalHeaderHeight,
     measureDynamic: setOrUpdateDynamicMeasurement,
     measureTotalHeight,
-    progressThreshold: calculatedProgressThreshold,
+    enableHeaderPan,
+    headerPanMomentumOffset,
+    animatedHeaderBaseProps,
+    progressThreshold: progressThresholdValue,
     scrollValues,
+    scrollToRef,
     activeScrollId: activeScrollId
-  }), [originalHeaderHeight, progress, measureTotalHeight, setOrUpdateDynamicMeasurement, scrollValues, activeScrollId, calculatedProgressThreshold]);
+  }), [originalHeaderHeight, progress, measureTotalHeight, enableHeaderPan, headerPanMomentumOffset, animatedHeaderBaseProps, setOrUpdateDynamicMeasurement, scrollValues, activeScrollId, progressThresholdValue]);
   return /*#__PURE__*/_jsx(HeaderMotionContext.Provider, {
     value: ctxValue,
     children: children

package/lib/module/components/HeaderMotion.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useState","Extrapolation","interpolate","useAnimatedReaction","useDerivedValue","useSharedValue","HeaderMotionContext","DEFAULT_MEASURE_DYNAMIC","DEFAULT_PROGRESS_THRESHOLD","DEFAULT_SCROLL_ID","getInitialScrollValue","jsx","_jsx","HeaderMotionContextProvider","progressThreshold","measureDynamic","measureDynamicMode","activeScrollId","progressExtrapolation","CLAMP","children","dynamicMeasurement","setDynamicMeasurement","undefined","originalHeaderHeight","setOriginalHeaderHeight","setOrUpdateDynamicMeasurement","e","measured","prevMeasurement","calculatedProgressThreshold","Infinity","measureTotalHeight","measuredValue","nativeEvent","layout","height","scrollValues","get","id","modify","value","progress","scrollValue","min","current","ctxValue","Provider"],"sourceRoot":"../../../src","sources":["components/HeaderMotion.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useRef","useEffect","useMemo","Extrapolation","interpolate","useAnimatedReaction","useDerivedValue","useSharedValue","HeaderMotionContext","DEFAULT_MEASURE_DYNAMIC","DEFAULT_PROGRESS_THRESHOLD","DEFAULT_SCROLL_ID","getInitialScrollValue","jsx","_jsx","resolveScrollIdForProgress","scrollValues","activeScrollIdValue","onlyNonDefaultId","key","HeaderMotionContextProvider","progressThreshold","measureDynamic","measureDynamicMode","activeScrollId","progressExtrapolation","CLAMP","enableHeaderPan","children","dynamicMeasurement","undefined","originalHeaderHeight","progressThresholdValue","Infinity","headerPanMomentumOffset","setOrUpdateDynamicMeasurement","e","prevMeasurement","get","measured","set","measureTotalHeight","measuredValue","nativeEvent","layout","height","id","modify","value","progress","values","scrollValue","threshold","min","current","scrollToRef","animatedHeaderBaseProps","ctxValue","Provider"],"sourceRoot":"../../../src","sources":["components/HeaderMotion.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ScrollManager.js

@@ -26,7 +26,11 @@ import { useScrollManager } from "../hooks/index.js";
 export function HeaderMotionScrollManager({
   children,
   scrollId,
-  animatedRef
+  animatedRef,
+  refreshControl,
+  refreshing,
+  onRefresh,
+  progressViewOffset
 }) {
   if (typeof children !== 'function') {
     throw new Error('HeaderMotion.ScrollManager only accepts render function as the only child.');
@@ -35,7 +39,11 @@ export function HeaderMotionScrollManager({
     scrollableProps,
     headerMotionContext
   } = useScrollManager(scrollId, {
-    animatedRef
+    animatedRef,
+    refreshControl,
+    refreshing,
+    onRefresh,
+    progressViewOffset
   });
   return children(scrollableProps, headerMotionContext);
 }

package/lib/module/components/ScrollManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["useScrollManager","HeaderMotionScrollManager","children","scrollId","animatedRef","Error","scrollableProps","headerMotionContext"],"sourceRoot":"../../../src","sources":["components/ScrollManager.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,mBAAU;AA4B3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAAC;EACxCC,QAAQ;EACRC,QAAQ;EACRC;AAC8B,CAAC,EAAE;EACjC,IAAI,OAAOF,QAAQ,KAAK,UAAU,EAAE;IAClC,MAAM,IAAIG,KAAK,CACb,4EACF,CAAC;EACH;EAEA,MAAM;IAAEC,eAAe;IAAEC;EAAoB,CAAC,GAAGP,gBAAgB,CAACG,QAAQ,EAAE;IAC1EC;EACF,CAAC,CAAC;EAEF,OAAOF,QAAQ,CAACI,eAAe,EAAEC,mBAAmB,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["useScrollManager","HeaderMotionScrollManager","children","scrollId","animatedRef","refreshControl","refreshing","onRefresh","progressViewOffset","Error","scrollableProps","headerMotionContext"],"sourceRoot":"../../../src","sources":["components/ScrollManager.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAsC,mBAAU;AAyBzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAEvC;EACAC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,cAAc;EACdC,UAAU;EACVC,SAAS;EACTC;AACoC,CAAC,EAAE;EACvC,IAAI,OAAON,QAAQ,KAAK,UAAU,EAAE;IAClC,MAAM,IAAIO,KAAK,CACb,4EACF,CAAC;EACH;EAEA,MAAM;IAAEC,eAAe;IAAEC;EAAoB,CAAC,GAAGX,gBAAgB,CAC/DG,QAAQ,EACR;IACEC,WAAW;IACXC,cAAc;IACdC,UAAU;IACVC,SAAS;IACTC;EACF,CACF,CAAC;EAED,OAAON,QAAQ,CAACQ,eAAe,EAAEC,mBAAmB,CAAC;AACvD","ignoreList":[]}

package/lib/module/components/ScrollView.js

@@ -22,13 +22,17 @@ export function HeaderMotionScrollView({
   animatedRef,
   children,
   contentContainerStyle,
+  refreshControl,
   ...props
 }) {
   return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
     scrollId: scrollId,
     animatedRef: animatedRef,
+    refreshControl: refreshControl,
     children: ({
       onScroll,
+      ref,
+      refreshControl: managedRefreshControl,
       ...scrollViewProps
     }, {
       originalHeaderHeight,
@@ -36,7 +40,11 @@ export function HeaderMotionScrollView({
     }) => /*#__PURE__*/_jsx(Animated.ScrollView, {
       ...scrollViewProps,
       ...props,
+      ref: ref,
       onScroll: onScroll,
+      ...(managedRefreshControl && {
+        refreshControl: managedRefreshControl
+      }),
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: [minHeightContentContainerStyle, {
           paddingTop: originalHeaderHeight

package/lib/module/components/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionScrollView","scrollId","animatedRef","children","contentContainerStyle","props","onScroll","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","ScrollView","View","style","paddingTop"],"sourceRoot":"../../../src","sources":["components/ScrollView.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,MAGR,yBAAyB;AAChC,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,qBAAqB;EACrB,GAAGC;AACwB,CAAC,EAAE;EAC9B,oBACEN,IAAA,CAACF,yBAAyB;IAACI,QAAQ,EAAEA,QAAS;IAACC,WAAW,EAAEA,WAAY;IAAAC,QAAA,EACrEA,CACC;MAAEG,QAAQ;MAAE,GAAGC;IAAgB,CAAC,EAChC;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDV,IAAA,CAACH,QAAQ,CAACc,UAAU;MAAA,GACdH,eAAe;MAAA,GACfF,KAAK;MACTC,QAAQ,EAAEA,QAAS;MAAAH,QAAA,eAEnBJ,IAAA,CAACH,QAAQ,CAACe,IAAI;QACZC,KAAK,EAAE,CACLH,8BAA8B,EAC9B;UAAEI,UAAU,EAAEL;QAAqB,CAAC,EACpCJ,qBAAqB,CACrB;QAAAD,QAAA,EAEDA;MAAQ,CACI;IAAC,CACG;EACtB,CACwB,CAAC;AAEhC","ignoreList":[]}
+{"version":3,"names":["Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionScrollView","scrollId","animatedRef","children","contentContainerStyle","refreshControl","props","onScroll","ref","managedRefreshControl","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","ScrollView","View","style","paddingTop"],"sourceRoot":"../../../src","sources":["components/ScrollView.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,MAGR,yBAAyB;AAChC,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,qBAAqB;EACrBC,cAAc;EACd,GAAGC;AACwB,CAAC,EAAE;EAC9B,oBACEP,IAAA,CAACF,yBAAyB;IACxBI,QAAQ,EAAEA,QAAS;IACnBC,WAAW,EAAEA,WAAgD;IAC7DG,cAAc,EAAEA,cAAe;IAAAF,QAAA,EAE9BA,CACC;MACEI,QAAQ;MACRC,GAAG;MACHH,cAAc,EAAEI,qBAAqB;MACrC,GAAGC;IACL,CAAC,EACD;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDb,IAAA,CAACH,QAAQ,CAACiB,UAAU;MAAA,GACdH,eAAe;MAAA,GACfJ,KAAK;MACTE,GAAG,EAAEA,GAAI;MACTD,QAAQ,EAAEA,QAAS;MAAA,IACdE,qBAAqB,IAAI;QAC5BJ,cAAc,EAAEI;MAClB,CAAC;MAAAN,QAAA,eAEDJ,IAAA,CAACH,QAAQ,CAACkB,IAAI;QACZC,KAAK,EAAE,CACLH,8BAA8B,EAC9B;UAAEI,UAAU,EAAEL;QAAqB,CAAC,EACpCP,qBAAqB,CACrB;QAAAD,QAAA,EAEDA;MAAQ,CACI;IAAC,CACG;EACtB,CACwB,CAAC;AAEhC","ignoreList":[]}