react-native-animated-header-flat-list 1.6.8 → 1.6.11
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/LICENSE +1 -1
- package/lib/module/components/AnimatedHeaderFlatList.js +14 -20
- package/lib/module/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js +10 -15
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/package.json +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/styleUtils.d.ts +1 -1
- package/lib/typescript/src/utils/styleUtils.d.ts.map +1 -1
- package/package.json +67 -59
- package/src/components/AnimatedHeaderFlatList.tsx +73 -75
- package/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts +22 -26
- package/src/index.tsx +1 -1
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2026 Karen
|
|
4
4
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
5
|
of this software and associated documentation files (the "Software"), to deal
|
|
6
6
|
in the Software without restriction, including without limitation the rights
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { forwardRef, useLayoutEffect, useCallback, useMemo } from 'react';
|
|
4
|
-
import { StatusBar, StyleSheet, View
|
|
4
|
+
import { StatusBar, StyleSheet, View } from 'react-native';
|
|
5
5
|
import Animated from 'react-native-reanimated';
|
|
6
6
|
import { useAnimatedHeaderFlatListAnimatedStyles } from "../hooks/useAnimatedHeaderFlatListAnimatedStyles.js";
|
|
7
7
|
import { getFontSizeFromStyle } from "../utils/styleUtils.js";
|
|
@@ -43,13 +43,10 @@ function AnimatedHeaderFlatListInner({
|
|
|
43
43
|
navigationTitleTranslateX,
|
|
44
44
|
navigationTitleTranslateY
|
|
45
45
|
});
|
|
46
|
-
const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.
|
|
47
|
-
style: navigationTitleAnimatedStyle,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
numberOfLines: 1,
|
|
51
|
-
children: title
|
|
52
|
-
})
|
|
46
|
+
const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.Text, {
|
|
47
|
+
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
48
|
+
numberOfLines: 1,
|
|
49
|
+
children: title
|
|
53
50
|
}), [navigationTitleAnimatedStyle, navigationTitleStyle, title]);
|
|
54
51
|
useLayoutEffect(() => {
|
|
55
52
|
navigation.setOptions({
|
|
@@ -61,7 +58,7 @@ function AnimatedHeaderFlatListInner({
|
|
|
61
58
|
headerTitleAlign: 'center'
|
|
62
59
|
});
|
|
63
60
|
}, [navigationTitle, navigation]);
|
|
64
|
-
const
|
|
61
|
+
const ListHeaderComponent = useMemo(() => {
|
|
65
62
|
return /*#__PURE__*/_jsx(View, {
|
|
66
63
|
style: styles.headerWrapper,
|
|
67
64
|
children: /*#__PURE__*/_jsxs(View, {
|
|
@@ -84,19 +81,16 @@ function AnimatedHeaderFlatListInner({
|
|
|
84
81
|
style: [navigationBarAnimatedStyle, styles.animatedNavigationBar, {
|
|
85
82
|
backgroundColor: navigationBarColor
|
|
86
83
|
}]
|
|
87
|
-
}), /*#__PURE__*/_jsx(Animated.
|
|
88
|
-
style: headerTitleAnimatedStyle,
|
|
84
|
+
}), /*#__PURE__*/_jsx(Animated.Text, {
|
|
89
85
|
onLayout: event => {
|
|
90
86
|
setHeaderTitleLayout(event.nativeEvent.layout);
|
|
91
87
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
children: title
|
|
96
|
-
})
|
|
88
|
+
numberOfLines: 1,
|
|
89
|
+
style: [headerTitleAnimatedStyle, styles.headerTitle, headerTitleStyle],
|
|
90
|
+
children: title
|
|
97
91
|
})]
|
|
98
92
|
})
|
|
99
|
-
}
|
|
93
|
+
});
|
|
100
94
|
}, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout, navigationBarAnimatedStyle, navigationBarColor]);
|
|
101
95
|
const renderItem = useCallback(({
|
|
102
96
|
item
|
|
@@ -110,7 +104,7 @@ function AnimatedHeaderFlatListInner({
|
|
|
110
104
|
style: [stickyHeaderAnimatedStyle, styles.stickyHeader, {
|
|
111
105
|
bottom: headerLayout.height - navigationBarHeight * 2 + stickyComponentLayout.height
|
|
112
106
|
}],
|
|
113
|
-
children:
|
|
107
|
+
children: ListHeaderComponent
|
|
114
108
|
}), StickyComponent && /*#__PURE__*/_jsx(Animated.View, {
|
|
115
109
|
style: [styles.stickyComponentContainer, stickyComponentAnimatedStyle],
|
|
116
110
|
onLayout: event => {
|
|
@@ -123,7 +117,7 @@ function AnimatedHeaderFlatListInner({
|
|
|
123
117
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
124
118
|
item
|
|
125
119
|
}) : null;
|
|
126
|
-
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyComponentAnimatedStyle, stickyHeaderAnimatedStyle, headerLayout.height,
|
|
120
|
+
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyComponentAnimatedStyle, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
|
|
127
121
|
const data = useMemo(() => {
|
|
128
122
|
const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
|
|
129
123
|
return [HEADER_ITEM, ...listData];
|
|
@@ -143,7 +137,7 @@ function AnimatedHeaderFlatListInner({
|
|
|
143
137
|
translateY: navigationBarHeight
|
|
144
138
|
}]
|
|
145
139
|
}],
|
|
146
|
-
children:
|
|
140
|
+
children: ListHeaderComponent
|
|
147
141
|
}),
|
|
148
142
|
onScroll: scrollHandler,
|
|
149
143
|
data: data,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useLayoutEffect","useCallback","useMemo","StatusBar","StyleSheet","View","
|
|
1
|
+
{"version":3,"names":["forwardRef","useLayoutEffect","useCallback","useMemo","StatusBar","StyleSheet","View","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","useNavigation","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatListInner","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","ref","navigation","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","stickyComponentAnimatedStyle","navigationBarAnimatedStyle","navigationTitleAnimatedStyle","headerTitleAnimatedStyle","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","headerTitleFontSize","navigationTitleFontSize","navigationTitle","Text","style","numberOfLines","children","setOptions","headerShown","headerStyle","styles","navigationBar","headerShadowVisible","headerTransparent","headerTitle","headerTitleAlign","ListHeaderComponent","headerWrapper","headerContainer","top","onLayout","event","nativeEvent","layout","height","undefined","headerContentContainer","animatedNavigationBar","backgroundColor","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","data","listData","Array","isArray","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","create","overflow","position","left","right","width","AnimatedHeaderFlatList"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useHeaderHeight } from '@react-navigation/elements';
|
|
4
|
-
import { useCallback,
|
|
4
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
5
5
|
import { useWindowDimensions } from 'react-native';
|
|
6
|
-
import { interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue
|
|
6
|
+
import { interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
|
|
7
7
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
8
8
|
export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
9
9
|
headerTitleFontSize,
|
|
@@ -35,7 +35,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
35
35
|
width: 0,
|
|
36
36
|
height: 0
|
|
37
37
|
});
|
|
38
|
-
const distanceBetweenTitleAndNavigationBar =
|
|
38
|
+
const distanceBetweenTitleAndNavigationBar = useSharedValue(0);
|
|
39
39
|
const navigationTitleOpacity = useSharedValue(0);
|
|
40
40
|
const stickyHeaderOpacity = useSharedValue(0);
|
|
41
41
|
const stickyComponentOpacity = useSharedValue(0);
|
|
@@ -43,6 +43,9 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
43
43
|
updateStickyComponentLayout(layout);
|
|
44
44
|
stickyComponentOpacity.value = layout.height > 0 ? 1 : 0;
|
|
45
45
|
}, [updateStickyComponentLayout, stickyComponentOpacity]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
distanceBetweenTitleAndNavigationBar.value = Math.max(0, (navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 + headerTitleLayout.y - navigationBarHeight);
|
|
48
|
+
}, [headerTitleLayout, navigationBarHeight, safeAreaInsets.top, distanceBetweenTitleAndNavigationBar]);
|
|
46
49
|
const navigationBarAnimatedStyle = useAnimatedStyle(() => {
|
|
47
50
|
return {
|
|
48
51
|
opacity: interpolate(scrollY.value, [0, headerLayout.height - navigationBarHeight * 2], [0, 1], 'clamp'),
|
|
@@ -64,11 +67,11 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
64
67
|
return {
|
|
65
68
|
opacity: 1 - navigationTitleOpacity.value,
|
|
66
69
|
transform: [{
|
|
67
|
-
translateX: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2 + navigationTitleTranslateX], 'clamp')
|
|
70
|
+
translateX: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar.value], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2 + navigationTitleTranslateX], 'clamp')
|
|
68
71
|
}, {
|
|
69
|
-
translateY: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, navigationTitleTranslateY], 'clamp')
|
|
72
|
+
translateY: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar.value], [0, navigationTitleTranslateY], 'clamp')
|
|
70
73
|
}, {
|
|
71
|
-
scale: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [1, navigationTitleFontSize && headerTitleFontSize ? navigationTitleFontSize / headerTitleFontSize : 1], 'clamp')
|
|
74
|
+
scale: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar.value], [1, navigationTitleFontSize && headerTitleFontSize ? navigationTitleFontSize / headerTitleFontSize : 1], 'clamp')
|
|
72
75
|
}]
|
|
73
76
|
};
|
|
74
77
|
});
|
|
@@ -101,17 +104,9 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
101
104
|
});
|
|
102
105
|
const scrollHandler = useAnimatedScrollHandler(event => {
|
|
103
106
|
scrollY.value = event.contentOffset.y;
|
|
104
|
-
navigationTitleOpacity.value = event.contentOffset.y >= distanceBetweenTitleAndNavigationBar ? 1 : 0;
|
|
107
|
+
navigationTitleOpacity.value = event.contentOffset.y >= distanceBetweenTitleAndNavigationBar.value ? 1 : 0;
|
|
105
108
|
stickyHeaderOpacity.value = event.contentOffset.y >= headerLayout.height - navigationBarHeight * 2 ? 1 : 0;
|
|
106
109
|
});
|
|
107
|
-
useEffect(() => {
|
|
108
|
-
return () => {
|
|
109
|
-
cancelAnimation(scrollY);
|
|
110
|
-
cancelAnimation(navigationTitleOpacity);
|
|
111
|
-
cancelAnimation(stickyHeaderOpacity);
|
|
112
|
-
cancelAnimation(stickyComponentOpacity);
|
|
113
|
-
};
|
|
114
|
-
}, [scrollY, navigationTitleOpacity, stickyHeaderOpacity, stickyComponentOpacity]);
|
|
115
110
|
return {
|
|
116
111
|
scrollHandler,
|
|
117
112
|
navigationBarHeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useHeaderHeight","useCallback","
|
|
1
|
+
{"version":3,"names":["useHeaderHeight","useCallback","useEffect","useState","useWindowDimensions","interpolate","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","navigationTitleTranslateX","navigationTitleTranslateY","width","windowWidth","scrollY","navigationBarHeight","safeAreaInsets","headerLayout","setHeaderLayout","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","updateStickyComponentLayout","distanceBetweenTitleAndNavigationBar","navigationTitleOpacity","stickyHeaderOpacity","stickyComponentOpacity","setStickyComponentLayout","layout","value","Math","max","top","navigationBarAnimatedStyle","opacity","marginBottom","navigationTitleAnimatedStyle","transform","translateX","translateY","headerTitleAnimatedStyle","scale","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","stickyComponentAnimatedStyle","scrollHandler","event","contentOffset"],"sourceRoot":"../../../src","sources":["hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["AnimatedHeaderFlatList"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,sBAAsB,QAAQ,wCAAqC;AAE5E,
|
|
1
|
+
{"version":3,"names":["AnimatedHeaderFlatList"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,sBAAsB,QAAQ,wCAAqC;AAE5E,eAAeA,sBAAsB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EAMd,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,QAAQ,EAIR,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAMvE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,UAAU,CAAC;IAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,KAAK,2BAA2B,CAAC,CAAC,IAAI,IAAI,CACxC,uBAAuB,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,CACZ,GACC,KAAK,CAAC;AAuRR,eAAO,MAAM,sBAAsB,EAE9B,CAAC,CAAC,EACL,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CACrC,KACE,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,
|
|
1
|
+
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,eAAe,CAAC;IACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,qBAAqB,EAAE,eAAe,CAAC;IACvC,wBAAwB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,wBAAwB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnD,yBAAyB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,6BAA6B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAAI,yGAKrD,yCAAyC,KAAG,oCAgM9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,eAAe,sBAAsB,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type StyleProp, type TextStyle } from 'react-native';
|
|
2
|
-
export declare const getFontSizeFromStyle: (textStyle: StyleProp<TextStyle>) =>
|
|
2
|
+
export declare const getFontSizeFromStyle: (textStyle: StyleProp<TextStyle>) => any;
|
|
3
3
|
//# sourceMappingURL=styleUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,QAgBnE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-animated-header-flat-list",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.11",
|
|
4
4
|
"description": "A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.",
|
|
5
|
-
"source": "./src/index.tsx",
|
|
6
5
|
"main": "./lib/module/index.js",
|
|
7
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
8
7
|
"exports": {
|
|
9
8
|
".": {
|
|
9
|
+
"source": "./src/index.tsx",
|
|
10
10
|
"types": "./lib/typescript/src/index.d.ts",
|
|
11
11
|
"default": "./lib/module/index.js"
|
|
12
12
|
},
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
],
|
|
34
34
|
"scripts": {
|
|
35
35
|
"example": "yarn workspace react-native-animated-header-flat-list-example",
|
|
36
|
-
"test": "jest",
|
|
37
|
-
"typecheck": "tsc",
|
|
38
|
-
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
39
36
|
"clean": "del-cli lib",
|
|
40
37
|
"prepare": "bob build",
|
|
41
|
-
"
|
|
38
|
+
"typecheck": "tsc",
|
|
39
|
+
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
40
|
+
"test": "jest",
|
|
41
|
+
"release": "release-it --only-version"
|
|
42
42
|
},
|
|
43
43
|
"keywords": [
|
|
44
44
|
"react-native",
|
|
@@ -62,32 +62,34 @@
|
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@commitlint/config-conventional": "^19.8.1",
|
|
65
|
-
"@eslint/compat": "^1.3.
|
|
65
|
+
"@eslint/compat": "^1.3.2",
|
|
66
66
|
"@eslint/eslintrc": "^3.3.1",
|
|
67
|
-
"@eslint/js": "^9.
|
|
68
|
-
"@
|
|
69
|
-
"@react-native/eslint-config": "
|
|
70
|
-
"@react-navigation/elements": "^2.
|
|
71
|
-
"@react-navigation/native": "^7.1.
|
|
72
|
-
"@react-navigation/native-stack": "^7.
|
|
73
|
-
"@release-it/conventional-changelog": "^
|
|
74
|
-
"@types/jest": "^
|
|
75
|
-
"@types/react": "^19.1.
|
|
67
|
+
"@eslint/js": "^9.35.0",
|
|
68
|
+
"@react-native/babel-preset": "0.83.0",
|
|
69
|
+
"@react-native/eslint-config": "0.83.0",
|
|
70
|
+
"@react-navigation/elements": "^2.9.10",
|
|
71
|
+
"@react-navigation/native": "^7.1.33",
|
|
72
|
+
"@react-navigation/native-stack": "^7.14.5",
|
|
73
|
+
"@release-it/conventional-changelog": "^10.0.1",
|
|
74
|
+
"@types/jest": "^29.5.14",
|
|
75
|
+
"@types/react": "^19.1.12",
|
|
76
76
|
"commitlint": "^19.8.1",
|
|
77
|
-
"del-cli": "^
|
|
78
|
-
"eslint": "^9.
|
|
77
|
+
"del-cli": "^6.0.0",
|
|
78
|
+
"eslint": "^9.35.0",
|
|
79
79
|
"eslint-config-prettier": "^10.1.8",
|
|
80
|
-
"eslint-plugin-ft-flow": "^3.0.11",
|
|
81
80
|
"eslint-plugin-prettier": "^5.5.4",
|
|
82
|
-
"jest": "^
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"react
|
|
86
|
-
"react-native
|
|
87
|
-
"react-native-
|
|
88
|
-
"react-native-
|
|
89
|
-
"
|
|
90
|
-
"
|
|
81
|
+
"jest": "^29.7.0",
|
|
82
|
+
"lefthook": "^2.0.3",
|
|
83
|
+
"prettier": "^2.8.8",
|
|
84
|
+
"react": "19.2.0",
|
|
85
|
+
"react-native": "0.83.2",
|
|
86
|
+
"react-native-builder-bob": "^0.40.13",
|
|
87
|
+
"react-native-reanimated": "^4.2.2",
|
|
88
|
+
"react-native-safe-area-context": "^5.7.0",
|
|
89
|
+
"react-native-screens": "^4.24.0",
|
|
90
|
+
"release-it": "^19.0.4",
|
|
91
|
+
"turbo": "^2.5.6",
|
|
92
|
+
"typescript": "^5.9.2"
|
|
91
93
|
},
|
|
92
94
|
"peerDependencies": {
|
|
93
95
|
"@react-navigation/elements": ">=2.0.0",
|
|
@@ -96,12 +98,38 @@
|
|
|
96
98
|
"react": "*",
|
|
97
99
|
"react-native": "*",
|
|
98
100
|
"react-native-reanimated": ">=3.0.0",
|
|
99
|
-
"react-native-safe-area-context": ">=5.0.0"
|
|
101
|
+
"react-native-safe-area-context": ">=5.0.0",
|
|
102
|
+
"react-native-screens": ">=4.0.0"
|
|
100
103
|
},
|
|
101
104
|
"workspaces": [
|
|
102
105
|
"example"
|
|
103
106
|
],
|
|
104
|
-
"packageManager": "yarn@
|
|
107
|
+
"packageManager": "yarn@4.11.0",
|
|
108
|
+
"react-native-builder-bob": {
|
|
109
|
+
"source": "src",
|
|
110
|
+
"output": "lib",
|
|
111
|
+
"targets": [
|
|
112
|
+
[
|
|
113
|
+
"module",
|
|
114
|
+
{
|
|
115
|
+
"esm": true
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
[
|
|
119
|
+
"typescript",
|
|
120
|
+
{
|
|
121
|
+
"project": "tsconfig.build.json"
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
"prettier": {
|
|
127
|
+
"quoteProps": "consistent",
|
|
128
|
+
"singleQuote": true,
|
|
129
|
+
"tabWidth": 2,
|
|
130
|
+
"trailingComma": "es5",
|
|
131
|
+
"useTabs": false
|
|
132
|
+
},
|
|
105
133
|
"jest": {
|
|
106
134
|
"preset": "react-native",
|
|
107
135
|
"modulePathIgnorePatterns": [
|
|
@@ -129,39 +157,19 @@
|
|
|
129
157
|
"@release-it/conventional-changelog": {
|
|
130
158
|
"preset": {
|
|
131
159
|
"name": "angular"
|
|
132
|
-
}
|
|
133
|
-
"infile": "CHANGELOG.md"
|
|
160
|
+
}
|
|
134
161
|
}
|
|
135
162
|
}
|
|
136
163
|
},
|
|
137
|
-
"prettier": {
|
|
138
|
-
"quoteProps": "consistent",
|
|
139
|
-
"singleQuote": true,
|
|
140
|
-
"tabWidth": 2,
|
|
141
|
-
"trailingComma": "es5",
|
|
142
|
-
"useTabs": false
|
|
143
|
-
},
|
|
144
|
-
"react-native-builder-bob": {
|
|
145
|
-
"source": "src",
|
|
146
|
-
"output": "lib",
|
|
147
|
-
"targets": [
|
|
148
|
-
[
|
|
149
|
-
"module",
|
|
150
|
-
{
|
|
151
|
-
"esm": true
|
|
152
|
-
}
|
|
153
|
-
],
|
|
154
|
-
[
|
|
155
|
-
"typescript",
|
|
156
|
-
{
|
|
157
|
-
"project": "tsconfig.build.json"
|
|
158
|
-
}
|
|
159
|
-
]
|
|
160
|
-
]
|
|
161
|
-
},
|
|
162
164
|
"create-react-native-library": {
|
|
163
|
-
"languages": "js",
|
|
164
165
|
"type": "library",
|
|
165
|
-
"
|
|
166
|
+
"languages": "js",
|
|
167
|
+
"tools": [
|
|
168
|
+
"eslint",
|
|
169
|
+
"jest",
|
|
170
|
+
"lefthook",
|
|
171
|
+
"release-it"
|
|
172
|
+
],
|
|
173
|
+
"version": "0.57.2"
|
|
166
174
|
}
|
|
167
175
|
}
|
|
@@ -5,15 +5,15 @@ import {
|
|
|
5
5
|
useLayoutEffect,
|
|
6
6
|
useCallback,
|
|
7
7
|
useMemo,
|
|
8
|
-
type ComponentType,
|
|
9
8
|
type ForwardedRef,
|
|
9
|
+
type ComponentType,
|
|
10
|
+
type ReactNode,
|
|
10
11
|
} from 'react';
|
|
11
12
|
import {
|
|
12
13
|
FlatList,
|
|
13
14
|
StatusBar,
|
|
14
15
|
StyleSheet,
|
|
15
16
|
View,
|
|
16
|
-
Text,
|
|
17
17
|
type ColorValue,
|
|
18
18
|
type LayoutChangeEvent,
|
|
19
19
|
type ListRenderItemInfo,
|
|
@@ -88,11 +88,12 @@ function AnimatedHeaderFlatListInner<T>(
|
|
|
88
88
|
|
|
89
89
|
const navigationTitle = useCallback(
|
|
90
90
|
() => (
|
|
91
|
-
<Animated.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
<Animated.Text
|
|
92
|
+
style={[navigationTitleAnimatedStyle, navigationTitleStyle]}
|
|
93
|
+
numberOfLines={1}
|
|
94
|
+
>
|
|
95
|
+
{title}
|
|
96
|
+
</Animated.Text>
|
|
96
97
|
),
|
|
97
98
|
[navigationTitleAnimatedStyle, navigationTitleStyle, title]
|
|
98
99
|
);
|
|
@@ -108,81 +109,78 @@ function AnimatedHeaderFlatListInner<T>(
|
|
|
108
109
|
});
|
|
109
110
|
}, [navigationTitle, navigation]);
|
|
110
111
|
|
|
111
|
-
const
|
|
112
|
-
(
|
|
113
|
-
|
|
114
|
-
<View
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
112
|
+
const ListHeaderComponent = useMemo(() => {
|
|
113
|
+
return (
|
|
114
|
+
<View style={styles.headerWrapper}>
|
|
115
|
+
<View
|
|
116
|
+
style={[styles.headerContainer, { top: -navigationBarHeight }]}
|
|
117
|
+
onLayout={(event: LayoutChangeEvent) => {
|
|
118
|
+
setHeaderLayout({
|
|
119
|
+
...event.nativeEvent.layout,
|
|
120
|
+
height: event.nativeEvent.layout.height + navigationBarHeight,
|
|
121
|
+
});
|
|
122
|
+
}}
|
|
123
|
+
>
|
|
124
|
+
<Animated.View
|
|
125
|
+
style={parallax ? headerBackgroundAnimatedStyle : undefined}
|
|
123
126
|
>
|
|
127
|
+
<HeaderBackground />
|
|
128
|
+
</Animated.View>
|
|
129
|
+
{HeaderContent && (
|
|
124
130
|
<Animated.View
|
|
125
|
-
style={
|
|
131
|
+
style={[
|
|
132
|
+
headerContentAnimatedStyle,
|
|
133
|
+
styles.headerContentContainer,
|
|
134
|
+
]}
|
|
126
135
|
>
|
|
127
|
-
<
|
|
136
|
+
<HeaderContent />
|
|
128
137
|
</Animated.View>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
style={[
|
|
132
|
-
headerContentAnimatedStyle,
|
|
133
|
-
styles.headerContentContainer,
|
|
134
|
-
]}
|
|
135
|
-
>
|
|
136
|
-
<HeaderContent />
|
|
137
|
-
</Animated.View>
|
|
138
|
-
)}
|
|
139
|
-
{navigationBarColor && (
|
|
140
|
-
<Animated.View
|
|
141
|
-
style={[
|
|
142
|
-
navigationBarAnimatedStyle,
|
|
143
|
-
styles.animatedNavigationBar,
|
|
144
|
-
{ backgroundColor: navigationBarColor },
|
|
145
|
-
]}
|
|
146
|
-
/>
|
|
147
|
-
)}
|
|
138
|
+
)}
|
|
139
|
+
{navigationBarColor && (
|
|
148
140
|
<Animated.View
|
|
149
|
-
style={
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
141
|
+
style={[
|
|
142
|
+
navigationBarAnimatedStyle,
|
|
143
|
+
styles.animatedNavigationBar,
|
|
144
|
+
{ backgroundColor: navigationBarColor },
|
|
145
|
+
]}
|
|
146
|
+
/>
|
|
147
|
+
)}
|
|
148
|
+
<Animated.Text
|
|
149
|
+
onLayout={(event: LayoutChangeEvent) => {
|
|
150
|
+
setHeaderTitleLayout(event.nativeEvent.layout);
|
|
151
|
+
}}
|
|
152
|
+
numberOfLines={1}
|
|
153
|
+
style={[
|
|
154
|
+
headerTitleAnimatedStyle,
|
|
155
|
+
styles.headerTitle,
|
|
156
|
+
headerTitleStyle,
|
|
157
|
+
]}
|
|
158
|
+
>
|
|
159
|
+
{title}
|
|
160
|
+
</Animated.Text>
|
|
162
161
|
</View>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
);
|
|
162
|
+
</View>
|
|
163
|
+
);
|
|
164
|
+
}, [
|
|
165
|
+
navigationBarHeight,
|
|
166
|
+
parallax,
|
|
167
|
+
headerBackgroundAnimatedStyle,
|
|
168
|
+
HeaderBackground,
|
|
169
|
+
HeaderContent,
|
|
170
|
+
headerContentAnimatedStyle,
|
|
171
|
+
headerTitleAnimatedStyle,
|
|
172
|
+
headerTitleStyle,
|
|
173
|
+
title,
|
|
174
|
+
setHeaderLayout,
|
|
175
|
+
setHeaderTitleLayout,
|
|
176
|
+
navigationBarAnimatedStyle,
|
|
177
|
+
navigationBarColor,
|
|
178
|
+
]);
|
|
181
179
|
|
|
182
180
|
type CustomItem = typeof HEADER_ITEM | T;
|
|
183
181
|
|
|
184
182
|
const renderItem = useCallback(
|
|
185
|
-
({ item }: ListRenderItemInfo<CustomItem>):
|
|
183
|
+
({ item }: ListRenderItemInfo<CustomItem>): ReactNode => {
|
|
186
184
|
if (item === HEADER_ITEM) {
|
|
187
185
|
return (
|
|
188
186
|
<View
|
|
@@ -205,7 +203,7 @@ function AnimatedHeaderFlatListInner<T>(
|
|
|
205
203
|
},
|
|
206
204
|
]}
|
|
207
205
|
>
|
|
208
|
-
{
|
|
206
|
+
{ListHeaderComponent}
|
|
209
207
|
</Animated.View>
|
|
210
208
|
{StickyComponent && (
|
|
211
209
|
<Animated.View
|
|
@@ -235,7 +233,7 @@ function AnimatedHeaderFlatListInner<T>(
|
|
|
235
233
|
stickyComponentAnimatedStyle,
|
|
236
234
|
stickyHeaderAnimatedStyle,
|
|
237
235
|
headerLayout.height,
|
|
238
|
-
|
|
236
|
+
ListHeaderComponent,
|
|
239
237
|
StickyComponent,
|
|
240
238
|
setStickyComponentLayout,
|
|
241
239
|
]
|
|
@@ -265,7 +263,7 @@ function AnimatedHeaderFlatListInner<T>(
|
|
|
265
263
|
},
|
|
266
264
|
]}
|
|
267
265
|
>
|
|
268
|
-
{
|
|
266
|
+
{ListHeaderComponent}
|
|
269
267
|
</Animated.View>
|
|
270
268
|
}
|
|
271
269
|
onScroll={scrollHandler}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useHeaderHeight } from '@react-navigation/elements';
|
|
2
|
-
import { useCallback,
|
|
2
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
3
3
|
import {
|
|
4
4
|
useWindowDimensions,
|
|
5
5
|
type LayoutRectangle,
|
|
@@ -10,7 +10,6 @@ import {
|
|
|
10
10
|
useAnimatedScrollHandler,
|
|
11
11
|
useAnimatedStyle,
|
|
12
12
|
useSharedValue,
|
|
13
|
-
cancelAnimation,
|
|
14
13
|
type AnimatedStyle,
|
|
15
14
|
type ScrollHandlerProcessed,
|
|
16
15
|
} from 'react-native-reanimated';
|
|
@@ -70,12 +69,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
70
69
|
width: 0,
|
|
71
70
|
height: 0,
|
|
72
71
|
});
|
|
73
|
-
const distanceBetweenTitleAndNavigationBar =
|
|
74
|
-
0,
|
|
75
|
-
(navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 +
|
|
76
|
-
headerTitleLayout.y -
|
|
77
|
-
navigationBarHeight
|
|
78
|
-
);
|
|
72
|
+
const distanceBetweenTitleAndNavigationBar = useSharedValue(0);
|
|
79
73
|
const navigationTitleOpacity = useSharedValue(0);
|
|
80
74
|
const stickyHeaderOpacity = useSharedValue(0);
|
|
81
75
|
const stickyComponentOpacity = useSharedValue(0);
|
|
@@ -86,6 +80,20 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
86
80
|
},
|
|
87
81
|
[updateStickyComponentLayout, stickyComponentOpacity]
|
|
88
82
|
);
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
distanceBetweenTitleAndNavigationBar.value = Math.max(
|
|
85
|
+
0,
|
|
86
|
+
(navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) /
|
|
87
|
+
2 +
|
|
88
|
+
headerTitleLayout.y -
|
|
89
|
+
navigationBarHeight
|
|
90
|
+
);
|
|
91
|
+
}, [
|
|
92
|
+
headerTitleLayout,
|
|
93
|
+
navigationBarHeight,
|
|
94
|
+
safeAreaInsets.top,
|
|
95
|
+
distanceBetweenTitleAndNavigationBar,
|
|
96
|
+
]);
|
|
89
97
|
const navigationBarAnimatedStyle = useAnimatedStyle(() => {
|
|
90
98
|
return {
|
|
91
99
|
opacity: interpolate(
|
|
@@ -117,7 +125,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
117
125
|
{
|
|
118
126
|
translateX: interpolate(
|
|
119
127
|
scrollY.value,
|
|
120
|
-
[0, distanceBetweenTitleAndNavigationBar],
|
|
128
|
+
[0, distanceBetweenTitleAndNavigationBar.value],
|
|
121
129
|
[
|
|
122
130
|
0,
|
|
123
131
|
windowWidth / 2 -
|
|
@@ -131,7 +139,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
131
139
|
{
|
|
132
140
|
translateY: interpolate(
|
|
133
141
|
scrollY.value,
|
|
134
|
-
[0, distanceBetweenTitleAndNavigationBar],
|
|
142
|
+
[0, distanceBetweenTitleAndNavigationBar.value],
|
|
135
143
|
[0, navigationTitleTranslateY],
|
|
136
144
|
'clamp'
|
|
137
145
|
),
|
|
@@ -139,7 +147,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
139
147
|
{
|
|
140
148
|
scale: interpolate(
|
|
141
149
|
scrollY.value,
|
|
142
|
-
[0, distanceBetweenTitleAndNavigationBar],
|
|
150
|
+
[0, distanceBetweenTitleAndNavigationBar.value],
|
|
143
151
|
[
|
|
144
152
|
1,
|
|
145
153
|
navigationTitleFontSize && headerTitleFontSize
|
|
@@ -203,27 +211,15 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
203
211
|
const scrollHandler = useAnimatedScrollHandler((event) => {
|
|
204
212
|
scrollY.value = event.contentOffset.y;
|
|
205
213
|
navigationTitleOpacity.value =
|
|
206
|
-
event.contentOffset.y >= distanceBetweenTitleAndNavigationBar
|
|
214
|
+
event.contentOffset.y >= distanceBetweenTitleAndNavigationBar.value
|
|
215
|
+
? 1
|
|
216
|
+
: 0;
|
|
207
217
|
stickyHeaderOpacity.value =
|
|
208
218
|
event.contentOffset.y >= headerLayout.height - navigationBarHeight * 2
|
|
209
219
|
? 1
|
|
210
220
|
: 0;
|
|
211
221
|
});
|
|
212
222
|
|
|
213
|
-
useEffect(() => {
|
|
214
|
-
return () => {
|
|
215
|
-
cancelAnimation(scrollY);
|
|
216
|
-
cancelAnimation(navigationTitleOpacity);
|
|
217
|
-
cancelAnimation(stickyHeaderOpacity);
|
|
218
|
-
cancelAnimation(stickyComponentOpacity);
|
|
219
|
-
};
|
|
220
|
-
}, [
|
|
221
|
-
scrollY,
|
|
222
|
-
navigationTitleOpacity,
|
|
223
|
-
stickyHeaderOpacity,
|
|
224
|
-
stickyComponentOpacity,
|
|
225
|
-
]);
|
|
226
|
-
|
|
227
223
|
return {
|
|
228
224
|
scrollHandler,
|
|
229
225
|
navigationBarHeight,
|
package/src/index.tsx
CHANGED