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

package/lib/typescript/src/hooks/useScrollManager.d.ts

@@ -1,5 +1,7 @@
 import { type AnimatedRef } from 'react-native-reanimated';
 import type { ScrollManagerConfig } from '../types';
+import { type ResolveRefreshControlOptions } from '../utils';
+import type { InstanceOrElement } from 'react-native-reanimated/lib/typescript/commonTypes';
 /**
  * Hook that manages scroll tracking and synchronization for header animations.
  * Returns props to apply to scrollable components and additional values that help with adjusting styling of the scrollables to header's dimensions.
@@ -37,12 +39,17 @@ import type { ScrollManagerConfig } from '../types';
  * }
  * ```
  */
-export interface UseScrollManagerOptions {
+export interface UseScrollManagerOptions<TRef extends InstanceOrElement = any> extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'> {
     /**
      * Optional animated ref to use instead of creating one internally.
      * Useful when you need access to the scroll view ref from outside.
      */
-    animatedRef?: AnimatedRef<any>;
+    animatedRef?: AnimatedRef<TRef>;
+    /**
+     * Optional refresh progress offset override.
+     * When provided, it takes precedence over the automatic offset based on header height.
+     */
+    progressViewOffset?: ResolveRefreshControlOptions['progressViewOffset'];
 }
-export declare function useScrollManager(scrollId?: string, options?: UseScrollManagerOptions): ScrollManagerConfig;
+export declare function useScrollManager<TRef extends InstanceOrElement = any>(scrollId?: string, options?: UseScrollManagerOptions<TRef>): ScrollManagerConfig<TRef>;
 //# sourceMappingURL=useScrollManager.d.ts.map

package/lib/typescript/src/hooks/useScrollManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollManager.ts"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,WAAW,EAEjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,UAAU,CAAC;AAGlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,uBAAuB,GAChC,mBAAmB,CAyIrB"}
+{"version":3,"file":"useScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollManager.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,WAAW,EAEjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAKL,KAAK,4BAA4B,EAClC,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAQ5F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,uBAAuB,CAAC,IAAI,SAAS,iBAAiB,GAAG,GAAG,CAC3E,SAAQ,IAAI,CAAC,4BAA4B,EAAE,oBAAoB,CAAC;IAChE;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;CACzE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,SAAS,iBAAiB,GAAG,GAAG,EACnE,QAAQ,CAAC,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,uBAAuB,CAAC,IAAI,CAAC,GACtC,mBAAmB,CAAC,IAAI,CAAC,CAiN3B"}

package/lib/typescript/src/types.d.ts

@@ -1,6 +1,8 @@
+import type { ReactElement } from 'react';
 import type { LayoutChangeEvent, ScrollViewProps } from 'react-native';
 import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import { DEFAULT_SCROLL_ID } from './utils/defaults';
+import type { InstanceOrElement } from 'react-native-reanimated/lib/typescript/commonTypes';
 export type Progress = SharedValue<number>;
 export type ProgressThreshold = number | ((measuredHeaderValue: number) => number);
 export type MeasureAnimatedHeader = (e: LayoutChangeEvent) => number;
@@ -24,20 +26,34 @@ export type WithCollapsiblePagedHeaderProps<Tab extends string = string, T exten
 };
 export interface MotionProgress {
     progress: Progress;
-    progressThreshold: number;
+    progressThreshold: SharedValue<number>;
     measureTotalHeight: MeasureAnimatedHeaderAndSet;
     measureDynamic: MeasureAnimatedHeaderAndSet;
+    animatedHeaderBaseProps: AnimatedHeaderBaseMotionProps;
+    activeScrollId: SharedValue<string> | undefined;
+}
+export interface AnimatedHeaderBaseMotionProps {
+    enableHeaderPan: boolean;
+    scrollToRef: React.RefObject<ScrollTo | null>;
+    headerPanMomentumOffset: SharedValue<number | null>;
 }
 export interface ScrollManagerHeaderMotionContext {
-    originalHeaderHeight: number;
+    originalHeaderHeight: SharedValue<number>;
     minHeightContentContainerStyle: {} | {
         minHeight: number;
     };
 }
