react-native-header-motion 0.3.0 → 0.4.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/lib/module/components/FlatList.js +12 -2
- package/lib/module/components/FlatList.js.map +1 -1
- package/lib/module/components/ScrollManager.js +12 -2
- package/lib/module/components/ScrollManager.js.map +1 -1
- package/lib/module/components/ScrollView.js +12 -2
- package/lib/module/components/ScrollView.js.map +1 -1
- package/lib/module/hooks/useConsumerScrollHandlers.js +86 -0
- package/lib/module/hooks/useConsumerScrollHandlers.js.map +1 -0
- package/lib/module/hooks/useScrollManager.js +24 -3
- package/lib/module/hooks/useScrollManager.js.map +1 -1
- package/lib/typescript/src/components/FlatList.d.ts +1 -1
- package/lib/typescript/src/components/FlatList.d.ts.map +1 -1
- package/lib/typescript/src/components/ScrollManager.d.ts +3 -2
- package/lib/typescript/src/components/ScrollManager.d.ts.map +1 -1
- package/lib/typescript/src/components/ScrollView.d.ts +1 -1
- package/lib/typescript/src/components/ScrollView.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useConsumerScrollHandlers.d.ts +64 -0
- package/lib/typescript/src/hooks/useConsumerScrollHandlers.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useScrollManager.d.ts +2 -1
- package/lib/typescript/src/hooks/useScrollManager.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +3 -0
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/FlatList.tsx +16 -2
- package/src/components/ScrollManager.tsx +13 -1
- package/src/components/ScrollView.tsx +16 -2
- package/src/hooks/useConsumerScrollHandlers.ts +148 -0
- package/src/hooks/useScrollManager.ts +29 -4
- package/src/types.ts +4 -0
|
@@ -25,6 +25,11 @@ export function HeaderMotionFlatList({
|
|
|
25
25
|
scrollId,
|
|
26
26
|
animatedRef,
|
|
27
27
|
contentContainerStyle,
|
|
28
|
+
onScroll,
|
|
29
|
+
onScrollBeginDrag,
|
|
30
|
+
onScrollEndDrag,
|
|
31
|
+
onMomentumScrollBegin,
|
|
32
|
+
onMomentumScrollEnd,
|
|
28
33
|
...props
|
|
29
34
|
}) {
|
|
30
35
|
return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
|
|
@@ -34,8 +39,13 @@ export function HeaderMotionFlatList({
|
|
|
34
39
|
refreshing: props.refreshing,
|
|
35
40
|
onRefresh: props.onRefresh,
|
|
36
41
|
progressViewOffset: props.progressViewOffset,
|
|
42
|
+
onScroll: onScroll,
|
|
43
|
+
onScrollBeginDrag: onScrollBeginDrag,
|
|
44
|
+
onScrollEndDrag: onScrollEndDrag,
|
|
45
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
46
|
+
onMomentumScrollEnd: onMomentumScrollEnd,
|
|
37
47
|
children: ({
|
|
38
|
-
onScroll,
|
|
48
|
+
onScroll: managedOnScroll,
|
|
39
49
|
refreshControl: managedRefreshControl,
|
|
40
50
|
...scrollViewProps
|
|
41
51
|
}, {
|
|
@@ -44,7 +54,7 @@ export function HeaderMotionFlatList({
|
|
|
44
54
|
}) => /*#__PURE__*/_jsx(Animated.FlatList, {
|
|
45
55
|
...scrollViewProps,
|
|
46
56
|
...props,
|
|
47
|
-
onScroll:
|
|
57
|
+
onScroll: managedOnScroll,
|
|
48
58
|
...(managedRefreshControl && {
|
|
49
59
|
refreshControl: managedRefreshControl
|
|
50
60
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","animatedRef","contentContainerStyle","props","refreshControl","refreshing","onRefresh","progressViewOffset","children","
|
|
1
|
+
{"version":3,"names":["forwardRef","Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionFlatList","scrollId","animatedRef","contentContainerStyle","onScroll","onScrollBeginDrag","onScrollEndDrag","onMomentumScrollBegin","onMomentumScrollEnd","props","refreshControl","refreshing","onRefresh","progressViewOffset","children","managedOnScroll","managedRefreshControl","scrollViewProps","originalHeaderHeight","minHeightContentContainerStyle","FlatList","renderScrollComponent","scrollComponentProps","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;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;EACrBC,QAAQ;EACRC,iBAAiB;EACjBC,eAAe;EACfC,qBAAqB;EACrBC,mBAAmB;EACnB,GAAGC;AACyB,CAAC,EAAE;EAC/B,oBACEV,IAAA,CAACF,yBAAyB;IACxBI,QAAQ,EAAEA,QAAS;IACnBC,WAAW,EAAEA,WAAY;IACzBQ,cAAc,EAAED,KAAK,CAACC,cAAe;IACrCC,UAAU,EAAEF,KAAK,CAACE,UAAW;IAC7BC,SAAS,EAAEH,KAAK,CAACG,SAAU;IAC3BC,kBAAkB,EAAEJ,KAAK,CAACI,kBAAmB;IAC7CT,QAAQ,EAAEA,QAAS;IACnBC,iBAAiB,EAAEA,iBAAkB;IACrCC,eAAe,EAAEA,eAAgB;IACjCC,qBAAqB,EAAEA,qBAAsB;IAC7CC,mBAAmB,EAAEA,mBAAoB;IAAAM,QAAA,EAExCA,CACC;MACEV,QAAQ,EAAEW,eAAe;MACzBL,cAAc,EAAEM,qBAAqB;MACrC,GAAGC;IACL,CAAC,EACD;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDpB,IAAA,CAACH,QAAQ,CAACwB,QAAQ;MAAA,GACZH,eAAe;MAAA,GACfR,KAAK;MACTL,QAAQ,EAAEW,eAAgB;MAAA,IACrBC,qBAAqB,IAAI;QAC5BN,cAAc,EAAEM;MAClB,CAAC;MACDK,qBAAqB,EAAGC,oBAAoB,iBAC1CvB,IAAA,CAACwB,uBAAuB;QAAA,GAClBD,oBAAoB;QACxBnB,qBAAqB,EAAE,CACrBgB,8BAA8B,EAC9B;UAAEK,UAAU,EAAEN;QAAqB,CAAC,EACpCf,qBAAqB;MACrB,CACH;IACD,CACH;EACF,CACwB,CAAC;AAEhC;AAEA,MAAMoB,uBAAuB,gBAAG5B,UAAU,CAGxC,CAAC;EAAEmB,QAAQ;EAAEX,qBAAqB;EAAE,GAAGsB;AAAK,CAAC,EAAEC,GAAG,KAAK;EACvD,oBACE3B,IAAA,CAACH,QAAQ,CAAC+B,UAAU;IAAA,GAAKF,IAAI;IAAEC,GAAG,EAAEA,GAAI;IAAAZ,QAAA,eACtCf,IAAA,CAACH,QAAQ,CAACgC,IAAI;MAACC,KAAK,EAAE1B,qBAAsB;MAAAW,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CACpD,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}
|
|
@@ -30,7 +30,12 @@ export function HeaderMotionScrollManager({
|
|
|
30
30
|
refreshControl,
|
|
31
31
|
refreshing,
|
|
32
32
|
onRefresh,
|
|
33
|
-
progressViewOffset
|
|
33
|
+
progressViewOffset,
|
|
34
|
+
onScroll,
|
|
35
|
+
onScrollBeginDrag,
|
|
36
|
+
onScrollEndDrag,
|
|
37
|
+
onMomentumScrollBegin,
|
|
38
|
+
onMomentumScrollEnd
|
|
34
39
|
}) {
|
|
35
40
|
if (typeof children !== 'function') {
|
|
36
41
|
throw new Error('HeaderMotion.ScrollManager only accepts render function as the only child.');
|
|
@@ -43,7 +48,12 @@ export function HeaderMotionScrollManager({
|
|
|
43
48
|
refreshControl,
|
|
44
49
|
refreshing,
|
|
45
50
|
onRefresh,
|
|
46
|
-
progressViewOffset
|
|
51
|
+
progressViewOffset,
|
|
52
|
+
onScroll,
|
|
53
|
+
onScrollBeginDrag,
|
|
54
|
+
onScrollEndDrag,
|
|
55
|
+
onMomentumScrollBegin,
|
|
56
|
+
onMomentumScrollEnd
|
|
47
57
|
});
|
|
48
58
|
return children(scrollableProps, headerMotionContext);
|
|
49
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,QAAQ,mBAAU;
|
|
1
|
+
{"version":3,"names":["useScrollManager","HeaderMotionScrollManager","children","scrollId","animatedRef","refreshControl","refreshing","onRefresh","progressViewOffset","onScroll","onScrollBeginDrag","onScrollEndDrag","onMomentumScrollBegin","onMomentumScrollEnd","Error","scrollableProps","headerMotionContext"],"sourceRoot":"../../../src","sources":["components/ScrollManager.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,mBAAU;AAqC3C;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,WAAW;EACXC,cAAc;EACdC,UAAU;EACVC,SAAS;EACTC,kBAAkB;EAClBC,QAAQ;EACRC,iBAAiB;EACjBC,eAAe;EACfC,qBAAqB;EACrBC;AAC8B,CAAC,EAAE;EACjC,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;IAClC,MAAM,IAAIY,KAAK,CACb,4EACF,CAAC;EACH;EAEA,MAAM;IAAEC,eAAe;IAAEC;EAAoB,CAAC,GAAGhB,gBAAgB,CAACG,QAAQ,EAAE;IAC1EC,WAAW;IACXC,cAAc;IACdC,UAAU;IACVC,SAAS;IACTC,kBAAkB;IAClBC,QAAQ;IACRC,iBAAiB;IACjBC,eAAe;IACfC,qBAAqB;IACrBC;EACF,CAAC,CAAC;EAEF,OAAOX,QAAQ,CAACa,eAAe,EAAEC,mBAAmB,CAAC;AACvD","ignoreList":[]}
|
|
@@ -23,14 +23,24 @@ export function HeaderMotionScrollView({
|
|
|
23
23
|
children,
|
|
24
24
|
contentContainerStyle,
|
|
25
25
|
refreshControl,
|
|
26
|
+
onScroll,
|
|
27
|
+
onScrollBeginDrag,
|
|
28
|
+
onScrollEndDrag,
|
|
29
|
+
onMomentumScrollBegin,
|
|
30
|
+
onMomentumScrollEnd,
|
|
26
31
|
...props
|
|
27
32
|
}) {
|
|
28
33
|
return /*#__PURE__*/_jsx(HeaderMotionScrollManager, {
|
|
29
34
|
scrollId: scrollId,
|
|
30
35
|
animatedRef: animatedRef,
|
|
31
36
|
refreshControl: refreshControl,
|
|
37
|
+
onScroll: onScroll,
|
|
38
|
+
onScrollBeginDrag: onScrollBeginDrag,
|
|
39
|
+
onScrollEndDrag: onScrollEndDrag,
|
|
40
|
+
onMomentumScrollBegin: onMomentumScrollBegin,
|
|
41
|
+
onMomentumScrollEnd: onMomentumScrollEnd,
|
|
32
42
|
children: ({
|
|
33
|
-
onScroll,
|
|
43
|
+
onScroll: managedOnScroll,
|
|
34
44
|
refreshControl: managedRefreshControl,
|
|
35
45
|
...scrollViewProps
|
|
36
46
|
}, {
|
|
@@ -39,7 +49,7 @@ export function HeaderMotionScrollView({
|
|
|
39
49
|
}) => /*#__PURE__*/_jsx(Animated.ScrollView, {
|
|
40
50
|
...scrollViewProps,
|
|
41
51
|
...props,
|
|
42
|
-
onScroll:
|
|
52
|
+
onScroll: managedOnScroll,
|
|
43
53
|
...(managedRefreshControl && {
|
|
44
54
|
refreshControl: managedRefreshControl
|
|
45
55
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionScrollView","scrollId","animatedRef","children","contentContainerStyle","refreshControl","props","
|
|
1
|
+
{"version":3,"names":["Animated","HeaderMotionScrollManager","jsx","_jsx","HeaderMotionScrollView","scrollId","animatedRef","children","contentContainerStyle","refreshControl","onScroll","onScrollBeginDrag","onScrollEndDrag","onMomentumScrollBegin","onMomentumScrollEnd","props","managedOnScroll","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;EACdC,QAAQ;EACRC,iBAAiB;EACjBC,eAAe;EACfC,qBAAqB;EACrBC,mBAAmB;EACnB,GAAGC;AACwB,CAAC,EAAE;EAC9B,oBACEZ,IAAA,CAACF,yBAAyB;IACxBI,QAAQ,EAAEA,QAAS;IACnBC,WAAW,EAAEA,WAAY;IACzBG,cAAc,EAAEA,cAAe;IAC/BC,QAAQ,EAAEA,QAAS;IACnBC,iBAAiB,EAAEA,iBAAkB;IACrCC,eAAe,EAAEA,eAAgB;IACjCC,qBAAqB,EAAEA,qBAAsB;IAC7CC,mBAAmB,EAAEA,mBAAoB;IAAAP,QAAA,EAExCA,CACC;MACEG,QAAQ,EAAEM,eAAe;MACzBP,cAAc,EAAEQ,qBAAqB;MACrC,GAAGC;IACL,CAAC,EACD;MAAEC,oBAAoB;MAAEC;IAA+B,CAAC,kBAExDjB,IAAA,CAACH,QAAQ,CAACqB,UAAU;MAAA,GACdH,eAAe;MAAA,GACfH,KAAK;MACTL,QAAQ,EAAEM,eAAgB;MAAA,IACrBC,qBAAqB,IAAI;QAC5BR,cAAc,EAAEQ;MAClB,CAAC;MAAAV,QAAA,eAEDJ,IAAA,CAACH,QAAQ,CAACsB,IAAI;QACZC,KAAK,EAAE,CACLH,8BAA8B,EAC9B;UAAEI,UAAU,EAAEL;QAAqB,CAAC,EACpCX,qBAAqB,CACrB;QAAAD,QAAA,EAEDA;MAAQ,CACI;IAAC,CACG;EACtB,CACwB,CAAC;AAEhC","ignoreList":[]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import { useComposedEventHandler } from 'react-native-reanimated';
|
|
5
|
+
import { scheduleOnRN } from 'react-native-worklets';
|
|
6
|
+
export function useConsumerScrollHandlers({
|
|
7
|
+
onScroll,
|
|
8
|
+
onScrollBeginDrag,
|
|
9
|
+
onScrollEndDrag,
|
|
10
|
+
onMomentumScrollBegin,
|
|
11
|
+
onMomentumScrollEnd
|
|
12
|
+
}) {
|
|
13
|
+
const consumerOnScroll = typeof onScroll === 'function' ? onScroll : undefined;
|
|
14
|
+
const consumerOnScrollBeginDrag = typeof onScrollBeginDrag === 'function' ? onScrollBeginDrag : undefined;
|
|
15
|
+
const consumerOnScrollEndDrag = typeof onScrollEndDrag === 'function' ? onScrollEndDrag : undefined;
|
|
16
|
+
const consumerOnMomentumScrollBegin = typeof onMomentumScrollBegin === 'function' ? onMomentumScrollBegin : undefined;
|
|
17
|
+
const consumerOnMomentumScrollEnd = typeof onMomentumScrollEnd === 'function' ? onMomentumScrollEnd : undefined;
|
|
18
|
+
const onScrollBridge = useCallback(event => {
|
|
19
|
+
'worklet';
|
|
20
|
+
|
|
21
|
+
if (!consumerOnScroll) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
scheduleOnRN(consumerOnScroll, {
|
|
25
|
+
nativeEvent: event
|
|
26
|
+
});
|
|
27
|
+
}, [consumerOnScroll]);
|
|
28
|
+
const onBeginDragBridge = useCallback(event => {
|
|
29
|
+
'worklet';
|
|
30
|
+
|
|
31
|
+
if (!consumerOnScrollBeginDrag) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
scheduleOnRN(consumerOnScrollBeginDrag, {
|
|
35
|
+
nativeEvent: event
|
|
36
|
+
});
|
|
37
|
+
}, [consumerOnScrollBeginDrag]);
|
|
38
|
+
const onEndDragBridge = useCallback(event => {
|
|
39
|
+
'worklet';
|
|
40
|
+
|
|
41
|
+
if (!consumerOnScrollEndDrag) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
scheduleOnRN(consumerOnScrollEndDrag, {
|
|
45
|
+
nativeEvent: event
|
|
46
|
+
});
|
|
47
|
+
}, [consumerOnScrollEndDrag]);
|
|
48
|
+
const onMomentumBeginBridge = useCallback(event => {
|
|
49
|
+
'worklet';
|
|
50
|
+
|
|
51
|
+
if (!consumerOnMomentumScrollBegin) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
scheduleOnRN(consumerOnMomentumScrollBegin, {
|
|
55
|
+
nativeEvent: event
|
|
56
|
+
});
|
|
57
|
+
}, [consumerOnMomentumScrollBegin]);
|
|
58
|
+
const onMomentumEndBridge = useCallback(event => {
|
|
59
|
+
'worklet';
|
|
60
|
+
|
|
61
|
+
if (!consumerOnMomentumScrollEnd) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
scheduleOnRN(consumerOnMomentumScrollEnd, {
|
|
65
|
+
nativeEvent: event
|
|
66
|
+
});
|
|
67
|
+
}, [consumerOnMomentumScrollEnd]);
|
|
68
|
+
return {
|
|
69
|
+
onScroll: onScrollBridge,
|
|
70
|
+
onBeginDrag: onBeginDragBridge,
|
|
71
|
+
onEndDrag: onEndDragBridge,
|
|
72
|
+
onMomentumBegin: onMomentumBeginBridge,
|
|
73
|
+
onMomentumEnd: onMomentumEndBridge
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
export function useScrollHandlerComposition(ownScrollHandler, consumerScrollHandler) {
|
|
77
|
+
// TODO: I guess the typing here could be more precise
|
|
78
|
+
const consumerWorkletHandler = isAnimatedScrollHandler(consumerScrollHandler) ? consumerScrollHandler : null;
|
|
79
|
+
return useComposedEventHandler([ownScrollHandler, consumerWorkletHandler]);
|
|
80
|
+
}
|
|
81
|
+
function isAnimatedScrollHandler(handler) {
|
|
82
|
+
// FUTURE: we could be checking just by typeof handler === 'object'?
|
|
83
|
+
// This seems safer for now, unless Reanimated changes this shape. Revisit
|
|
84
|
+
return !!handler && 'workletEventHandler' in handler;
|
|
85
|
+
}
|
|
86
|
+
//# sourceMappingURL=useConsumerScrollHandlers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useComposedEventHandler","scheduleOnRN","useConsumerScrollHandlers","onScroll","onScrollBeginDrag","onScrollEndDrag","onMomentumScrollBegin","onMomentumScrollEnd","consumerOnScroll","undefined","consumerOnScrollBeginDrag","consumerOnScrollEndDrag","consumerOnMomentumScrollBegin","consumerOnMomentumScrollEnd","onScrollBridge","event","nativeEvent","onBeginDragBridge","onEndDragBridge","onMomentumBeginBridge","onMomentumEndBridge","onBeginDrag","onEndDrag","onMomentumBegin","onMomentumEnd","useScrollHandlerComposition","ownScrollHandler","consumerScrollHandler","consumerWorkletHandler","isAnimatedScrollHandler","handler"],"sourceRoot":"../../../src","sources":["hooks/useConsumerScrollHandlers.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SACEC,uBAAuB,QAIlB,yBAAyB;AAChC,SAASC,YAAY,QAAQ,uBAAuB;AAwBpD,OAAO,SAASC,yBAAyBA,CAAC;EACxCC,QAAQ;EACRC,iBAAiB;EACjBC,eAAe;EACfC,qBAAqB;EACrBC;AAC2B,CAAC,EAAyB;EACrD,MAAMC,gBAAgB,GACpB,OAAOL,QAAQ,KAAK,UAAU,GACzBA,QAAQ,GACTM,SAAS;EACf,MAAMC,yBAAyB,GAC7B,OAAON,iBAAiB,KAAK,UAAU,GAClCA,iBAAiB,GAClBK,SAAS;EACf,MAAME,uBAAuB,GAC3B,OAAON,eAAe,KAAK,UAAU,GAChCA,eAAe,GAChBI,SAAS;EACf,MAAMG,6BAA6B,GACjC,OAAON,qBAAqB,KAAK,UAAU,GACtCA,qBAAqB,GACtBG,SAAS;EACf,MAAMI,2BAA2B,GAC/B,OAAON,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,GACpBE,SAAS;EAEf,MAAMK,cAAc,GAAGf,WAAW,CAC/BgB,KAAkB,IAAK;IACtB,SAAS;;IACT,IAAI,CAACP,gBAAgB,EAAE;MACrB;IACF;IACAP,YAAY,CAACO,gBAAgB,EAAE;MAAEQ,WAAW,EAAED;IAAM,CAAY,CAAC;EACnE,CAAC,EACD,CAACP,gBAAgB,CACnB,CAAC;EAED,MAAMS,iBAAiB,GAAGlB,WAAW,CAClCgB,KAAkB,IAAK;IACtB,SAAS;;IACT,IAAI,CAACL,yBAAyB,EAAE;MAC9B;IACF;IACAT,YAAY,CAACS,yBAAyB,EAAE;MACtCM,WAAW,EAAED;IACf,CAAY,CAAC;EACf,CAAC,EACD,CAACL,yBAAyB,CAC5B,CAAC;EAED,MAAMQ,eAAe,GAAGnB,WAAW,CAChCgB,KAAkB,IAAK;IACtB,SAAS;;IACT,IAAI,CAACJ,uBAAuB,EAAE;MAC5B;IACF;IACAV,YAAY,CAACU,uBAAuB,EAAE;MAAEK,WAAW,EAAED;IAAM,CAAY,CAAC;EAC1E,CAAC,EACD,CAACJ,uBAAuB,CAC1B,CAAC;EAED,MAAMQ,qBAAqB,GAAGpB,WAAW,CACtCgB,KAAkB,IAAK;IACtB,SAAS;;IACT,IAAI,CAACH,6BAA6B,EAAE;MAClC;IACF;IACAX,YAAY,CAACW,6BAA6B,EAAE;MAC1CI,WAAW,EAAED;IACf,CAAY,CAAC;EACf,CAAC,EACD,CAACH,6BAA6B,CAChC,CAAC;EAED,MAAMQ,mBAAmB,GAAGrB,WAAW,CACpCgB,KAAkB,IAAK;IACtB,SAAS;;IACT,IAAI,CAACF,2BAA2B,EAAE;MAChC;IACF;IACAZ,YAAY,CAACY,2BAA2B,EAAE;MACxCG,WAAW,EAAED;IACf,CAAY,CAAC;EACf,CAAC,EACD,CAACF,2BAA2B,CAC9B,CAAC;EAED,OAAO;IACLV,QAAQ,EAAEW,cAAc;IACxBO,WAAW,EAAEJ,iBAAiB;IAC9BK,SAAS,EAAEJ,eAAe;IAC1BK,eAAe,EAAEJ,qBAAqB;IACtCK,aAAa,EAAEJ;EACjB,CAAC;AACH;AAEA,OAAO,SAASK,2BAA2BA,CACzCC,gBAA8D,EAC9DC,qBAA6D,EAC7D;EACA;EACA,MAAMC,sBAAsB,GAAGC,uBAAuB,CAACF,qBAAqB,CAAC,GACxEA,qBAAqB,GACtB,IAAI;EAER,OAAO3B,uBAAuB,CAAC,CAAC0B,gBAAgB,EAAEE,sBAAsB,CAAC,CAAC;AAC5E;AAEA,SAASC,uBAAuBA,CAC9BC,OAA+C,EACR;EACvC;EACA;EACA,OAAO,CAAC,CAACA,OAAO,IAAI,qBAAqB,IAAIA,OAAO;AACtD","ignoreList":[]}
|
|
@@ -6,6 +6,7 @@ import { RuntimeKind, scheduleOnUI } from 'react-native-worklets';
|
|
|
6
6
|
import { HeaderMotionContext } from "../context.js";
|
|
7
7
|
import { DEFAULT_SCROLL_ID, getInitialScrollValue } from "../utils/index.js";
|
|
8
8
|
import { resolveRefreshControl } from "./refreshControl.js";
|
|
9
|
+
import { useConsumerScrollHandlers, useScrollHandlerComposition } from "./useConsumerScrollHandlers.js";
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Hook that manages scroll tracking and synchronization for header animations.
|
|
@@ -64,6 +65,19 @@ export function useScrollManager(scrollId, options) {
|
|
|
64
65
|
const refreshing = options?.refreshing;
|
|
65
66
|
const onRefresh = options?.onRefresh;
|
|
66
67
|
const progressViewOffset = options?.progressViewOffset ?? originalHeaderHeight;
|
|
68
|
+
const {
|
|
69
|
+
onScroll,
|
|
70
|
+
onBeginDrag,
|
|
71
|
+
onEndDrag,
|
|
72
|
+
onMomentumBegin,
|
|
73
|
+
onMomentumEnd
|
|
74
|
+
} = useConsumerScrollHandlers({
|
|
75
|
+
onScroll: options?.onScroll,
|
|
76
|
+
onScrollBeginDrag: options?.onScrollBeginDrag,
|
|
77
|
+
onScrollEndDrag: options?.onScrollEndDrag,
|
|
78
|
+
onMomentumScrollBegin: options?.onMomentumScrollBegin,
|
|
79
|
+
onMomentumScrollEnd: options?.onMomentumScrollEnd
|
|
80
|
+
});
|
|
67
81
|
useEffect(() => {
|
|
68
82
|
return () => {
|
|
69
83
|
scheduleOnUI(scrollIdToDelete => {
|
|
@@ -110,6 +124,7 @@ export function useScrollManager(scrollId, options) {
|
|
|
110
124
|
const scrollHandler = useCallback(e => {
|
|
111
125
|
'worklet';
|
|
112
126
|
|
|
127
|
+
onScroll?.(e);
|
|
113
128
|
scrollValues.modify(value => {
|
|
114
129
|
if (!value[id]) {
|
|
115
130
|
return value;
|
|
@@ -128,8 +143,14 @@ export function useScrollManager(scrollId, options) {
|
|
|
128
143
|
}
|
|
129
144
|
return value;
|
|
130
145
|
});
|
|
131
|
-
}, [scrollValues, id, activeScrollId, progressThreshold]);
|
|
132
|
-
const
|
|
146
|
+
}, [scrollValues, id, activeScrollId, progressThreshold, onScroll]);
|
|
147
|
+
const animatedScrollHandler = useAnimatedScrollHandler({
|
|
148
|
+
onScroll: scrollHandler,
|
|
149
|
+
onBeginDrag,
|
|
150
|
+
onEndDrag,
|
|
151
|
+
onMomentumBegin,
|
|
152
|
+
onMomentumEnd
|
|
153
|
+
});
|
|
133
154
|
const minHeightContentContainerStyle = useAnimatedStyle(() => {
|
|
134
155
|
if (globalThis.__RUNTIME_KIND === RuntimeKind.ReactNative) {
|
|
135
156
|
return {};
|
|
@@ -149,7 +170,7 @@ export function useScrollManager(scrollId, options) {
|
|
|
149
170
|
progressViewOffset
|
|
150
171
|
});
|
|
151
172
|
const scrollableProps = {
|
|
152
|
-
onScroll,
|
|
173
|
+
onScroll: useScrollHandlerComposition(animatedScrollHandler, options?.onScroll),
|
|
153
174
|
scrollEventThrottle: 16,
|
|
154
175
|
ref: animatedRef,
|
|
155
176
|
refreshControl: resolvedRefreshControl
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useCallback","useEffect","measure","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","RuntimeKind","scheduleOnUI","HeaderMotionContext","DEFAULT_SCROLL_ID","getInitialScrollValue","resolveRefreshControl","useScrollManager","scrollId","options","ctxValue","Error","scrollValues","progress","activeScrollId","progressThreshold","originalHeaderHeight","id","localRef","animatedRef","refreshControl","refreshing","onRefresh","progressViewOffset","scrollIdToDelete","modify","value","newProgress","oldProgress","currentActiveScrollId","get","newCur","scrollValue","progressDiff","current","newMin","min","scrollHandler","e","activeScrollIdValue","oldCurrent","oldMin","isCollapsed","newCurrent","contentOffset","y","Math","max","
|
|
1
|
+
{"version":3,"names":["useContext","useCallback","useEffect","measure","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","RuntimeKind","scheduleOnUI","HeaderMotionContext","DEFAULT_SCROLL_ID","getInitialScrollValue","resolveRefreshControl","useConsumerScrollHandlers","useScrollHandlerComposition","useScrollManager","scrollId","options","ctxValue","Error","scrollValues","progress","activeScrollId","progressThreshold","originalHeaderHeight","id","localRef","animatedRef","refreshControl","refreshing","onRefresh","progressViewOffset","onScroll","onBeginDrag","onEndDrag","onMomentumBegin","onMomentumEnd","onScrollBeginDrag","onScrollEndDrag","onMomentumScrollBegin","onMomentumScrollEnd","scrollIdToDelete","modify","value","newProgress","oldProgress","currentActiveScrollId","get","newCur","scrollValue","progressDiff","current","newMin","min","scrollHandler","e","activeScrollIdValue","oldCurrent","oldMin","isCollapsed","newCurrent","contentOffset","y","Math","max","animatedScrollHandler","minHeightContentContainerStyle","globalThis","__RUNTIME_KIND","ReactNative","measurement","minHeight","height","resolvedRefreshControl","scrollableProps","scrollEventThrottle","ref","headerMotionContext"],"sourceRoot":"../../../src","sources":["hooks/useScrollManager.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -29,5 +29,5 @@ export type HeaderMotionFlatListProps<T = any> = ComponentProps<typeof Animated.
|
|
|
29
29
|
* </HeaderMotion>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
|
-
export declare function HeaderMotionFlatList<T = any>({ scrollId, animatedRef, contentContainerStyle, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare function HeaderMotionFlatList<T = any>({ scrollId, animatedRef, contentContainerStyle, onScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, ...props }: HeaderMotionFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
33
33
|
//# 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;AAC3E,OAAO,QAAQ,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKrE,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,cAAc,CAC7D,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,GAAG;IACF;;;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,
|
|
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,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,cAAc,CAC7D,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,GAAG;IACF;;;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,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CA4C9B"}
|
|
@@ -2,8 +2,9 @@ import type { ScrollManagerConfig } from '../types';
|
|
|
2
2
|
import type { ResolveRefreshControlOptions } from '../hooks/refreshControl';
|
|
3
3
|
import type { ReactNode } from 'react';
|
|
4
4
|
import type { AnimatedRef } from 'react-native-reanimated';
|
|
5
|
+
import type { ConsumerScrollEventHandlers } from '../hooks/useConsumerScrollHandlers';
|
|
5
6
|
type ScrollManagerRenderChildren = (scrollableProps: ScrollManagerConfig['scrollableProps'], options: ScrollManagerConfig['headerMotionContext']) => ReactNode;
|
|
6
|
-
export interface HeaderMotionScrollManagerProps extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'
|
|
7
|
+
export interface HeaderMotionScrollManagerProps extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'>, ConsumerScrollEventHandlers {
|
|
7
8
|
/**
|
|
8
9
|
* Optional unique identifier for this scroll view.
|
|
9
10
|
* Use this when you have multiple scroll views (e.g., in tabs) to track them separately.
|
|
@@ -47,6 +48,6 @@ export interface HeaderMotionScrollManagerProps extends Omit<ResolveRefreshContr
|
|
|
47
48
|
* </HeaderMotion>
|
|
48
49
|
* ```
|
|
49
50
|
*/
|
|
50
|
-
export declare function HeaderMotionScrollManager({ children, scrollId, animatedRef, refreshControl, refreshing, onRefresh, progressViewOffset, }: HeaderMotionScrollManagerProps): ReactNode;
|
|
51
|
+
export declare function HeaderMotionScrollManager({ children, scrollId, animatedRef, refreshControl, refreshing, onRefresh, progressViewOffset, onScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, }: HeaderMotionScrollManagerProps): ReactNode;
|
|
51
52
|
export {};
|
|
52
53
|
//# 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,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,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,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAEtF,KAAK,2BAA2B,GAAG,CACjC,eAAe,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,EACvD,OAAO,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,KAChD,SAAS,CAAC;AAEf,MAAM,WAAW,8BACf,SAAQ,IAAI,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,EAC9D,2BAA2B;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,EAAE,2BAA2B,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,GACpB,EAAE,8BAA8B,aAqBhC"}
|
|
@@ -25,5 +25,5 @@ export type HeaderMotionScrollViewProps = AnimatedScrollViewProps & {
|
|
|
25
25
|
* </HeaderMotion>
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
|
-
export declare function HeaderMotionScrollView({ scrollId, animatedRef, children, contentContainerStyle, refreshControl, ...props }: HeaderMotionScrollViewProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function HeaderMotionScrollView({ scrollId, animatedRef, children, contentContainerStyle, refreshControl, onScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, ...props }: HeaderMotionScrollViewProps): import("react/jsx-runtime").JSX.Element;
|
|
29
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,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,cAAc,EACd,GAAG,KAAK,EACT,EAAE,2BAA2B,
|
|
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,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAyC7B"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { type AnimatedScrollViewProps, type ScrollHandler, type ScrollHandlerProcessed } from 'react-native-reanimated';
|
|
2
|
+
import type { ScrollHandlerContext } from '../types';
|
|
3
|
+
type AnimatedScrollViewOnScroll = AnimatedScrollViewProps['onScroll'];
|
|
4
|
+
type ScrollEvent = Parameters<ScrollHandler<Record<string, unknown>>>[0];
|
|
5
|
+
export type ConsumerScrollEventHandlers = Pick<AnimatedScrollViewProps, 'onScroll' | 'onScrollBeginDrag' | 'onScrollEndDrag' | 'onMomentumScrollBegin' | 'onMomentumScrollEnd'>;
|
|
6
|
+
export interface ConsumerScrollBridges {
|
|
7
|
+
onScroll?: (event: ScrollEvent) => void;
|
|
8
|
+
onBeginDrag?: (event: ScrollEvent) => void;
|
|
9
|
+
onEndDrag?: (event: ScrollEvent) => void;
|
|
10
|
+
onMomentumBegin?: (event: ScrollEvent) => void;
|
|
11
|
+
onMomentumEnd?: (event: ScrollEvent) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare function useConsumerScrollHandlers({ onScroll, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, }: ConsumerScrollEventHandlers): ConsumerScrollBridges;
|
|
14
|
+
export declare function useScrollHandlerComposition(ownScrollHandler: ScrollHandlerProcessed<ScrollHandlerContext>, consumerScrollHandler: AnimatedScrollViewOnScroll | undefined): (event: Readonly<{
|
|
15
|
+
bubbles: boolean | undefined;
|
|
16
|
+
cancelable: boolean | undefined;
|
|
17
|
+
currentTarget: number | import("react-native").HostInstance;
|
|
18
|
+
defaultPrevented: boolean | undefined;
|
|
19
|
+
dispatchConfig: Readonly<{
|
|
20
|
+
registrationName: string;
|
|
21
|
+
}>;
|
|
22
|
+
eventPhase: number | undefined;
|
|
23
|
+
preventDefault: () => void;
|
|
24
|
+
isDefaultPrevented: () => boolean;
|
|
25
|
+
stopPropagation: () => void;
|
|
26
|
+
isPropagationStopped: () => boolean;
|
|
27
|
+
isTrusted: boolean | undefined;
|
|
28
|
+
nativeEvent: Readonly<{
|
|
29
|
+
contentInset: Readonly<{
|
|
30
|
+
bottom: number;
|
|
31
|
+
left: number;
|
|
32
|
+
right: number;
|
|
33
|
+
top: number;
|
|
34
|
+
}>;
|
|
35
|
+
contentOffset: Readonly<{
|
|
36
|
+
y: number;
|
|
37
|
+
x: number;
|
|
38
|
+
}>;
|
|
39
|
+
contentSize: Readonly<{
|
|
40
|
+
height: number;
|
|
41
|
+
width: number;
|
|
42
|
+
}>;
|
|
43
|
+
layoutMeasurement: Readonly<{
|
|
44
|
+
height: number;
|
|
45
|
+
width: number;
|
|
46
|
+
}>;
|
|
47
|
+
velocity?: Readonly<{
|
|
48
|
+
y: number;
|
|
49
|
+
x: number;
|
|
50
|
+
}>;
|
|
51
|
+
zoomScale?: number;
|
|
52
|
+
responderIgnoreScroll?: boolean;
|
|
53
|
+
targetContentOffset?: Readonly<{
|
|
54
|
+
y: number;
|
|
55
|
+
x: number;
|
|
56
|
+
}>;
|
|
57
|
+
}>;
|
|
58
|
+
persist: () => void;
|
|
59
|
+
target: (number | undefined) | import("react-native").HostInstance;
|
|
60
|
+
timeStamp: number;
|
|
61
|
+
type: string | undefined;
|
|
62
|
+
}>, context?: ScrollHandlerContext | undefined) => void;
|
|
63
|
+
export {};
|
|
64
|
+
//# sourceMappingURL=useConsumerScrollHandlers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useConsumerScrollHandlers.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useConsumerScrollHandlers.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD,KAAK,0BAA0B,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAC;AACtE,KAAK,WAAW,GAAG,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEzE,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,uBAAuB,EACrB,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,uBAAuB,GACvB,qBAAqB,CACxB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,GACpB,EAAE,2BAA2B,GAAG,qBAAqB,CA0FrD;AAED,wBAAgB,2BAA2B,CACzC,gBAAgB,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,EAC9D,qBAAqB,EAAE,0BAA0B,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAQ9D"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type AnimatedRef } from 'react-native-reanimated';
|
|
2
2
|
import type { ScrollManagerConfig } from '../types';
|
|
3
3
|
import { type ResolveRefreshControlOptions } from './refreshControl';
|
|
4
|
+
import { type ConsumerScrollEventHandlers } from './useConsumerScrollHandlers';
|
|
4
5
|
/**
|
|
5
6
|
* Hook that manages scroll tracking and synchronization for header animations.
|
|
6
7
|
* Returns props to apply to scrollable components and additional values that help with adjusting styling of the scrollables to header's dimensions.
|
|
@@ -38,7 +39,7 @@ import { type ResolveRefreshControlOptions } from './refreshControl';
|
|
|
38
39
|
* }
|
|
39
40
|
* ```
|
|
40
41
|
*/
|
|
41
|
-
export interface UseScrollManagerOptions extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'
|
|
42
|
+
export interface UseScrollManagerOptions extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'>, ConsumerScrollEventHandlers {
|
|
42
43
|
/**
|
|
43
44
|
* Optional animated ref to use instead of creating one internally.
|
|
44
45
|
* Useful when you need access to the scroll view ref from outside.
|
|
@@ -1 +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;AAElE,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,kBAAkB,CAAC;
|
|
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;AAElE,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,KAAK,2BAA2B,EACjC,MAAM,6BAA6B,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,EAC9D,2BAA2B;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;CACzE;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,uBAAuB,GAChC,mBAAmB,CAyKrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,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,cAAc,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACnD,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;KACvB,CAAC;IACF,mBAAmB,EAAE,gCAAgC,CAAC;CACvD"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,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,cAAc,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACnD,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;KACvB,CAAC;IACF,mBAAmB,EAAE,gCAAgC,CAAC;CACvD;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-header-motion",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.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",
|
|
@@ -40,6 +40,11 @@ export function HeaderMotionFlatList<T = any>({
|
|
|
40
40
|
scrollId,
|
|
41
41
|
animatedRef,
|
|
42
42
|
contentContainerStyle,
|
|
43
|
+
onScroll,
|
|
44
|
+
onScrollBeginDrag,
|
|
45
|
+
onScrollEndDrag,
|
|
46
|
+
onMomentumScrollBegin,
|
|
47
|
+
onMomentumScrollEnd,
|
|
43
48
|
...props
|
|
44
49
|
}: HeaderMotionFlatListProps<T>) {
|
|
45
50
|
return (
|
|
@@ -50,15 +55,24 @@ export function HeaderMotionFlatList<T = any>({
|
|
|
50
55
|
refreshing={props.refreshing}
|
|
51
56
|
onRefresh={props.onRefresh}
|
|
52
57
|
progressViewOffset={props.progressViewOffset}
|
|
58
|
+
onScroll={onScroll}
|
|
59
|
+
onScrollBeginDrag={onScrollBeginDrag}
|
|
60
|
+
onScrollEndDrag={onScrollEndDrag}
|
|
61
|
+
onMomentumScrollBegin={onMomentumScrollBegin}
|
|
62
|
+
onMomentumScrollEnd={onMomentumScrollEnd}
|
|
53
63
|
>
|
|
54
64
|
{(
|
|
55
|
-
{
|
|
65
|
+
{
|
|
66
|
+
onScroll: managedOnScroll,
|
|
67
|
+
refreshControl: managedRefreshControl,
|
|
68
|
+
...scrollViewProps
|
|
69
|
+
},
|
|
56
70
|
{ originalHeaderHeight, minHeightContentContainerStyle }
|
|
57
71
|
) => (
|
|
58
72
|
<Animated.FlatList
|
|
59
73
|
{...scrollViewProps}
|
|
60
74
|
{...props}
|
|
61
|
-
onScroll={
|
|
75
|
+
onScroll={managedOnScroll}
|
|
62
76
|
{...(managedRefreshControl && {
|
|
63
77
|
refreshControl: managedRefreshControl,
|
|
64
78
|
})}
|
|
@@ -3,6 +3,7 @@ import type { ScrollManagerConfig } from '../types';
|
|
|
3
3
|
import type { ResolveRefreshControlOptions } from '../hooks/refreshControl';
|
|
4
4
|
import type { ReactNode } from 'react';
|
|
5
5
|
import type { AnimatedRef } from 'react-native-reanimated';
|
|
6
|
+
import type { ConsumerScrollEventHandlers } from '../hooks/useConsumerScrollHandlers';
|
|
6
7
|
|
|
7
8
|
type ScrollManagerRenderChildren = (
|
|
8
9
|
scrollableProps: ScrollManagerConfig['scrollableProps'],
|
|
@@ -10,7 +11,8 @@ type ScrollManagerRenderChildren = (
|
|
|
10
11
|
) => ReactNode;
|
|
11
12
|
|
|
12
13
|
export interface HeaderMotionScrollManagerProps
|
|
13
|
-
extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'
|
|
14
|
+
extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'>,
|
|
15
|
+
ConsumerScrollEventHandlers {
|
|
14
16
|
/**
|
|
15
17
|
* Optional unique identifier for this scroll view.
|
|
16
18
|
* Use this when you have multiple scroll views (e.g., in tabs) to track them separately.
|
|
@@ -63,6 +65,11 @@ export function HeaderMotionScrollManager({
|
|
|
63
65
|
refreshing,
|
|
64
66
|
onRefresh,
|
|
65
67
|
progressViewOffset,
|
|
68
|
+
onScroll,
|
|
69
|
+
onScrollBeginDrag,
|
|
70
|
+
onScrollEndDrag,
|
|
71
|
+
onMomentumScrollBegin,
|
|
72
|
+
onMomentumScrollEnd,
|
|
66
73
|
}: HeaderMotionScrollManagerProps) {
|
|
67
74
|
if (typeof children !== 'function') {
|
|
68
75
|
throw new Error(
|
|
@@ -76,6 +83,11 @@ export function HeaderMotionScrollManager({
|
|
|
76
83
|
refreshing,
|
|
77
84
|
onRefresh,
|
|
78
85
|
progressViewOffset,
|
|
86
|
+
onScroll,
|
|
87
|
+
onScrollBeginDrag,
|
|
88
|
+
onScrollEndDrag,
|
|
89
|
+
onMomentumScrollBegin,
|
|
90
|
+
onMomentumScrollEnd,
|
|
79
91
|
});
|
|
80
92
|
|
|
81
93
|
return children(scrollableProps, headerMotionContext);
|
|
@@ -37,6 +37,11 @@ export function HeaderMotionScrollView({
|
|
|
37
37
|
children,
|
|
38
38
|
contentContainerStyle,
|
|
39
39
|
refreshControl,
|
|
40
|
+
onScroll,
|
|
41
|
+
onScrollBeginDrag,
|
|
42
|
+
onScrollEndDrag,
|
|
43
|
+
onMomentumScrollBegin,
|
|
44
|
+
onMomentumScrollEnd,
|
|
40
45
|
...props
|
|
41
46
|
}: HeaderMotionScrollViewProps) {
|
|
42
47
|
return (
|
|
@@ -44,15 +49,24 @@ export function HeaderMotionScrollView({
|
|
|
44
49
|
scrollId={scrollId}
|
|
45
50
|
animatedRef={animatedRef}
|
|
46
51
|
refreshControl={refreshControl}
|
|
52
|
+
onScroll={onScroll}
|
|
53
|
+
onScrollBeginDrag={onScrollBeginDrag}
|
|
54
|
+
onScrollEndDrag={onScrollEndDrag}
|
|
55
|
+
onMomentumScrollBegin={onMomentumScrollBegin}
|
|
56
|
+
onMomentumScrollEnd={onMomentumScrollEnd}
|
|
47
57
|
>
|
|
48
58
|
{(
|
|
49
|
-
{
|
|
59
|
+
{
|
|
60
|
+
onScroll: managedOnScroll,
|
|
61
|
+
refreshControl: managedRefreshControl,
|
|
62
|
+
...scrollViewProps
|
|
63
|
+
},
|
|
50
64
|
{ originalHeaderHeight, minHeightContentContainerStyle }
|
|
51
65
|
) => (
|
|
52
66
|
<Animated.ScrollView
|
|
53
67
|
{...scrollViewProps}
|
|
54
68
|
{...props}
|
|
55
|
-
onScroll={
|
|
69
|
+
onScroll={managedOnScroll}
|
|
56
70
|
{...(managedRefreshControl && {
|
|
57
71
|
refreshControl: managedRefreshControl,
|
|
58
72
|
})}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
useComposedEventHandler,
|
|
4
|
+
type AnimatedScrollViewProps,
|
|
5
|
+
type ScrollHandler,
|
|
6
|
+
type ScrollHandlerProcessed,
|
|
7
|
+
} from 'react-native-reanimated';
|
|
8
|
+
import { scheduleOnRN } from 'react-native-worklets';
|
|
9
|
+
import type { ScrollHandlerContext } from '../types';
|
|
10
|
+
|
|
11
|
+
type ConsumerScrollHandler = (event: unknown) => void;
|
|
12
|
+
type AnimatedScrollViewOnScroll = AnimatedScrollViewProps['onScroll'];
|
|
13
|
+
type ScrollEvent = Parameters<ScrollHandler<Record<string, unknown>>>[0];
|
|
14
|
+
|
|
15
|
+
export type ConsumerScrollEventHandlers = Pick<
|
|
16
|
+
AnimatedScrollViewProps,
|
|
17
|
+
| 'onScroll'
|
|
18
|
+
| 'onScrollBeginDrag'
|
|
19
|
+
| 'onScrollEndDrag'
|
|
20
|
+
| 'onMomentumScrollBegin'
|
|
21
|
+
| 'onMomentumScrollEnd'
|
|
22
|
+
>;
|
|
23
|
+
|
|
24
|
+
export interface ConsumerScrollBridges {
|
|
25
|
+
onScroll?: (event: ScrollEvent) => void;
|
|
26
|
+
onBeginDrag?: (event: ScrollEvent) => void;
|
|
27
|
+
onEndDrag?: (event: ScrollEvent) => void;
|
|
28
|
+
onMomentumBegin?: (event: ScrollEvent) => void;
|
|
29
|
+
onMomentumEnd?: (event: ScrollEvent) => void;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function useConsumerScrollHandlers({
|
|
33
|
+
onScroll,
|
|
34
|
+
onScrollBeginDrag,
|
|
35
|
+
onScrollEndDrag,
|
|
36
|
+
onMomentumScrollBegin,
|
|
37
|
+
onMomentumScrollEnd,
|
|
38
|
+
}: ConsumerScrollEventHandlers): ConsumerScrollBridges {
|
|
39
|
+
const consumerOnScroll =
|
|
40
|
+
typeof onScroll === 'function'
|
|
41
|
+
? (onScroll as ConsumerScrollHandler)
|
|
42
|
+
: undefined;
|
|
43
|
+
const consumerOnScrollBeginDrag =
|
|
44
|
+
typeof onScrollBeginDrag === 'function'
|
|
45
|
+
? (onScrollBeginDrag as ConsumerScrollHandler)
|
|
46
|
+
: undefined;
|
|
47
|
+
const consumerOnScrollEndDrag =
|
|
48
|
+
typeof onScrollEndDrag === 'function'
|
|
49
|
+
? (onScrollEndDrag as ConsumerScrollHandler)
|
|
50
|
+
: undefined;
|
|
51
|
+
const consumerOnMomentumScrollBegin =
|
|
52
|
+
typeof onMomentumScrollBegin === 'function'
|
|
53
|
+
? (onMomentumScrollBegin as ConsumerScrollHandler)
|
|
54
|
+
: undefined;
|
|
55
|
+
const consumerOnMomentumScrollEnd =
|
|
56
|
+
typeof onMomentumScrollEnd === 'function'
|
|
57
|
+
? (onMomentumScrollEnd as ConsumerScrollHandler)
|
|
58
|
+
: undefined;
|
|
59
|
+
|
|
60
|
+
const onScrollBridge = useCallback(
|
|
61
|
+
(event: ScrollEvent) => {
|
|
62
|
+
'worklet';
|
|
63
|
+
if (!consumerOnScroll) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
scheduleOnRN(consumerOnScroll, { nativeEvent: event } as unknown);
|
|
67
|
+
},
|
|
68
|
+
[consumerOnScroll]
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
const onBeginDragBridge = useCallback(
|
|
72
|
+
(event: ScrollEvent) => {
|
|
73
|
+
'worklet';
|
|
74
|
+
if (!consumerOnScrollBeginDrag) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
scheduleOnRN(consumerOnScrollBeginDrag, {
|
|
78
|
+
nativeEvent: event,
|
|
79
|
+
} as unknown);
|
|
80
|
+
},
|
|
81
|
+
[consumerOnScrollBeginDrag]
|
|
82
|
+
);
|
|
83
|
+
|
|
84
|
+
const onEndDragBridge = useCallback(
|
|
85
|
+
(event: ScrollEvent) => {
|
|
86
|
+
'worklet';
|
|
87
|
+
if (!consumerOnScrollEndDrag) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
scheduleOnRN(consumerOnScrollEndDrag, { nativeEvent: event } as unknown);
|
|
91
|
+
},
|
|
92
|
+
[consumerOnScrollEndDrag]
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
const onMomentumBeginBridge = useCallback(
|
|
96
|
+
(event: ScrollEvent) => {
|
|
97
|
+
'worklet';
|
|
98
|
+
if (!consumerOnMomentumScrollBegin) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
scheduleOnRN(consumerOnMomentumScrollBegin, {
|
|
102
|
+
nativeEvent: event,
|
|
103
|
+
} as unknown);
|
|
104
|
+
},
|
|
105
|
+
[consumerOnMomentumScrollBegin]
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
const onMomentumEndBridge = useCallback(
|
|
109
|
+
(event: ScrollEvent) => {
|
|
110
|
+
'worklet';
|
|
111
|
+
if (!consumerOnMomentumScrollEnd) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
scheduleOnRN(consumerOnMomentumScrollEnd, {
|
|
115
|
+
nativeEvent: event,
|
|
116
|
+
} as unknown);
|
|
117
|
+
},
|
|
118
|
+
[consumerOnMomentumScrollEnd]
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
return {
|
|
122
|
+
onScroll: onScrollBridge,
|
|
123
|
+
onBeginDrag: onBeginDragBridge,
|
|
124
|
+
onEndDrag: onEndDragBridge,
|
|
125
|
+
onMomentumBegin: onMomentumBeginBridge,
|
|
126
|
+
onMomentumEnd: onMomentumEndBridge,
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export function useScrollHandlerComposition(
|
|
131
|
+
ownScrollHandler: ScrollHandlerProcessed<ScrollHandlerContext>,
|
|
132
|
+
consumerScrollHandler: AnimatedScrollViewOnScroll | undefined
|
|
133
|
+
) {
|
|
134
|
+
// TODO: I guess the typing here could be more precise
|
|
135
|
+
const consumerWorkletHandler = isAnimatedScrollHandler(consumerScrollHandler)
|
|
136
|
+
? (consumerScrollHandler as ScrollHandlerProcessed<ScrollHandlerContext>)
|
|
137
|
+
: null;
|
|
138
|
+
|
|
139
|
+
return useComposedEventHandler([ownScrollHandler, consumerWorkletHandler]);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
function isAnimatedScrollHandler(
|
|
143
|
+
handler: AnimatedScrollViewOnScroll | undefined
|
|
144
|
+
): handler is AnimatedScrollViewOnScroll {
|
|
145
|
+
// FUTURE: we could be checking just by typeof handler === 'object'?
|
|
146
|
+
// This seems safer for now, unless Reanimated changes this shape. Revisit
|
|
147
|
+
return !!handler && 'workletEventHandler' in handler;
|
|
148
|
+
}
|
|
@@ -17,6 +17,11 @@ import {
|
|
|
17
17
|
resolveRefreshControl,
|
|
18
18
|
type ResolveRefreshControlOptions,
|
|
19
19
|
} from './refreshControl';
|
|
20
|
+
import {
|
|
21
|
+
useConsumerScrollHandlers,
|
|
22
|
+
useScrollHandlerComposition,
|
|
23
|
+
type ConsumerScrollEventHandlers,
|
|
24
|
+
} from './useConsumerScrollHandlers';
|
|
20
25
|
|
|
21
26
|
/**
|
|
22
27
|
* Hook that manages scroll tracking and synchronization for header animations.
|
|
@@ -56,7 +61,8 @@ import {
|
|
|
56
61
|
* ```
|
|
57
62
|
*/
|
|
58
63
|
export interface UseScrollManagerOptions
|
|
59
|
-
extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'
|
|
64
|
+
extends Omit<ResolveRefreshControlOptions, 'progressViewOffset'>,
|
|
65
|
+
ConsumerScrollEventHandlers {
|
|
60
66
|
/**
|
|
61
67
|
* Optional animated ref to use instead of creating one internally.
|
|
62
68
|
* Useful when you need access to the scroll view ref from outside.
|
|
@@ -97,6 +103,15 @@ export function useScrollManager(
|
|
|
97
103
|
const progressViewOffset =
|
|
98
104
|
options?.progressViewOffset ?? originalHeaderHeight;
|
|
99
105
|
|
|
106
|
+
const { onScroll, onBeginDrag, onEndDrag, onMomentumBegin, onMomentumEnd } =
|
|
107
|
+
useConsumerScrollHandlers({
|
|
108
|
+
onScroll: options?.onScroll,
|
|
109
|
+
onScrollBeginDrag: options?.onScrollBeginDrag,
|
|
110
|
+
onScrollEndDrag: options?.onScrollEndDrag,
|
|
111
|
+
onMomentumScrollBegin: options?.onMomentumScrollBegin,
|
|
112
|
+
onMomentumScrollEnd: options?.onMomentumScrollEnd,
|
|
113
|
+
});
|
|
114
|
+
|
|
100
115
|
useEffect(() => {
|
|
101
116
|
return () => {
|
|
102
117
|
scheduleOnUI((scrollIdToDelete) => {
|
|
@@ -157,6 +172,7 @@ export function useScrollManager(
|
|
|
157
172
|
const scrollHandler = useCallback<ScrollHandler>(
|
|
158
173
|
(e) => {
|
|
159
174
|
'worklet';
|
|
175
|
+
onScroll?.(e);
|
|
160
176
|
|
|
161
177
|
scrollValues.modify((value) => {
|
|
162
178
|
if (!value[id]) {
|
|
@@ -182,10 +198,16 @@ export function useScrollManager(
|
|
|
182
198
|
return value;
|
|
183
199
|
});
|
|
184
200
|
},
|
|
185
|
-
[scrollValues, id, activeScrollId, progressThreshold]
|
|
201
|
+
[scrollValues, id, activeScrollId, progressThreshold, onScroll]
|
|
186
202
|
);
|
|
187
203
|
|
|
188
|
-
const
|
|
204
|
+
const animatedScrollHandler = useAnimatedScrollHandler({
|
|
205
|
+
onScroll: scrollHandler,
|
|
206
|
+
onBeginDrag,
|
|
207
|
+
onEndDrag,
|
|
208
|
+
onMomentumBegin,
|
|
209
|
+
onMomentumEnd,
|
|
210
|
+
});
|
|
189
211
|
|
|
190
212
|
const minHeightContentContainerStyle = useAnimatedStyle(() => {
|
|
191
213
|
if (globalThis.__RUNTIME_KIND === RuntimeKind.ReactNative) {
|
|
@@ -211,7 +233,10 @@ export function useScrollManager(
|
|
|
211
233
|
});
|
|
212
234
|
|
|
213
235
|
const scrollableProps = {
|
|
214
|
-
onScroll
|
|
236
|
+
onScroll: useScrollHandlerComposition(
|
|
237
|
+
animatedScrollHandler,
|
|
238
|
+
options?.onScroll
|
|
239
|
+
),
|
|
215
240
|
scrollEventThrottle: 16,
|
|
216
241
|
ref: animatedRef,
|
|
217
242
|
refreshControl: resolvedRefreshControl,
|