react-native-header-motion 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/lib/module/components/FlatList.js +9 -7
- package/lib/module/components/FlatList.js.map +1 -1
- package/lib/module/components/ScrollManager.js +5 -2
- package/lib/module/components/ScrollManager.js.map +1 -1
- package/lib/module/components/ScrollView.js +2 -0
- package/lib/module/components/ScrollView.js.map +1 -1
- package/lib/module/hooks/useScrollManager.js +7 -3
- package/lib/module/hooks/useScrollManager.js.map +1 -1
- package/lib/typescript/src/components/FlatList.d.ts +7 -2
- package/lib/typescript/src/components/FlatList.d.ts.map +1 -1
- package/lib/typescript/src/components/ScrollManager.d.ts +7 -1
- package/lib/typescript/src/components/ScrollManager.d.ts.map +1 -1
- package/lib/typescript/src/components/ScrollView.d.ts +7 -2
- package/lib/typescript/src/components/ScrollView.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useScrollManager.d.ts +12 -1
- package/lib/typescript/src/hooks/useScrollManager.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/FlatList.tsx +22 -12
- package/src/components/ScrollManager.tsx +10 -1
- package/src/components/ScrollView.tsx +8 -1
- package/src/hooks/useScrollManager.ts +18 -2
package/README.md
CHANGED
|
@@ -4,6 +4,10 @@ High-level APIs for **orchestrating header motion** driven by scroll — built o
|
|
|
4
4
|
|
|
5
5
|
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).
|
|
6
6
|
|
|
7
|
+
<div align="center">
|
|
8
|
+
<img src="https://github.com/user-attachments/assets/b673349a-f26a-4cc8-bfe1-60d77deb4390" width="70%" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
7
11
|
## What this is (and isn’t)
|
|
8
12
|
|
|
9
13
|
**✅ This is**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import { ScrollView } from 'react-native';
|
|
5
4
|
import Animated from 'react-native-reanimated';
|
|
6
5
|
import { HeaderMotionScrollManager } from "./ScrollManager.js";
|
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -24,10 +23,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
24
23
|
*/
|
|
25
24
|
export function HeaderMotionFlatList({
|
|
26
25
|
scrollId,
|
|
26
|
+
animatedRef,
|
|
27
|
+
contentContainerStyle,
|
|
27
28
|
...props
|
|
28
29
|
}) {
|
|
29
30
|
return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
|
|
30
31
|
scrollId: scrollId,
|
|
32
|
+
animatedRef: animatedRef,
|
|
31
33
|
children: ({
|
|
32
34
|
onScroll,
|
|
33
35
|
...scrollViewProps
|
|
@@ -39,11 +41,11 @@ export function HeaderMotionFlatList({
|
|
|
39
41
|
...props,
|
|
40
42
|
onScroll: onScroll,
|
|
41
43
|
renderScrollComponent: propsz => /*#__PURE__*/_jsx(AnimatedScrollContainer, {
|
|
42
|
-
...propsz
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
44
|
+
...propsz,
|
|
45
|
+
contentContainerStyle: [minHeightContentContainerStyle, {
|
|
46
|
+
paddingTop: originalHeaderHeight
|
|
47
|
+
}, contentContainerStyle]
|
|
48
|
+
})
|
|
47
49
|
})
|
|
48
50
|
});
|
|
49
51
|
}
|
|
@@ -52,7 +54,7 @@ const AnimatedScrollContainer = /*#__PURE__*/forwardRef(({
|
|
|
52
54
|
contentContainerStyle,
|
|
53
55
|
...rest
|
|
54
56
|
}, ref) => {
|
|
55
|
-
return /*#__PURE__*/_jsx(ScrollView, {
|
|
57
|
+
return /*#__PURE__*/_jsx(Animated.ScrollView, {
|
|
56
58
|
...rest,
|
|
57
59
|
ref: ref,
|
|
58
60
|
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","
|
|
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":[]}
|
|
@@ -25,7 +25,8 @@ import { useScrollManager } from "../hooks/index.js";
|
|
|
25
25
|
*/
|
|
26
26
|
export function HeaderMotionScrollManager({
|
|
27
27
|
children,
|
|
28
|
-
scrollId
|
|
28
|
+
scrollId,
|
|
29
|
+
animatedRef
|
|
29
30
|
}) {
|
|
30
31
|
if (typeof children !== 'function') {
|
|
31
32
|
throw new Error('HeaderMotion.ScrollManager only accepts render function as the only child.');
|
|
@@ -33,7 +34,9 @@ export function HeaderMotionScrollManager({
|
|
|
33
34
|
const {
|
|
34
35
|
scrollableProps,
|
|
35
36
|
headerMotionContext
|
|
36
|
-
} = useScrollManager(scrollId
|
|
37
|
+
} = useScrollManager(scrollId, {
|
|
38
|
+
animatedRef
|
|
39
|
+
});
|
|
37
40
|
return children(scrollableProps, headerMotionContext);
|
|
38
41
|
}
|
|
39
42
|
//# sourceMappingURL=ScrollManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useScrollManager","HeaderMotionScrollManager","children","scrollId","Error","scrollableProps","headerMotionContext"],"sourceRoot":"../../../src","sources":["components/ScrollManager.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,mBAAU;
|
|
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":[]}
|
|
@@ -19,12 +19,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
19
19
|
*/
|
|
20
20
|
export function HeaderMotionScrollView({
|
|
21
21
|
scrollId,
|
|
22
|
+
animatedRef,
|
|
22
23
|
children,
|
|
23
24
|
contentContainerStyle,
|
|
24
25
|
...props
|
|
25
26
|
}) {
|
|
26
27
|
return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
|
|
27
28
|
scrollId: scrollId,
|
|
29
|
+
animatedRef: animatedRef,
|
|
28
30
|
children: ({
|
|
29
31
|
onScroll,
|
|
30
32
|
...scrollViewProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionScrollView","scrollId","children","contentContainerStyle","props","onScroll","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","ScrollView","View","style","paddingTop"],"sourceRoot":"../../../src","sources":["components/ScrollView.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,
|
|
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":[]}
|
|
@@ -19,6 +19,9 @@ import { DEFAULT_SCROLL_ID, getInitialScrollValue } from "../utils/index.js";
|
|
|
19
19
|
*
|
|
20
20
|
* @param scrollId - Optional unique identifier for the related scrollable.
|
|
21
21
|
* Use when you have multiple scrollables (e.g., in tabs).
|
|
22
|
+
* @param options - Optional configuration object.
|
|
23
|
+
* @param options.animatedRef - Optional animated ref to use instead of creating one internally.
|
|
24
|
+
* Useful when you need access to the scroll view ref from outside.
|
|
22
25
|
* @returns Configuration object containing:
|
|
23
26
|
* - `scrollableProps`: Props to apply to scrollable component (onScroll, scrollEventThrottle, ref)
|
|
24
27
|
* - `headerMotionContext`: Header context values (originalHeaderHeight, minHeightContentContainerStyle)
|
|
@@ -40,7 +43,8 @@ import { DEFAULT_SCROLL_ID, getInitialScrollValue } from "../utils/index.js";
|
|
|
40
43
|
* }
|
|
41
44
|
* ```
|
|
42
45
|
*/
|
|
43
|
-
|
|
46
|
+
|
|
47
|
+
export function useScrollManager(scrollId, options) {
|
|
44
48
|
const ctxValue = useContext(HeaderMotionContext);
|
|
45
49
|
if (!ctxValue) {
|
|
46
50
|
throw new Error('useScrollManager must be used within a HeaderMotion component');
|
|
@@ -53,8 +57,8 @@ export function useScrollManager(scrollId) {
|
|
|
53
57
|
originalHeaderHeight
|
|
54
58
|
} = ctxValue;
|
|
55
59
|
const id = scrollId ?? DEFAULT_SCROLL_ID;
|
|
56
|
-
const
|
|
57
|
-
|
|
60
|
+
const localRef = useAnimatedRef(); // TODO: better typing
|
|
61
|
+
const animatedRef = options?.animatedRef ?? localRef;
|
|
58
62
|
useEffect(() => {
|
|
59
63
|
return () => {
|
|
60
64
|
scheduleOnUI(scrollIdToDelete => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useCallback","useEffect","measure","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","RuntimeKind","scheduleOnUI","HeaderMotionContext","DEFAULT_SCROLL_ID","getInitialScrollValue","useScrollManager","scrollId","ctxValue","Error","scrollValues","progress","activeScrollId","progressThreshold","originalHeaderHeight","id","animatedRef","scrollIdToDelete","modify","value","newProgress","oldProgress","currentActiveScrollId","get","newCur","scrollValue","progressDiff","current","newMin","min","scrollHandler","e","activeScrollIdValue","oldCurrent","oldMin","isCollapsed","newCurrent","contentOffset","y","Math","max","onScroll","minHeightContentContainerStyle","globalThis","__RUNTIME_KIND","ReactNative","measurement","minHeight","height","scrollableProps","scrollEventThrottle","ref","headerMotionContext"],"sourceRoot":"../../../src","sources":["hooks/useScrollManager.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC1D,SACEC,OAAO,EACPC,QAAQ,EACRC,mBAAmB,EACnBC,cAAc,EACdC,wBAAwB,EACxBC,gBAAgB,
|
|
1
|
+
{"version":3,"names":["useContext","useCallback","useEffect","measure","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","RuntimeKind","scheduleOnUI","HeaderMotionContext","DEFAULT_SCROLL_ID","getInitialScrollValue","useScrollManager","scrollId","options","ctxValue","Error","scrollValues","progress","activeScrollId","progressThreshold","originalHeaderHeight","id","localRef","animatedRef","scrollIdToDelete","modify","value","newProgress","oldProgress","currentActiveScrollId","get","newCur","scrollValue","progressDiff","current","newMin","min","scrollHandler","e","activeScrollIdValue","oldCurrent","oldMin","isCollapsed","newCurrent","contentOffset","y","Math","max","onScroll","minHeightContentContainerStyle","globalThis","__RUNTIME_KIND","ReactNative","measurement","minHeight","height","scrollableProps","scrollEventThrottle","ref","headerMotionContext"],"sourceRoot":"../../../src","sources":["hooks/useScrollManager.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
|
-
import Animated from 'react-native-reanimated';
|
|
2
|
+
import Animated, { type AnimatedRef } from 'react-native-reanimated';
|
|
3
3
|
type AnimatedFlatListProps<T = any> = ComponentProps<typeof Animated.FlatList<T>>;
|
|
4
4
|
export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
|
|
5
5
|
/**
|
|
@@ -7,6 +7,11 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
|
|
|
7
7
|
* Use this when you have multiple scroll views (e.g. in tabs) to track them separately.
|
|
8
8
|
*/
|
|
9
9
|
scrollId?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Optional animated ref to use for the flat list.
|
|
12
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
13
|
+
*/
|
|
14
|
+
animatedRef?: AnimatedRef<any>;
|
|
10
15
|
};
|
|
11
16
|
/**
|
|
12
17
|
* Animated FlatList component that integrates with HeaderMotion.
|
|
@@ -25,6 +30,6 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
|
|
|
25
30
|
* </HeaderMotion>
|
|
26
31
|
* ```
|
|
27
32
|
*/
|
|
28
|
-
export declare function HeaderMotionFlatList<T = any>({ scrollId, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare function HeaderMotionFlatList<T = any>({ scrollId, animatedRef, contentContainerStyle, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
29
34
|
export {};
|
|
30
35
|
//# sourceMappingURL=FlatList.d.ts.map
|
|
@@ -1 +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;
|
|
1
|
+
{"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,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKrE,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;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC5C,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAyB9B"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ScrollManagerConfig } from '../types';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
|
+
import type { AnimatedRef } from 'react-native-reanimated';
|
|
3
4
|
type ScrollManagerRenderChildren = (scrollableProps: ScrollManagerConfig['scrollableProps'], options: ScrollManagerConfig['headerMotionContext']) => ReactNode;
|
|
4
5
|
export interface HeaderMotionScrollManagerProps {
|
|
5
6
|
/**
|
|
@@ -7,6 +8,11 @@ export interface HeaderMotionScrollManagerProps {
|
|
|
7
8
|
* Use this when you have multiple scroll views (e.g., in tabs) to track them separately.
|
|
8
9
|
*/
|
|
9
10
|
scrollId?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Optional animated ref to use for the scroll view.
|
|
13
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
14
|
+
*/
|
|
15
|
+
animatedRef?: AnimatedRef<any>;
|
|
10
16
|
/**
|
|
11
17
|
* Render function that receives scroll props and header context.
|
|
12
18
|
* Use this to create custom scroll implementations that integrate with HeaderMotion.
|
|
@@ -35,6 +41,6 @@ export interface HeaderMotionScrollManagerProps {
|
|
|
35
41
|
* </HeaderMotion>
|
|
36
42
|
* ```
|
|
37
43
|
*/
|
|
38
|
-
export declare function HeaderMotionScrollManager({ children, scrollId, }: HeaderMotionScrollManagerProps): ReactNode;
|
|
44
|
+
export declare function HeaderMotionScrollManager({ children, scrollId, animatedRef, }: HeaderMotionScrollManagerProps): ReactNode;
|
|
39
45
|
export {};
|
|
40
46
|
//# sourceMappingURL=ScrollManager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,KAAK,2BAA2B,GAAG,CACjC,eAAe,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,EACvD,OAAO,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,KAChD,SAAS,CAAC;AAEf,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,2BAA2B,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,WAAW,GACZ,EAAE,8BAA8B,aAYhC"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { type AnimatedScrollViewProps } from 'react-native-reanimated';
|
|
1
|
+
import { type AnimatedRef, type AnimatedScrollViewProps } from 'react-native-reanimated';
|
|
2
2
|
export type HeaderMotionScrollViewProps = AnimatedScrollViewProps & {
|
|
3
3
|
/**
|
|
4
4
|
* Optional unique identifier for this scroll view.
|
|
5
5
|
* Use this when you have multiple scroll views (e.g. in tabs) to track them separately.
|
|
6
6
|
*/
|
|
7
7
|
scrollId?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Optional animated ref to use for the scroll view.
|
|
10
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
11
|
+
*/
|
|
12
|
+
animatedRef?: AnimatedRef<any>;
|
|
8
13
|
};
|
|
9
14
|
/**
|
|
10
15
|
* Animated ScrollView component that integrates with HeaderMotion.
|
|
@@ -20,5 +25,5 @@ export type HeaderMotionScrollViewProps = AnimatedScrollViewProps & {
|
|
|
20
25
|
* </HeaderMotion>
|
|
21
26
|
* ```
|
|
22
27
|
*/
|
|
23
|
-
export declare function HeaderMotionScrollView({ scrollId, children, contentContainerStyle, ...props }: HeaderMotionScrollViewProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function HeaderMotionScrollView({ scrollId, animatedRef, children, contentContainerStyle, ...props }: HeaderMotionScrollViewProps): import("react/jsx-runtime").JSX.Element;
|
|
24
29
|
//# sourceMappingURL=ScrollView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAiB,EACf,KAAK,uBAAuB,EAC7B,MAAM,yBAAyB,CAAC;AAGjC,MAAM,MAAM,2BAA2B,GAAG,uBAAuB,GAAG;IAClE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAiB,EACf,KAAK,WAAW,EAChB,KAAK,uBAAuB,EAC7B,MAAM,yBAAyB,CAAC;AAGjC,MAAM,MAAM,2BAA2B,GAAG,uBAAuB,GAAG;IAClE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAyB7B"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type AnimatedRef } from 'react-native-reanimated';
|
|
1
2
|
import type { ScrollManagerConfig } from '../types';
|
|
2
3
|
/**
|
|
3
4
|
* Hook that manages scroll tracking and synchronization for header animations.
|
|
@@ -12,6 +13,9 @@ import type { ScrollManagerConfig } from '../types';
|
|
|
12
13
|
*
|
|
13
14
|
* @param scrollId - Optional unique identifier for the related scrollable.
|
|
14
15
|
* Use when you have multiple scrollables (e.g., in tabs).
|
|
16
|
+
* @param options - Optional configuration object.
|
|
17
|
+
* @param options.animatedRef - Optional animated ref to use instead of creating one internally.
|
|
18
|
+
* Useful when you need access to the scroll view ref from outside.
|
|
15
19
|
* @returns Configuration object containing:
|
|
16
20
|
* - `scrollableProps`: Props to apply to scrollable component (onScroll, scrollEventThrottle, ref)
|
|
17
21
|
* - `headerMotionContext`: Header context values (originalHeaderHeight, minHeightContentContainerStyle)
|
|
@@ -33,5 +37,12 @@ import type { ScrollManagerConfig } from '../types';
|
|
|
33
37
|
* }
|
|
34
38
|
* ```
|
|
35
39
|
*/
|
|
36
|
-
export
|
|
40
|
+
export interface UseScrollManagerOptions {
|
|
41
|
+
/**
|
|
42
|
+
* Optional animated ref to use instead of creating one internally.
|
|
43
|
+
* Useful when you need access to the scroll view ref from outside.
|
|
44
|
+
*/
|
|
45
|
+
animatedRef?: AnimatedRef<any>;
|
|
46
|
+
}
|
|
47
|
+
export declare function useScrollManager(scrollId?: string, options?: UseScrollManagerOptions): ScrollManagerConfig;
|
|
37
48
|
//# sourceMappingURL=useScrollManager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollManager.ts"],"names":[],"mappings":"
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-header-motion",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Smooth, animated collapsible headers with scroll-based motion control in React Native",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { forwardRef, type ComponentProps, type ComponentRef } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import Animated from 'react-native-reanimated';
|
|
2
|
+
import Animated, { type AnimatedRef } from 'react-native-reanimated';
|
|
4
3
|
import { HeaderMotionScrollManager } from './ScrollManager';
|
|
5
4
|
|
|
5
|
+
import type { ScrollViewProps } from 'react-native';
|
|
6
|
+
|
|
6
7
|
type AnimatedFlatListProps<T = any> = ComponentProps<
|
|
7
8
|
typeof Animated.FlatList<T>
|
|
8
9
|
>;
|
|
@@ -13,6 +14,11 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
|
|
|
13
14
|
* Use this when you have multiple scroll views (e.g. in tabs) to track them separately.
|
|
14
15
|
*/
|
|
15
16
|
scrollId?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional animated ref to use for the flat list.
|
|
19
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
20
|
+
*/
|
|
21
|
+
animatedRef?: AnimatedRef<any>;
|
|
16
22
|
};
|
|
17
23
|
|
|
18
24
|
/**
|
|
@@ -34,10 +40,12 @@ export type HeaderMotionFlatListProps<T = any> = AnimatedFlatListProps<T> & {
|
|
|
34
40
|
*/
|
|
35
41
|
export function HeaderMotionFlatList<T = any>({
|
|
36
42
|
scrollId,
|
|
43
|
+
animatedRef,
|
|
44
|
+
contentContainerStyle,
|
|
37
45
|
...props
|
|
38
46
|
}: HeaderMotionFlatListProps<T>) {
|
|
39
47
|
return (
|
|
40
|
-
<HeaderMotionScrollManager scrollId={scrollId}>
|
|
48
|
+
<HeaderMotionScrollManager scrollId={scrollId} animatedRef={animatedRef}>
|
|
41
49
|
{(
|
|
42
50
|
{ onScroll, ...scrollViewProps },
|
|
43
51
|
{ originalHeaderHeight, minHeightContentContainerStyle }
|
|
@@ -47,13 +55,15 @@ export function HeaderMotionFlatList<T = any>({
|
|
|
47
55
|
{...props}
|
|
48
56
|
onScroll={onScroll}
|
|
49
57
|
renderScrollComponent={(propsz) => (
|
|
50
|
-
<AnimatedScrollContainer
|
|
58
|
+
<AnimatedScrollContainer
|
|
59
|
+
{...propsz}
|
|
60
|
+
contentContainerStyle={[
|
|
61
|
+
minHeightContentContainerStyle,
|
|
62
|
+
{ paddingTop: originalHeaderHeight },
|
|
63
|
+
contentContainerStyle,
|
|
64
|
+
]}
|
|
65
|
+
/>
|
|
51
66
|
)}
|
|
52
|
-
contentContainerStyle={[
|
|
53
|
-
minHeightContentContainerStyle,
|
|
54
|
-
{ paddingTop: originalHeaderHeight },
|
|
55
|
-
props.contentContainerStyle,
|
|
56
|
-
]}
|
|
57
67
|
/>
|
|
58
68
|
)}
|
|
59
69
|
</HeaderMotionScrollManager>
|
|
@@ -61,12 +71,12 @@ export function HeaderMotionFlatList<T = any>({
|
|
|
61
71
|
}
|
|
62
72
|
|
|
63
73
|
const AnimatedScrollContainer = forwardRef<
|
|
64
|
-
ComponentRef<typeof ScrollView>,
|
|
74
|
+
ComponentRef<typeof Animated.ScrollView>,
|
|
65
75
|
ScrollViewProps
|
|
66
76
|
>(({ children, contentContainerStyle, ...rest }, ref) => {
|
|
67
77
|
return (
|
|
68
|
-
<ScrollView {...rest} ref={ref}>
|
|
78
|
+
<Animated.ScrollView {...rest} ref={ref}>
|
|
69
79
|
<Animated.View style={contentContainerStyle}>{children}</Animated.View>
|
|
70
|
-
</ScrollView>
|
|
80
|
+
</Animated.ScrollView>
|
|
71
81
|
);
|
|
72
82
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useScrollManager } from '../hooks';
|
|
2
2
|
import type { ScrollManagerConfig } from '../types';
|
|
3
3
|
import type { ReactNode } from 'react';
|
|
4
|
+
import type { AnimatedRef } from 'react-native-reanimated';
|
|
4
5
|
|
|
5
6
|
type ScrollManagerRenderChildren = (
|
|
6
7
|
scrollableProps: ScrollManagerConfig['scrollableProps'],
|
|
@@ -13,6 +14,11 @@ export interface HeaderMotionScrollManagerProps {
|
|
|
13
14
|
* Use this when you have multiple scroll views (e.g., in tabs) to track them separately.
|
|
14
15
|
*/
|
|
15
16
|
scrollId?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional animated ref to use for the scroll view.
|
|
19
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
20
|
+
*/
|
|
21
|
+
animatedRef?: AnimatedRef<any>;
|
|
16
22
|
/**
|
|
17
23
|
* Render function that receives scroll props and header context.
|
|
18
24
|
* Use this to create custom scroll implementations that integrate with HeaderMotion.
|
|
@@ -45,6 +51,7 @@ export interface HeaderMotionScrollManagerProps {
|
|
|
45
51
|
export function HeaderMotionScrollManager({
|
|
46
52
|
children,
|
|
47
53
|
scrollId,
|
|
54
|
+
animatedRef,
|
|
48
55
|
}: HeaderMotionScrollManagerProps) {
|
|
49
56
|
if (typeof children !== 'function') {
|
|
50
57
|
throw new Error(
|
|
@@ -52,7 +59,9 @@ export function HeaderMotionScrollManager({
|
|
|
52
59
|
);
|
|
53
60
|
}
|
|
54
61
|
|
|
55
|
-
const { scrollableProps, headerMotionContext } = useScrollManager(scrollId
|
|
62
|
+
const { scrollableProps, headerMotionContext } = useScrollManager(scrollId, {
|
|
63
|
+
animatedRef,
|
|
64
|
+
});
|
|
56
65
|
|
|
57
66
|
return children(scrollableProps, headerMotionContext);
|
|
58
67
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Animated, {
|
|
2
|
+
type AnimatedRef,
|
|
2
3
|
type AnimatedScrollViewProps,
|
|
3
4
|
} from 'react-native-reanimated';
|
|
4
5
|
import { HeaderMotionScrollManager } from './ScrollManager';
|
|
@@ -9,6 +10,11 @@ export type HeaderMotionScrollViewProps = AnimatedScrollViewProps & {
|
|
|
9
10
|
* Use this when you have multiple scroll views (e.g. in tabs) to track them separately.
|
|
10
11
|
*/
|
|
11
12
|
scrollId?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Optional animated ref to use for the scroll view.
|
|
15
|
+
* When provided, the scroll manager will use this ref instead of creating its own.
|
|
16
|
+
*/
|
|
17
|
+
animatedRef?: AnimatedRef<any>;
|
|
12
18
|
};
|
|
13
19
|
|
|
14
20
|
/**
|
|
@@ -27,12 +33,13 @@ export type HeaderMotionScrollViewProps = AnimatedScrollViewProps & {
|
|
|
27
33
|
*/
|
|
28
34
|
export function HeaderMotionScrollView({
|
|
29
35
|
scrollId,
|
|
36
|
+
animatedRef,
|
|
30
37
|
children,
|
|
31
38
|
contentContainerStyle,
|
|
32
39
|
...props
|
|
33
40
|
}: HeaderMotionScrollViewProps) {
|
|
34
41
|
return (
|
|
35
|
-
<HeaderMotionScrollManager scrollId={scrollId}>
|
|
42
|
+
<HeaderMotionScrollManager scrollId={scrollId} animatedRef={animatedRef}>
|
|
36
43
|
{(
|
|
37
44
|
{ onScroll, ...scrollViewProps },
|
|
38
45
|
{ originalHeaderHeight, minHeightContentContainerStyle }
|
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
useAnimatedRef,
|
|
7
7
|
useAnimatedScrollHandler,
|
|
8
8
|
useAnimatedStyle,
|
|
9
|
+
type AnimatedRef,
|
|
9
10
|
type ScrollHandler,
|
|
10
11
|
} from 'react-native-reanimated';
|
|
11
12
|
import { RuntimeKind, scheduleOnUI } from 'react-native-worklets';
|
|
@@ -26,6 +27,9 @@ import { DEFAULT_SCROLL_ID, getInitialScrollValue } from '../utils';
|
|
|
26
27
|
*
|
|
27
28
|
* @param scrollId - Optional unique identifier for the related scrollable.
|
|
28
29
|
* Use when you have multiple scrollables (e.g., in tabs).
|
|
30
|
+
* @param options - Optional configuration object.
|
|
31
|
+
* @param options.animatedRef - Optional animated ref to use instead of creating one internally.
|
|
32
|
+
* Useful when you need access to the scroll view ref from outside.
|
|
29
33
|
* @returns Configuration object containing:
|
|
30
34
|
* - `scrollableProps`: Props to apply to scrollable component (onScroll, scrollEventThrottle, ref)
|
|
31
35
|
* - `headerMotionContext`: Header context values (originalHeaderHeight, minHeightContentContainerStyle)
|
|
@@ -47,7 +51,18 @@ import { DEFAULT_SCROLL_ID, getInitialScrollValue } from '../utils';
|
|
|
47
51
|
* }
|
|
48
52
|
* ```
|
|
49
53
|
*/
|
|
50
|
-
export
|
|
54
|
+
export interface UseScrollManagerOptions {
|
|
55
|
+
/**
|
|
56
|
+
* Optional animated ref to use instead of creating one internally.
|
|
57
|
+
* Useful when you need access to the scroll view ref from outside.
|
|
58
|
+
*/
|
|
59
|
+
animatedRef?: AnimatedRef<any>;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export function useScrollManager(
|
|
63
|
+
scrollId?: string,
|
|
64
|
+
options?: UseScrollManagerOptions
|
|
65
|
+
): ScrollManagerConfig {
|
|
51
66
|
const ctxValue = useContext(HeaderMotionContext);
|
|
52
67
|
if (!ctxValue) {
|
|
53
68
|
throw new Error(
|
|
@@ -64,7 +79,8 @@ export function useScrollManager(scrollId?: string): ScrollManagerConfig {
|
|
|
64
79
|
} = ctxValue;
|
|
65
80
|
const id = scrollId ?? DEFAULT_SCROLL_ID;
|
|
66
81
|
|
|
67
|
-
const
|
|
82
|
+
const localRef = useAnimatedRef<any>(); // TODO: better typing
|
|
83
|
+
const animatedRef = options?.animatedRef ?? localRef;
|
|
68
84
|
|
|
69
85
|
useEffect(() => {
|
|
70
86
|
return () => {
|