react-native-header-motion 0.1.0 → 0.1.1

package/README.md

@@ -4,6 +4,10 @@ High-level APIs for **orchestrating header motion** driven by scroll — built o
 
 This library is **100% a wrapper around Reanimated**. All the credit for the underlying animation engine, worklets, and primitives goes to **Reanimated** (and `react-native-worklets`). This package focuses on a specific use case: **header motion + scroll orchestration** (including multi-scroll/tab scenarios).
 
+<div align="center">
+<img src="https://github.com/user-attachments/assets/b673349a-f26a-4cc8-bfe1-60d77deb4390" width="70%" />
+</div>
+
 ## What this is (and isn’t)
 
 **✅ This is**

package/lib/module/components/FlatList.js

@@ -1,7 +1,6 @@
 "use strict";
 
 import { forwardRef } from 'react';
-import { ScrollView } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { HeaderMotionScrollManager } from "./ScrollManager.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,6 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export function HeaderMotionFlatList({
   scrollId,
+  contentContainerStyle,
   ...props
 }) {
   return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
@@ -39,11 +39,11 @@ export function HeaderMotionFlatList({
       ...props,
       onScroll: onScroll,
       renderScrollComponent: propsz => /*#__PURE__*/_jsx(AnimatedScrollContainer, {
-        ...propsz
-      }),
-      contentContainerStyle: [minHeightContentContainerStyle, {
-        paddingTop: originalHeaderHeight
-      }, props.contentContainerStyle]
+        ...propsz,
+        contentContainerStyle: [minHeightContentContainerStyle, {
+          paddingTop: originalHeaderHeight
+        }, contentContainerStyle]
+      })
     })
   });
 }