-export interface ScrollManagerConfig {
+export interface ScrollManagerConfig<TRef extends InstanceOrElement = any> {
     scrollableProps: Required<Pick<ScrollViewProps, 'onScroll' | 'scrollEventThrottle'>> & {
-        ref: AnimatedRef<any>;
+        refreshControl?: ReactElement;
+        ref: AnimatedRef<TRef>;
     };
     headerMotionContext: ScrollManagerHeaderMotionContext;
 }
+export type ScrollTo = (y: number, options?: ScrollToOptions) => void;
+interface ScrollToOptions {
+    isValueDelta?: boolean;
+    animated?: boolean;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,CAAC,CAAC,mBAAmB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,EAAE,iBAAiB,KAAK,MAAM,CAAC;AACrE,MAAM,MAAM,2BAA2B,GAAG,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAEzE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,KAAK,EAAE,CAAC,CAAC;IACT,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AACD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG;KACtD,GAAG,IAAI,OAAO,iBAAiB,CAAC,CAAC,EAAE,WAAW;CAChD,CAAC;AAEF,MAAM,MAAM,0BAA0B,CACpC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACzD,CAAC,GAAG,cAAc,CAAC;AAEvB,MAAM,MAAM,+BAA+B,CACzC,GAAG,SAAS,MAAM,GAAG,MAAM,EAC3B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACzD,0BAA0B,CAAC,CAAC,CAAC,GAAG;IAClC,WAAW,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,2BAA2B,CAAC;IAChD,cAAc,EAAE,2BAA2B,CAAC;CAC7C;AAED,MAAM,WAAW,gCAAgC;IAC/C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,8BAA8B,EAC1B,EAAE,GACF;QACE,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACP;AAED,MAAM,WAAW,mBAAmB;IAClC,eAAe,EAAE,QAAQ,CACvB,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,qBAAqB,CAAC,CAC1D,GAAG;QACF,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;KACvB,CAAC;IACF,mBAAmB,EAAE,gCAAgC,CAAC;CACvD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './defaults';
 export * from './values';
+export * from './refreshControl';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC"}

package/lib/typescript/src/utils/refreshControl.d.ts

@@ -0,0 +1,150 @@
+import { type ReactElement } from 'react';
+import { RefreshControl, type RefreshControlProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+declare const AnimatedRefreshControl: import("react-native-reanimated/lib/typescript/createAnimatedComponent").AnimatedComponentType<Readonly<Readonly<Omit<Readonly<Omit<Readonly<{
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => unknown) | undefined;
+    onAccessibilityTap?: (() => unknown) | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => unknown) | undefined;
+    onMagicTap?: (() => unknown) | undefined;
+    onAccessibilityEscape?: (() => unknown) | undefined;
+}>, "style" | "onMoveShouldSetResponder" | "onMoveShouldSetResponderCapture" | "onResponderGrant" | "onResponderMove" | "onResponderReject" | "onResponderRelease" | "onResponderStart" | "onResponderEnd" | "onResponderTerminate" | "onResponderTerminationRequest" | "onStartShouldSetResponder" | "onStartShouldSetResponderCapture" | "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onMoveShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderGrant?: ((e: import("react-native").GestureResponderEvent) => void | boolean) | undefined;
+    onResponderMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminate?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onStartShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onStartShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+}>, "style" | "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onMouseEnter?: ((event: import("react-native").MouseEvent) => void) | undefined;
+    onMouseLeave?: ((event: import("react-native").MouseEvent) => void) | undefined;
+}>, "style" | "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onClick?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onClickCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOver?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOverCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOut?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOutCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onGotPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onGotPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onLostPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onLostPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+}>, "style" | "onClick" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onBlur?: ((event: import("react-native").BlurEvent) => void) | undefined;
+    onBlurCapture?: ((event: import("react-native").BlurEvent) => void) | undefined;
+    onFocus?: ((event: import("react-native").FocusEvent) => void) | undefined;
+    onFocusCapture?: ((event: import("react-native").FocusEvent) => void) | undefined;
+}>, "style" | "onClick" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onTouchCancel?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancelCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMoveCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchStartCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+}>, "style" | "onClick" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    nativeBackgroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
+    nativeForegroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    nextFocusDown?: number | undefined;
+    nextFocusForward?: number | undefined;
+    nextFocusLeft?: number | undefined;
+    nextFocusRight?: number | undefined;
+    nextFocusUp?: number | undefined;
+    focusable?: boolean | undefined;
+    tabIndex?: 0 | -1;
+    onClick?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
+}>, "style" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    shouldRasterizeIOS?: boolean | undefined;
+}>, "style" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<Omit<Readonly<{
+    accessibilityLabelledBy?: (string | undefined) | (Array<string> | undefined);
+    "aria-labelledby"?: string | undefined;
+    accessibilityLiveRegion?: ("none" | "polite" | "assertive") | undefined;
+    "aria-live"?: ("polite" | "assertive" | "off") | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
+    screenReaderFocusable?: boolean;
+}>, "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & Omit<Readonly<{
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined;
+    accessibilityLargeContentTitle?: string | undefined;
+    "aria-modal"?: boolean | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined;
+}>, "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & {
+    accessible?: boolean | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityHint?: string | undefined;
+    "aria-label"?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    role?: import("react-native").Role | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    "aria-valuemax"?: import("react-native").AccessibilityValue["max"] | undefined;
+    "aria-valuemin"?: import("react-native").AccessibilityValue["min"] | undefined;
+    "aria-valuenow"?: import("react-native").AccessibilityValue["now"] | undefined;
+    "aria-valuetext"?: import("react-native").AccessibilityValue["text"] | undefined;
+    accessibilityActions?: ReadonlyArray<import("react-native/types_generated/Libraries/Components/View/ViewAccessibility").AccessibilityActionInfo> | undefined;
+    "aria-busy"?: boolean | undefined;
+    "aria-checked"?: (boolean | undefined) | "mixed";
+    "aria-disabled"?: boolean | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    "aria-hidden"?: boolean | undefined;
+}>, "style" | "children" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    children?: React.ReactNode;
+    style?: import("react-native/types_generated/Libraries/StyleSheet/StyleSheet").ViewStyleProp | undefined;
+    collapsable?: boolean | undefined;
+    collapsableChildren?: boolean | undefined;
+    id?: string;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    hitSlop?: import("react-native/types_generated/Libraries/StyleSheet/EdgeInsetsPropType").EdgeInsetsOrSizeProp | undefined;
+    pointerEvents?: ("auto" | "box-none" | "box-only" | "none") | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    experimental_accessibilityOrder?: Array<string> | undefined;
+}>, never>>, "title" | "tintColor" | "titleColor" | "enabled" | "colors" | "progressBackgroundColor" | "size" | "onRefresh" | "refreshing" | "progressViewOffset"> & Omit<Readonly<{
+    tintColor?: import("react-native").ColorValue | undefined;
+    titleColor?: import("react-native").ColorValue | undefined;
+    title?: string | undefined;
+}>, "enabled" | "colors" | "progressBackgroundColor" | "size" | "onRefresh" | "refreshing" | "progressViewOffset"> & Omit<Readonly<{
+    enabled?: boolean | undefined;
+    colors?: ReadonlyArray<import("react-native").ColorValue> | undefined;
+    progressBackgroundColor?: import("react-native").ColorValue | undefined;
+    size?: ("default" | "large") | undefined;
+}>, "onRefresh" | "refreshing" | "progressViewOffset"> & Omit<Readonly<{
+    onRefresh?: (() => void | Promise<void>) | undefined;
+    refreshing: boolean;
+    progressViewOffset?: number | undefined;
+}>, never>>>, typeof RefreshControl>;
+type MaybeShared<T> = T | SharedValue<T | undefined>;
+export interface ResolveRefreshControlOptions {
+    refreshControl?: MaybeShared<ReactElement<RefreshControlProps>>;
+    refreshing?: MaybeShared<boolean>;
+    onRefresh?: MaybeShared<() => void>;
+    progressViewOffset: MaybeShared<number> | SharedValue<number>;
+}
+export declare function resolveRefreshControl({ refreshControl, refreshing, onRefresh, progressViewOffset, }: ResolveRefreshControlOptions): ReactElement<RefreshControlProps | React.ComponentProps<typeof AnimatedRefreshControl>> | undefined;
+export {};
+//# sourceMappingURL=refreshControl.d.ts.map

