react-native-animated-header-flat-list 1.6.10 → 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/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/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/package.json +4 -2
- package/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts +22 -26
- package/src/index.tsx +1 -1
|
@@ -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":[]}
|
|
@@ -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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
"react-native-builder-bob": "^0.40.13",
|
|
87
87
|
"react-native-reanimated": "^4.2.2",
|
|
88
88
|
"react-native-safe-area-context": "^5.7.0",
|
|
89
|
+
"react-native-screens": "^4.24.0",
|
|
89
90
|
"release-it": "^19.0.4",
|
|
90
91
|
"turbo": "^2.5.6",
|
|
91
92
|
"typescript": "^5.9.2"
|
|
@@ -97,7 +98,8 @@
|
|
|
97
98
|
"react": "*",
|
|
98
99
|
"react-native": "*",
|
|
99
100
|
"react-native-reanimated": ">=3.0.0",
|
|
100
|
-
"react-native-safe-area-context": ">=5.0.0"
|
|
101
|
+
"react-native-safe-area-context": ">=5.0.0",
|
|
102
|
+
"react-native-screens": ">=4.0.0"
|
|
101
103
|
},
|
|
102
104
|
"workspaces": [
|
|
103
105
|
"example"
|
|
@@ -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