@@ -52,7 +52,7 @@ const AnimatedScrollContainer = /*#__PURE__*/forwardRef(({
   contentContainerStyle,
   ...rest
 }, ref) => {
-  return /*#__PURE__*/_jsx(ScrollView, {
+  return /*#__PURE__*/_jsx(Animated.ScrollView, {
     ...rest,
     ref: ref,
     children: /*#__PURE__*/_jsx(Animated.View, {

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ScrollView","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","props","children","onScroll","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","FlatList","renderScrollComponent","propsz","AnimatedScrollContainer","contentContainerStyle","paddingTop","rest","ref","View","style"],"sourceRoot":"../../../src","sources":["components/FlatList.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAgD,OAAO;AAC1E,SAASC,UAAU,QAA8B,cAAc;AAC/D,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAU;EAC5CC,QAAQ;EACR,GAAGC;AACyB,CAAC,EAAE;EAC/B,oBACEH,IAAA,CAACF,yBAAyB;IAACI,QAAQ,EAAEA,QAAS;IAAAE,QAAA,EAC3CA,CACC;MAAEC,QAAQ;MAAE,GAAGC;IAAgB,CAAC,EAChC;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDR,IAAA,CAACH,QAAQ,CAACY,QAAQ;MAAA,GACZH,eAAe;MAAA,GACfH,KAAK;MACTE,QAAQ,EAAEA,QAAS;MACnBK,qBAAqB,EAAGC,MAAM,iBAC5BX,IAAA,CAACY,uBAAuB;QAAA,GAAKD;MAAM,CAAG,CACtC;MACFE,qBAAqB,EAAE,CACrBL,8BAA8B,EAC9B;QAAEM,UAAU,EAAEP;MAAqB,CAAC,EACpCJ,KAAK,CAACU,qBAAqB;IAC3B,CACH;EACF,CACwB,CAAC;AAEhC;AAEA,MAAMD,uBAAuB,gBAAGjB,UAAU,CAGxC,CAAC;EAAES,QAAQ;EAAES,qBAAqB;EAAE,GAAGE;AAAK,CAAC,EAAEC,GAAG,KAAK;EACvD,oBACEhB,IAAA,CAACJ,UAAU;IAAA,GAAKmB,IAAI;IAAEC,GAAG,EAAEA,GAAI;IAAAZ,QAAA,eAC7BJ,IAAA,CAACH,QAAQ,CAACoB,IAAI;MAACC,KAAK,EAAEL,qBAAsB;MAAAT,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CAC7D,CAAC;AAEjB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","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,MAAM,yBAAyB;AAC9C,SAASC,yBAAyB,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgB5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAU;EAC5CC,QAAQ;EACRC,qBAAqB;EACrB,GAAGC;AACyB,CAAC,EAAE;EAC/B,oBACEJ,IAAA,CAACF,yBAAyB;IAACI,QAAQ,EAAEA,QAAS;IAAAG,QAAA,EAC3CA,CACC;MAAEC,QAAQ;MAAE,GAAGC;IAAgB,CAAC,EAChC;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDT,IAAA,CAACH,QAAQ,CAACa,QAAQ;MAAA,GACZH,eAAe;MAAA,GACfH,KAAK;MACTE,QAAQ,EAAEA,QAAS;MACnBK,qBAAqB,EAAGC,MAAM,iBAC5BZ,IAAA,CAACa,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,gBAAGjB,UAAU,CAGxC,CAAC;EAAES,QAAQ;EAAEF,qBAAqB;EAAE,GAAGY;AAAK,CAAC,EAAEC,GAAG,KAAK;EACvD,oBACEhB,IAAA,CAACH,QAAQ,CAACoB,UAAU;IAAA,GAAKF,IAAI;IAAEC,GAAG,EAAEA,GAAI;IAAAX,QAAA,eACtCL,IAAA,CAACH,QAAQ,CAACqB,IAAI;MAACC,KAAK,EAAEhB,qBAAsB;MAAAE,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CACpD,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/FlatList.d.ts

@@ -25,6 +25,6 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
  * </HeaderMotion>
  * ```
  */
-export declare function HeaderMotionFlatList<T = any>({ scrollId, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderMotionFlatList<T = any>({ scrollId, contentContainerStyle, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FlatList.d.ts.map

package/lib/typescript/src/components/FlatList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE3E,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAG/C,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,cAAc,CAClD,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAC1E;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC5C,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAuB9B"}
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAC3E,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAK/C,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,cAAc,CAClD,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAC1E;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC5C,QAAQ,EACR,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAyB9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-header-motion",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",

package/src/components/FlatList.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, type ComponentProps, type ComponentRef } from 'react';
-import { ScrollView, type ScrollViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { HeaderMotionScrollManager } from './ScrollManager';
 
+import type { ScrollViewProps } from 'react-native';
+
 type AnimatedFlatListProps<T = any> = ComponentProps<
   typeof Animated.FlatList<T>
 >;
@@ -34,6 +35,7 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
  */
 export function HeaderMotionFlatList<T = any>({
   scrollId,
+  contentContainerStyle,
   ...props
 }: HeaderMotionFlatListProps<T>) {
   return (
@@ -47,13 +49,15 @@ export function HeaderMotionFlatList<T = any>({
           {...props}
           onScroll={onScroll}
           renderScrollComponent={(propsz) => (
-            <AnimatedScrollContainer {...propsz} />
+            <AnimatedScrollContainer
+              {...propsz}
+              contentContainerStyle={[
+                minHeightContentContainerStyle,
+                { paddingTop: originalHeaderHeight },
+                contentContainerStyle,
+              ]}
+            />
           )}
-          contentContainerStyle={[
-            minHeightContentContainerStyle,
-            { paddingTop: originalHeaderHeight },
-            props.contentContainerStyle,
-          ]}
         />
       )}
     </HeaderMotionScrollManager>
@@ -61,12 +65,12 @@ export function HeaderMotionFlatList<T = any>({
 }
 
 const AnimatedScrollContainer = forwardRef<
-  ComponentRef<typeof ScrollView>,
+  ComponentRef<typeof Animated.ScrollView>,
   ScrollViewProps
 >(({ children, contentContainerStyle, ...rest }, ref) => {
   return (
-    <ScrollView {...rest} ref={ref}>
+    <Animated.ScrollView {...rest} ref={ref}>
       <Animated.View style={contentContainerStyle}>{children}</Animated.View>
-    </ScrollView>
+    </Animated.ScrollView>
   );
 });