package/lib/typescript/src/utils/refreshControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refreshControl.d.ts","sourceRoot":"","sources":["../../../../src/utils/refreshControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAK3D,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAAmD,CAAC;AAEhF,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AAErD,MAAM,WAAW,4BAA4B;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAChE,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,IAAI,CAAC,CAAC;IACpC,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;CAC/D;AAED,wBAAgB,qBAAqB,CAAC,EACpC,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,GACnB,EAAE,4BAA4B,GAC3B,YAAY,CACV,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAC1E,GACD,SAAS,CAYZ"}

package/lib/typescript/src/utils/values.d.ts

@@ -1,3 +1,6 @@
-import type { ScrollValue } from '../types';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ScrollValue, ScrollValues } from '../types';
 export declare function getInitialScrollValue(): ScrollValue;
+export declare function ensureScrollValueRegistered(scrollValues: SharedValue<ScrollValues>, id: string): ScrollValues;
+export declare function warnIfMissingActiveScrollId(scrollValues: ScrollValues, id: string, activeScrollId: string | undefined): void;
 //# sourceMappingURL=values.d.ts.map

package/lib/typescript/src/utils/values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../../../src/utils/values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,qBAAqB,IAAI,WAAW,CAGnD"}
+{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../../../src/utils/values.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG1D,wBAAgB,qBAAqB,IAAI,WAAW,CAGnD;AAED,wBAAgB,2BAA2B,CACzC,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EACvC,EAAE,EAAE,MAAM,GACT,YAAY,CAiBd;AAED,wBAAgB,2BAA2B,CACzC,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,MAAM,EACV,cAAc,EAAE,MAAM,GAAG,SAAS,GACjC,IAAI,CA0BN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-header-motion",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "description": "Smooth, animated collapsible headers with scroll-based motion control in React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -76,17 +76,19 @@
     "jest": "^29.7.0",
     "lefthook": "^2.0.3",
     "prettier": "^2.8.8",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
     "react-native-builder-bob": "^0.40.17",
-    "react-native-reanimated": "4.1.1",
-    "react-native-worklets": "0.5.1",
+    "react-native-gesture-handler": "2.30.0",
+    "react-native-reanimated": "4.2.1",
+    "react-native-worklets": "0.7.2",
     "release-it": "^19.0.4",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "^2.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-worklets": ">=0.4.0"
   },

package/src/components/FlatList.tsx

@@ -4,11 +4,9 @@ import { HeaderMotionScrollManager } from './ScrollManager';
 
 import type { ScrollViewProps } from 'react-native';
 
-type AnimatedFlatListProps<T = any> = ComponentProps<
+export type HeaderMotionFlatListProps<T = any> = ComponentProps<
   typeof Animated.FlatList<T>
->;
-
-export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
+> & {
   /**
    * Optional unique identifier for this scroll view.
    * Use this when you have multiple scroll views (e.g. in tabs) to track them separately.
@@ -18,7 +16,7 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
    * Optional animated ref to use for the flat list.
    * When provided, the scroll manager will use this ref instead of creating its own.
    */
-  animatedRef?: AnimatedRef<any>;
+  animatedRef?: AnimatedRef<Animated.FlatList<T>> | AnimatedRef;
 };
 
 /**
@@ -45,18 +43,34 @@ export function HeaderMotionFlatList<T = any>({
   ...props
 }: HeaderMotionFlatListProps<T>) {
   return (
-    <HeaderMotionScrollManager scrollId={scrollId} animatedRef={animatedRef}>
+    <HeaderMotionScrollManager
+      scrollId={scrollId}
+      animatedRef={animatedRef as AnimatedRef<Animated.FlatList<T>>}
+      refreshControl={props.refreshControl}
+      refreshing={props.refreshing}
+      onRefresh={props.onRefresh}
+      progressViewOffset={props.progressViewOffset}
+    >
       {(
-        { onScroll, ...scrollViewProps },
+        {
+          onScroll,
+          refreshControl: managedRefreshControl,
+          ref,
+          ...scrollViewProps
+        },
         { originalHeaderHeight, minHeightContentContainerStyle }
       ) => (
         <Animated.FlatList
           {...scrollViewProps}
           {...props}
+          ref={ref}
           onScroll={onScroll}
-          renderScrollComponent={(propsz) => (
+          {...(managedRefreshControl && {
+            refreshControl: managedRefreshControl,
+          })}
+          renderScrollComponent={(scrollComponentProps) => (
             <AnimatedScrollContainer
-              {...propsz}
+              {...scrollComponentProps}
               contentContainerStyle={[
                 minHeightContentContainerStyle,
                 { paddingTop: originalHeaderHeight },

package/src/components/HeaderBase.tsx

@@ -1,8 +1,32 @@
-import { StyleSheet, View, type ViewProps } from 'react-native';
-import Animated, { type AnimatedProps } from 'react-native-reanimated';
+import { useMemo } from 'react';
+import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedReaction,
+  withDecay,
+  type AnimatedProps,
+} from 'react-native-reanimated';
+
+const PLATFORM_PANNING_ENABLED = Platform.select({
+  default: true,
+  android: false,
+});
+
+import type { MotionProgress } from '../types';
 
 export type HeaderBaseProps = ViewProps;
-export type AnimatedHeaderBaseProps = AnimatedProps<ViewProps>;
+export type AnimatedHeaderBaseProps = AnimatedProps<ViewProps> &
+  Pick<MotionProgress, 'animatedHeaderBaseProps'> & {
+    /**
+     * Wraps the header with GestureHandlerRootView.
+     * Keep this disabled when your app already has a root-level GestureHandlerRootView.
+     */
+    withGestureHandlerRootView?: boolean;
+  };
 
 /**
  * Base header component with absolute positioning.
@@ -35,11 +59,74 @@ export function HeaderBase({ style, ...rest }: HeaderBaseProps) {
  * </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
 }: AnimatedHeaderBaseProps) {
-  return <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 = (
+    <GestureDetector gesture={pan}>
+      <Animated.View style={[style, styles.container]} {...rest} />
+    </GestureDetector>
+  );
+
+  if (!withGestureHandlerRootView) {
+    return content;
+  }
+
+  return <GestureHandlerRootView>{content}</GestureHandlerRootView>;
 }
 
 const styles = StyleSheet.create({
@@ -49,3 +136,5 @@ 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