react-native-animated-header-flat-list 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -6
- package/lib/commonjs/components/AnimatedHeaderFlatList.js +47 -48
- package/lib/commonjs/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/commonjs/utils/styleUtils.js +21 -0
- package/lib/commonjs/utils/styleUtils.js.map +1 -0
- package/lib/module/components/AnimatedHeaderFlatList.js +48 -49
- package/lib/module/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/module/utils/styleUtils.js +16 -0
- package/lib/module/utils/styleUtils.js.map +1 -0
- package/lib/typescript/commonjs/src/components/AnimatedHeaderFlatList.d.ts +3 -3
- package/lib/typescript/commonjs/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/utils/styleUtils.d.ts +3 -0
- package/lib/typescript/commonjs/src/utils/styleUtils.d.ts.map +1 -0
- package/lib/typescript/module/src/components/AnimatedHeaderFlatList.d.ts +3 -3
- package/lib/typescript/module/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/module/src/utils/styleUtils.d.ts +3 -0
- package/lib/typescript/module/src/utils/styleUtils.d.ts.map +1 -0
- package/package.json +27 -24
- package/src/components/AnimatedHeaderFlatList.tsx +59 -67
- package/src/utils/styleUtils.ts +19 -0
package/README.md
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
# react-native-animated-header-flat-list
|
|
2
2
|
|
|
3
|
-
[](https://expo.dev/)
|
|
3
|
+
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
|
|
4
|
+
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
|
|
5
|
+
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
|
|
7
6
|
|
|
8
7
|
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.
|
|
9
8
|
|
|
@@ -57,15 +56,22 @@ Make sure to follow the installation instructions for each dependency:
|
|
|
57
56
|
|
|
58
57
|
### Additional Setup
|
|
59
58
|
|
|
60
|
-
For React Native Reanimated,
|
|
59
|
+
For React Native Reanimated, Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
|
|
60
|
+
|
|
61
61
|
```js
|
|
62
62
|
module.exports = {
|
|
63
|
+
presets: [
|
|
64
|
+
... // don't add it here :)
|
|
65
|
+
],
|
|
63
66
|
plugins: [
|
|
67
|
+
...
|
|
64
68
|
'react-native-reanimated/plugin',
|
|
65
69
|
],
|
|
66
70
|
};
|
|
67
71
|
```
|
|
68
72
|
|
|
73
|
+
CAUTION: `react-native-reanimated/plugin` has to be listed last.
|
|
74
|
+
|
|
69
75
|
## Usage
|
|
70
76
|
|
|
71
77
|
```tsx
|
|
@@ -201,7 +207,7 @@ const styles = StyleSheet.create({
|
|
|
201
207
|
### Props
|
|
202
208
|
|
|
203
209
|
| Prop | Type | Required | Description |
|
|
204
|
-
|
|
|
210
|
+
| ---------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
205
211
|
| `navigation` | NavigationProp<any> | Yes | React Navigation navigation prop |
|
|
206
212
|
| `title` | string | Yes | The title text that will animate between header and navigation bar |
|
|
207
213
|
| `headerTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
|
|
@@ -209,6 +215,7 @@ const styles = StyleSheet.create({
|
|
|
209
215
|
| `HeaderBackground` | React.ComponentType | Yes | Component to be rendered as the header background |
|
|
210
216
|
| `HeaderContent` | React.ComponentType | No | Component to be rendered on top of the header background. Its opacity will automatically animate based on scroll position |
|
|
211
217
|
| `StickyComponent` | React.ComponentType | No | Optional component that sticks below the navigation bar |
|
|
218
|
+
| `parallax` | boolean | No | Enable/disable parallax effect for header background. Defaults to true |
|
|
212
219
|
| `...FlatListProps` | FlatListProps | - | All standard FlatList props are supported |
|
|
213
220
|
|
|
214
221
|
## Contributing
|
|
@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.AnimatedHeaderFlatList = AnimatedHeaderFlatList;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var _useAnimatedHeaderFlatListAnimatedStyles = require("../hooks/useAnimatedHeaderFlatListAnimatedStyles.js");
|
|
10
9
|
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
10
|
+
var _useAnimatedHeaderFlatListAnimatedStyles = require("../hooks/useAnimatedHeaderFlatListAnimatedStyles.js");
|
|
11
|
+
var _styleUtils = require("../utils/styleUtils.js");
|
|
11
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
17
|
+
const EMPTY_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_EMPTY';
|
|
17
18
|
function AnimatedHeaderFlatList({
|
|
18
19
|
navigation,
|
|
19
20
|
title,
|
|
@@ -22,22 +23,9 @@ function AnimatedHeaderFlatList({
|
|
|
22
23
|
HeaderBackground,
|
|
23
24
|
HeaderContent,
|
|
24
25
|
StickyComponent,
|
|
25
|
-
|
|
26
|
+
parallax = true,
|
|
26
27
|
...flatListProps
|
|
27
28
|
}) {
|
|
28
|
-
const getFontSizeFromStyle = (0, _react.useCallback)(textStyle => {
|
|
29
|
-
if (!textStyle) return undefined;
|
|
30
|
-
if (Array.isArray(textStyle)) {
|
|
31
|
-
for (const styleItem of textStyle) {
|
|
32
|
-
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
33
|
-
return styleItem.fontSize;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
37
|
-
return textStyle.fontSize;
|
|
38
|
-
}
|
|
39
|
-
return undefined;
|
|
40
|
-
}, []);
|
|
41
29
|
const {
|
|
42
30
|
scrollHandler,
|
|
43
31
|
navigationBarHeight,
|
|
@@ -52,11 +40,11 @@ function AnimatedHeaderFlatList({
|
|
|
52
40
|
headerContentAnimatedStyle,
|
|
53
41
|
headerBackgroundAnimatedStyle
|
|
54
42
|
} = (0, _useAnimatedHeaderFlatListAnimatedStyles.useAnimatedHeaderFlatListAnimatedStyles)({
|
|
55
|
-
headerTitleFontSize: getFontSizeFromStyle(headerTitleStyle),
|
|
56
|
-
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle)
|
|
43
|
+
headerTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(headerTitleStyle),
|
|
44
|
+
navigationTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(navigationTitleStyle)
|
|
57
45
|
});
|
|
58
46
|
const navigationTitle = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
59
|
-
style: [navigationTitleAnimatedStyle, navigationTitleStyle
|
|
47
|
+
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
60
48
|
numberOfLines: 1,
|
|
61
49
|
children: title
|
|
62
50
|
}), [navigationTitleAnimatedStyle, navigationTitleStyle, title]);
|
|
@@ -84,7 +72,7 @@ function AnimatedHeaderFlatList({
|
|
|
84
72
|
});
|
|
85
73
|
},
|
|
86
74
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
87
|
-
style: headerBackgroundAnimatedStyle,
|
|
75
|
+
style: parallax ? headerBackgroundAnimatedStyle : undefined,
|
|
88
76
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBackground, {})
|
|
89
77
|
}), HeaderContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
90
78
|
style: [headerContentAnimatedStyle, styles.headerContentContainer],
|
|
@@ -99,11 +87,11 @@ function AnimatedHeaderFlatList({
|
|
|
99
87
|
})]
|
|
100
88
|
})
|
|
101
89
|
});
|
|
102
|
-
}, [navigationBarHeight, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
90
|
+
}, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
103
91
|
const renderItem = (0, _react.useCallback)(({
|
|
104
92
|
item
|
|
105
93
|
}) => {
|
|
106
|
-
if (item ===
|
|
94
|
+
if (item === HEADER_ITEM) {
|
|
107
95
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
108
96
|
style: [styles.stickyHeaderContainer, {
|
|
109
97
|
height: navigationBarHeight + stickyComponentLayout.height
|
|
@@ -122,47 +110,58 @@ function AnimatedHeaderFlatList({
|
|
|
122
110
|
})]
|
|
123
111
|
});
|
|
124
112
|
}
|
|
113
|
+
if (item === EMPTY_ITEM) {
|
|
114
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
115
|
+
if (typeof EmptyComponent === 'function') {
|
|
116
|
+
return /*#__PURE__*/(0, _react.createElement)(EmptyComponent);
|
|
117
|
+
}
|
|
118
|
+
return EmptyComponent;
|
|
119
|
+
}
|
|
125
120
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
126
121
|
item
|
|
127
122
|
}) : null;
|
|
128
123
|
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
124
|
+
const data = (0, _react.useMemo)(() => {
|
|
125
|
+
const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
|
|
126
|
+
if (listData.length === 0) {
|
|
127
|
+
return [HEADER_ITEM, EMPTY_ITEM];
|
|
128
|
+
}
|
|
129
|
+
return [HEADER_ITEM, ...listData];
|
|
130
|
+
}, [flatListProps.data]);
|
|
131
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
132
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
|
|
133
|
+
backgroundColor: "transparent",
|
|
134
|
+
translucent: true
|
|
135
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.FlatList, {
|
|
136
|
+
...flatListProps,
|
|
137
|
+
stickyHeaderIndices: [1],
|
|
138
|
+
ListHeaderComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
139
|
+
style: [styles.mainHeaderContainer, {
|
|
140
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
141
|
+
transform: [{
|
|
142
|
+
translateY: navigationBarHeight
|
|
143
|
+
}]
|
|
144
|
+
}],
|
|
145
|
+
children: ListHeaderComponent
|
|
146
|
+
}),
|
|
147
|
+
onScroll: scrollHandler,
|
|
148
|
+
data: data,
|
|
149
|
+
renderItem: renderItem
|
|
150
|
+
})]
|
|
146
151
|
});
|
|
147
152
|
}
|
|
148
153
|
const styles = _reactNative.StyleSheet.create({
|
|
149
154
|
navigationBar: {
|
|
150
155
|
backgroundColor: 'transparent'
|
|
151
156
|
},
|
|
152
|
-
titleStyle: {
|
|
153
|
-
left: 0,
|
|
154
|
-
right: 0,
|
|
155
|
-
top: 0,
|
|
156
|
-
bottom: 0
|
|
157
|
-
},
|
|
158
157
|
headerWrapper: {
|
|
159
158
|
overflow: 'visible'
|
|
160
159
|
},
|
|
161
160
|
headerContainer: {
|
|
161
|
+
position: 'absolute',
|
|
162
162
|
left: 0,
|
|
163
163
|
right: 0,
|
|
164
|
-
overflow: 'visible'
|
|
165
|
-
position: 'absolute'
|
|
164
|
+
overflow: 'visible'
|
|
166
165
|
},
|
|
167
166
|
stickyHeaderContainer: {
|
|
168
167
|
overflow: 'scroll'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_useAnimatedHeaderFlatListAnimatedStyles","_styleUtils","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HEADER_ITEM","EMPTY_ITEM","AnimatedHeaderFlatList","navigation","title","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","navigationTitleAnimatedStyle","headerTitleAnimatedStyle","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","getFontSizeFromStyle","navigationTitleFontSize","navigationTitle","useCallback","jsx","Text","style","numberOfLines","children","useLayoutEffect","setOptions","headerShown","headerStyle","styles","navigationBar","headerShadowVisible","headerTransparent","headerTitle","headerTitleAlign","ListHeaderComponent","useMemo","View","headerWrapper","jsxs","headerContainer","top","onLayout","event","nativeEvent","layout","height","undefined","headerContentContainer","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","EmptyComponent","ListEmptyComponent","createElement","data","listData","Array","isArray","length","Fragment","StatusBar","backgroundColor","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","StyleSheet","create","overflow","position","left","right"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getFontSizeFromStyle = void 0;
|
|
7
|
+
const getFontSizeFromStyle = textStyle => {
|
|
8
|
+
if (!textStyle) return undefined;
|
|
9
|
+
if (Array.isArray(textStyle)) {
|
|
10
|
+
for (const styleItem of textStyle.reverse()) {
|
|
11
|
+
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
12
|
+
return styleItem.fontSize;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
16
|
+
return textStyle.fontSize;
|
|
17
|
+
}
|
|
18
|
+
return undefined;
|
|
19
|
+
};
|
|
20
|
+
exports.getFontSizeFromStyle = getFontSizeFromStyle;
|
|
21
|
+
//# sourceMappingURL=styleUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["getFontSizeFromStyle","textStyle","undefined","Array","isArray","styleItem","reverse","fontSize","exports"],"sourceRoot":"../../../src","sources":["utils/styleUtils.ts"],"mappings":";;;;;;AAEO,MAAMA,oBAAoB,GAAIC,SAA+B,IAAK;EACvE,IAAI,CAACA,SAAS,EAAE,OAAOC,SAAS;EAChC,IAAIC,KAAK,CAACC,OAAO,CAACH,SAAS,CAAC,EAAE;IAC5B,KAAK,MAAMI,SAAS,IAAIJ,SAAS,CAACK,OAAO,CAAC,CAAC,EAAE;MAC3C,IACED,SAAS,IACT,OAAOA,SAAS,KAAK,QAAQ,IAC7B,UAAU,IAAIA,SAAS,EACvB;QACA,OAAOA,SAAS,CAACE,QAAQ;MAC3B;IACF;EACF,CAAC,MAAM,IAAI,OAAON,SAAS,KAAK,QAAQ,IAAI,UAAU,IAAIA,SAAS,EAAE;IACnE,OAAOA,SAAS,CAACM,QAAQ;EAC3B;EACA,OAAOL,SAAS;AAClB,CAAC;AAACM,OAAA,CAAAR,oBAAA,GAAAA,oBAAA","ignoreList":[]}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import React, { createElement } from 'react';
|
|
4
|
+
import { StatusBar, StyleSheet, View } from 'react-native';
|
|
5
5
|
import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
6
|
-
import { useAnimatedHeaderFlatListAnimatedStyles } from "../hooks/useAnimatedHeaderFlatListAnimatedStyles.js";
|
|
7
6
|
import Animated from 'react-native-reanimated';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { useAnimatedHeaderFlatListAnimatedStyles } from "../hooks/useAnimatedHeaderFlatListAnimatedStyles.js";
|
|
8
|
+
import { getFontSizeFromStyle } from "../utils/styleUtils.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
|
+
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
11
|
+
const EMPTY_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_EMPTY';
|
|
11
12
|
export function AnimatedHeaderFlatList({
|
|
12
13
|
navigation,
|
|
13
14
|
title,
|
|
@@ -16,22 +17,9 @@ export function AnimatedHeaderFlatList({
|
|
|
16
17
|
HeaderBackground,
|
|
17
18
|
HeaderContent,
|
|
18
19
|
StickyComponent,
|
|
19
|
-
|
|
20
|
+
parallax = true,
|
|
20
21
|
...flatListProps
|
|
21
22
|
}) {
|
|
22
|
-
const getFontSizeFromStyle = useCallback(textStyle => {
|
|
23
|
-
if (!textStyle) return undefined;
|
|
24
|
-
if (Array.isArray(textStyle)) {
|
|
25
|
-
for (const styleItem of textStyle) {
|
|
26
|
-
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
27
|
-
return styleItem.fontSize;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
31
|
-
return textStyle.fontSize;
|
|
32
|
-
}
|
|
33
|
-
return undefined;
|
|
34
|
-
}, []);
|
|
35
23
|
const {
|
|
36
24
|
scrollHandler,
|
|
37
25
|
navigationBarHeight,
|
|
@@ -50,7 +38,7 @@ export function AnimatedHeaderFlatList({
|
|
|
50
38
|
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle)
|
|
51
39
|
});
|
|
52
40
|
const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.Text, {
|
|
53
|
-
style: [navigationTitleAnimatedStyle, navigationTitleStyle
|
|
41
|
+
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
54
42
|
numberOfLines: 1,
|
|
55
43
|
children: title
|
|
56
44
|
}), [navigationTitleAnimatedStyle, navigationTitleStyle, title]);
|
|
@@ -78,7 +66,7 @@ export function AnimatedHeaderFlatList({
|
|
|
78
66
|
});
|
|
79
67
|
},
|
|
80
68
|
children: [/*#__PURE__*/_jsx(Animated.View, {
|
|
81
|
-
style: headerBackgroundAnimatedStyle,
|
|
69
|
+
style: parallax ? headerBackgroundAnimatedStyle : undefined,
|
|
82
70
|
children: /*#__PURE__*/_jsx(HeaderBackground, {})
|
|
83
71
|
}), HeaderContent && /*#__PURE__*/_jsx(Animated.View, {
|
|
84
72
|
style: [headerContentAnimatedStyle, styles.headerContentContainer],
|
|
@@ -93,11 +81,11 @@ export function AnimatedHeaderFlatList({
|
|
|
93
81
|
})]
|
|
94
82
|
})
|
|
95
83
|
});
|
|
96
|
-
}, [navigationBarHeight, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
84
|
+
}, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
97
85
|
const renderItem = useCallback(({
|
|
98
86
|
item
|
|
99
87
|
}) => {
|
|
100
|
-
if (item ===
|
|
88
|
+
if (item === HEADER_ITEM) {
|
|
101
89
|
return /*#__PURE__*/_jsxs(View, {
|
|
102
90
|
style: [styles.stickyHeaderContainer, {
|
|
103
91
|
height: navigationBarHeight + stickyComponentLayout.height
|
|
@@ -116,47 +104,58 @@ export function AnimatedHeaderFlatList({
|
|
|
116
104
|
})]
|
|
117
105
|
});
|
|
118
106
|
}
|
|
107
|
+
if (item === EMPTY_ITEM) {
|
|
108
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
109
|
+
if (typeof EmptyComponent === 'function') {
|
|
110
|
+
return /*#__PURE__*/createElement(EmptyComponent);
|
|
111
|
+
}
|
|
112
|
+
return EmptyComponent;
|
|
113
|
+
}
|
|
119
114
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
120
115
|
item
|
|
121
116
|
}) : null;
|
|
122
117
|
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
118
|
+
const data = useMemo(() => {
|
|
119
|
+
const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
|
|
120
|
+
if (listData.length === 0) {
|
|
121
|
+
return [HEADER_ITEM, EMPTY_ITEM];
|
|
122
|
+
}
|
|
123
|
+
return [HEADER_ITEM, ...listData];
|
|
124
|
+
}, [flatListProps.data]);
|
|
125
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
126
|
+
children: [/*#__PURE__*/_jsx(StatusBar, {
|
|
127
|
+
backgroundColor: "transparent",
|
|
128
|
+
translucent: true
|
|
129
|
+
}), /*#__PURE__*/_jsx(Animated.FlatList, {
|
|
130
|
+
...flatListProps,
|
|
131
|
+
stickyHeaderIndices: [1],
|
|
132
|
+
ListHeaderComponent: /*#__PURE__*/_jsx(Animated.View, {
|
|
133
|
+
style: [styles.mainHeaderContainer, {
|
|
134
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
135
|
+
transform: [{
|
|
136
|
+
translateY: navigationBarHeight
|
|
137
|
+
}]
|
|
138
|
+
}],
|
|
139
|
+
children: ListHeaderComponent
|
|
140
|
+
}),
|
|
141
|
+
onScroll: scrollHandler,
|
|
142
|
+
data: data,
|
|
143
|
+
renderItem: renderItem
|
|
144
|
+
})]
|
|
140
145
|
});
|
|
141
146
|
}
|
|
142
147
|
const styles = StyleSheet.create({
|
|
143
148
|
navigationBar: {
|
|
144
149
|
backgroundColor: 'transparent'
|
|
145
150
|
},
|
|
146
|
-
titleStyle: {
|
|
147
|
-
left: 0,
|
|
148
|
-
right: 0,
|
|
149
|
-
top: 0,
|
|
150
|
-
bottom: 0
|
|
151
|
-
},
|
|
152
151
|
headerWrapper: {
|
|
153
152
|
overflow: 'visible'
|
|
154
153
|
},
|
|
155
154
|
headerContainer: {
|
|
155
|
+
position: 'absolute',
|
|
156
156
|
left: 0,
|
|
157
157
|
right: 0,
|
|
158
|
-
overflow: 'visible'
|
|
159
|
-
position: 'absolute'
|
|
158
|
+
overflow: 'visible'
|
|
160
159
|
},
|
|
161
160
|
stickyHeaderContainer: {
|
|
162
161
|
overflow: 'scroll'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","useLayoutEffect","useCallback","useMemo","useAnimatedHeaderFlatListAnimatedStyles","
|
|
1
|
+
{"version":3,"names":["React","createElement","StatusBar","StyleSheet","View","useLayoutEffect","useCallback","useMemo","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","EMPTY_ITEM","AnimatedHeaderFlatList","navigation","title","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","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","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","EmptyComponent","ListEmptyComponent","data","listData","Array","isArray","length","backgroundColor","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","create","overflow","position","left","right"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const getFontSizeFromStyle = textStyle => {
|
|
4
|
+
if (!textStyle) return undefined;
|
|
5
|
+
if (Array.isArray(textStyle)) {
|
|
6
|
+
for (const styleItem of textStyle.reverse()) {
|
|
7
|
+
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
8
|
+
return styleItem.fontSize;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
12
|
+
return textStyle.fontSize;
|
|
13
|
+
}
|
|
14
|
+
return undefined;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=styleUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["getFontSizeFromStyle","textStyle","undefined","Array","isArray","styleItem","reverse","fontSize"],"sourceRoot":"../../../src","sources":["utils/styleUtils.ts"],"mappings":";;AAEA,OAAO,MAAMA,oBAAoB,GAAIC,SAA+B,IAAK;EACvE,IAAI,CAACA,SAAS,EAAE,OAAOC,SAAS;EAChC,IAAIC,KAAK,CAACC,OAAO,CAACH,SAAS,CAAC,EAAE;IAC5B,KAAK,MAAMI,SAAS,IAAIJ,SAAS,CAACK,OAAO,CAAC,CAAC,EAAE;MAC3C,IACED,SAAS,IACT,OAAOA,SAAS,KAAK,QAAQ,IAC7B,UAAU,IAAIA,SAAS,EACvB;QACA,OAAOA,SAAS,CAACE,QAAQ;MAC3B;IACF;EACF,CAAC,MAAM,IAAI,OAAON,SAAS,KAAK,QAAQ,IAAI,UAAU,IAAIA,SAAS,EAAE;IACnE,OAAOA,SAAS,CAACM,QAAQ;EAC3B;EACA,OAAOL,SAAS;AAClB,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type StyleProp, type TextStyle
|
|
2
|
+
import { type StyleProp, type TextStyle } from 'react-native';
|
|
3
3
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
4
4
|
import { type NavigationProp } from '@react-navigation/native';
|
|
5
5
|
interface Props {
|
|
@@ -10,9 +10,9 @@ interface Props {
|
|
|
10
10
|
HeaderBackground: React.ComponentType<any>;
|
|
11
11
|
HeaderContent?: React.ComponentType<any>;
|
|
12
12
|
StickyComponent?: React.ComponentType<any>;
|
|
13
|
-
|
|
13
|
+
parallax?: boolean;
|
|
14
14
|
}
|
|
15
15
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
16
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent,
|
|
16
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export {};
|
|
18
18
|
//# sourceMappingURL=AnimatedHeaderFlatList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK/D,UAAU,KAAK;IACb,UAAU,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,2BAA2B,CAAC,CAAC,IAAI,IAAI,CACxC,uBAAuB,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,CACZ,GACC,KAAK,CAAC;AAKR,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,QAAe,EACf,GAAG,aAAa,EACjB,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAyMhC"}
|
|
@@ -0,0 +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,cAAe,SAAS,CAAC,SAAS,CAAC,uBAgBnE,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type StyleProp, type TextStyle
|
|
2
|
+
import { type StyleProp, type TextStyle } from 'react-native';
|
|
3
3
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
4
4
|
import { type NavigationProp } from '@react-navigation/native';
|
|
5
5
|
interface Props {
|
|
@@ -10,9 +10,9 @@ interface Props {
|
|
|
10
10
|
HeaderBackground: React.ComponentType<any>;
|
|
11
11
|
HeaderContent?: React.ComponentType<any>;
|
|
12
12
|
StickyComponent?: React.ComponentType<any>;
|
|
13
|
-
|
|
13
|
+
parallax?: boolean;
|
|
14
14
|
}
|
|
15
15
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
16
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent,
|
|
16
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export {};
|
|
18
18
|
//# sourceMappingURL=AnimatedHeaderFlatList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK/D,UAAU,KAAK;IACb,UAAU,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,2BAA2B,CAAC,CAAC,IAAI,IAAI,CACxC,uBAAuB,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,CACZ,GACC,KAAK,CAAC;AAKR,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,QAAe,EACf,GAAG,aAAa,EACjB,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAyMhC"}
|
|
@@ -0,0 +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,cAAe,SAAS,CAAC,SAAS,CAAC,uBAgBnE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-animated-header-flat-list",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
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
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "./lib/commonjs/index.js",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"type": "git",
|
|
57
57
|
"url": "git+https://github.com/lukailun/react-native-animated-header-flat-list.git"
|
|
58
58
|
},
|
|
59
|
-
"author": "Karen
|
|
59
|
+
"author": "Karen (https://github.com/lukailun)",
|
|
60
60
|
"license": "MIT",
|
|
61
61
|
"bugs": {
|
|
62
62
|
"url": "https://github.com/lukailun/react-native-animated-header-flat-list/issues"
|
|
@@ -66,32 +66,32 @@
|
|
|
66
66
|
"registry": "https://registry.npmjs.org/"
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
|
-
"@commitlint/config-conventional": "
|
|
70
|
-
"@evilmartians/lefthook": "^1.
|
|
71
|
-
"@react-native/eslint-config": "
|
|
72
|
-
"@react-navigation/elements": "^2.1.
|
|
73
|
-
"@react-navigation/native": "^7.0.
|
|
74
|
-
"@react-navigation/native-stack": "^7.1.
|
|
75
|
-
"@release-it/conventional-changelog": "
|
|
76
|
-
"@types/jest": "^29.5.
|
|
77
|
-
"@types/react": "^18.
|
|
78
|
-
"commitlint": "^
|
|
79
|
-
"del-cli": "^
|
|
80
|
-
"eslint": "^8.
|
|
81
|
-
"eslint-config-prettier": "^9.
|
|
82
|
-
"eslint-plugin-prettier": "^5.
|
|
69
|
+
"@commitlint/config-conventional": "17.7.0",
|
|
70
|
+
"@evilmartians/lefthook": "^1.8.4",
|
|
71
|
+
"@react-native/eslint-config": "0.73.1",
|
|
72
|
+
"@react-navigation/elements": "^2.1.7",
|
|
73
|
+
"@react-navigation/native": "^7.0.8",
|
|
74
|
+
"@react-navigation/native-stack": "^7.1.9",
|
|
75
|
+
"@release-it/conventional-changelog": "7.0.0",
|
|
76
|
+
"@types/jest": "^29.5.14",
|
|
77
|
+
"@types/react": "^18.3.12",
|
|
78
|
+
"commitlint": "^19.6.0",
|
|
79
|
+
"del-cli": "^6.0.0",
|
|
80
|
+
"eslint": "^8.57.0",
|
|
81
|
+
"eslint-config-prettier": "^9.1.0",
|
|
82
|
+
"eslint-plugin-prettier": "^5.2.1",
|
|
83
83
|
"jest": "^29.7.0",
|
|
84
|
-
"prettier": "^3.
|
|
84
|
+
"prettier": "^3.4.1",
|
|
85
85
|
"react": "18.3.1",
|
|
86
|
-
"react-native": "0.76.
|
|
87
|
-
"react-native-builder-bob": "^0.
|
|
88
|
-
"react-native-reanimated": "^3.16.
|
|
86
|
+
"react-native": "0.76.3",
|
|
87
|
+
"react-native-builder-bob": "^0.33.2",
|
|
88
|
+
"react-native-reanimated": "^3.16.3",
|
|
89
89
|
"react-native-safe-area-context": "^4.14.0",
|
|
90
|
-
"release-it": "
|
|
91
|
-
"typescript": "^5.
|
|
90
|
+
"release-it": "16.1.5",
|
|
91
|
+
"typescript": "^5.7.2"
|
|
92
92
|
},
|
|
93
93
|
"resolutions": {
|
|
94
|
-
"@types/react": "^18.
|
|
94
|
+
"@types/react": "^18.3.12"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|
|
97
97
|
"@react-navigation/elements": ">=2.0.0",
|
|
@@ -131,7 +131,10 @@
|
|
|
131
131
|
},
|
|
132
132
|
"plugins": {
|
|
133
133
|
"@release-it/conventional-changelog": {
|
|
134
|
-
"preset":
|
|
134
|
+
"preset": {
|
|
135
|
+
"name": "angular"
|
|
136
|
+
},
|
|
137
|
+
"infile": "CHANGELOG.md"
|
|
135
138
|
}
|
|
136
139
|
}
|
|
137
140
|
},
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { createElement, type ReactElement } from 'react';
|
|
2
2
|
import {
|
|
3
|
+
StatusBar,
|
|
3
4
|
StyleSheet,
|
|
4
5
|
View,
|
|
5
6
|
type LayoutChangeEvent,
|
|
6
7
|
type ListRenderItemInfo,
|
|
7
8
|
type StyleProp,
|
|
8
9
|
type TextStyle,
|
|
9
|
-
type ViewStyle,
|
|
10
10
|
} from 'react-native';
|
|
11
11
|
import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
12
12
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
13
13
|
import { type NavigationProp } from '@react-navigation/native';
|
|
14
|
-
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
15
14
|
import Animated from 'react-native-reanimated';
|
|
15
|
+
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
16
|
+
import { getFontSizeFromStyle } from '../utils/styleUtils';
|
|
16
17
|
|
|
17
|
-
// Types
|
|
18
18
|
interface Props {
|
|
19
19
|
navigation: NavigationProp<any>;
|
|
20
20
|
title: string;
|
|
@@ -23,7 +23,7 @@ interface Props {
|
|
|
23
23
|
HeaderBackground: React.ComponentType<any>;
|
|
24
24
|
HeaderContent?: React.ComponentType<any>;
|
|
25
25
|
StickyComponent?: React.ComponentType<any>;
|
|
26
|
-
|
|
26
|
+
parallax?: boolean;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
type AnimatedHeaderFlatListProps<T> = Omit<
|
|
@@ -32,6 +32,9 @@ type AnimatedHeaderFlatListProps<T> = Omit<
|
|
|
32
32
|
> &
|
|
33
33
|
Props;
|
|
34
34
|
|
|
35
|
+
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
36
|
+
const EMPTY_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_EMPTY';
|
|
37
|
+
|
|
35
38
|
export function AnimatedHeaderFlatList<T>({
|
|
36
39
|
navigation,
|
|
37
40
|
title,
|
|
@@ -40,30 +43,9 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
40
43
|
HeaderBackground,
|
|
41
44
|
HeaderContent,
|
|
42
45
|
StickyComponent,
|
|
43
|
-
|
|
46
|
+
parallax = true,
|
|
44
47
|
...flatListProps
|
|
45
48
|
}: AnimatedHeaderFlatListProps<T>) {
|
|
46
|
-
const getFontSizeFromStyle = useCallback(
|
|
47
|
-
(textStyle: StyleProp<TextStyle>) => {
|
|
48
|
-
if (!textStyle) return undefined;
|
|
49
|
-
if (Array.isArray(textStyle)) {
|
|
50
|
-
for (const styleItem of textStyle) {
|
|
51
|
-
if (
|
|
52
|
-
styleItem &&
|
|
53
|
-
typeof styleItem === 'object' &&
|
|
54
|
-
'fontSize' in styleItem
|
|
55
|
-
) {
|
|
56
|
-
return styleItem.fontSize;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
60
|
-
return textStyle.fontSize;
|
|
61
|
-
}
|
|
62
|
-
return undefined;
|
|
63
|
-
},
|
|
64
|
-
[]
|
|
65
|
-
);
|
|
66
|
-
|
|
67
49
|
const {
|
|
68
50
|
scrollHandler,
|
|
69
51
|
navigationBarHeight,
|
|
@@ -85,11 +67,7 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
85
67
|
const navigationTitle = useCallback(
|
|
86
68
|
() => (
|
|
87
69
|
<Animated.Text
|
|
88
|
-
style={[
|
|
89
|
-
navigationTitleAnimatedStyle,
|
|
90
|
-
navigationTitleStyle,
|
|
91
|
-
styles.titleStyle,
|
|
92
|
-
]}
|
|
70
|
+
style={[navigationTitleAnimatedStyle, navigationTitleStyle]}
|
|
93
71
|
numberOfLines={1}
|
|
94
72
|
>
|
|
95
73
|
{title}
|
|
@@ -121,7 +99,9 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
121
99
|
});
|
|
122
100
|
}}
|
|
123
101
|
>
|
|
124
|
-
<Animated.View
|
|
102
|
+
<Animated.View
|
|
103
|
+
style={parallax ? headerBackgroundAnimatedStyle : undefined}
|
|
104
|
+
>
|
|
125
105
|
<HeaderBackground />
|
|
126
106
|
</Animated.View>
|
|
127
107
|
|
|
@@ -154,6 +134,7 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
154
134
|
);
|
|
155
135
|
}, [
|
|
156
136
|
navigationBarHeight,
|
|
137
|
+
parallax,
|
|
157
138
|
headerBackgroundAnimatedStyle,
|
|
158
139
|
HeaderBackground,
|
|
159
140
|
HeaderContent,
|
|
@@ -165,9 +146,11 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
165
146
|
setHeaderTitleLayout,
|
|
166
147
|
]);
|
|
167
148
|
|
|
149
|
+
type CustomItem = typeof HEADER_ITEM | typeof EMPTY_ITEM | T;
|
|
150
|
+
|
|
168
151
|
const renderItem = useCallback(
|
|
169
|
-
({ item }:
|
|
170
|
-
if (item ===
|
|
152
|
+
({ item }: ListRenderItemInfo<CustomItem>): ReactElement | null => {
|
|
153
|
+
if (item === HEADER_ITEM) {
|
|
171
154
|
return (
|
|
172
155
|
<View
|
|
173
156
|
style={[
|
|
@@ -204,6 +187,13 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
204
187
|
</View>
|
|
205
188
|
);
|
|
206
189
|
}
|
|
190
|
+
if (item === EMPTY_ITEM) {
|
|
191
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
192
|
+
if (typeof EmptyComponent === 'function') {
|
|
193
|
+
return createElement(EmptyComponent);
|
|
194
|
+
}
|
|
195
|
+
return EmptyComponent as ReactElement | null;
|
|
196
|
+
}
|
|
207
197
|
return flatListProps.renderItem &&
|
|
208
198
|
typeof flatListProps.renderItem === 'function'
|
|
209
199
|
? flatListProps.renderItem({ item } as ListRenderItemInfo<T>)
|
|
@@ -221,32 +211,40 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
221
211
|
]
|
|
222
212
|
);
|
|
223
213
|
|
|
214
|
+
const data = useMemo(() => {
|
|
215
|
+
const listData = Array.isArray(flatListProps.data)
|
|
216
|
+
? flatListProps.data
|
|
217
|
+
: [];
|
|
218
|
+
if (listData.length === 0) {
|
|
219
|
+
return [HEADER_ITEM, EMPTY_ITEM];
|
|
220
|
+
}
|
|
221
|
+
return [HEADER_ITEM, ...listData];
|
|
222
|
+
}, [flatListProps.data]);
|
|
223
|
+
|
|
224
224
|
return (
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
renderItem={renderItem}
|
|
249
|
-
/>
|
|
225
|
+
<>
|
|
226
|
+
<StatusBar backgroundColor="transparent" translucent />
|
|
227
|
+
<Animated.FlatList
|
|
228
|
+
{...flatListProps}
|
|
229
|
+
stickyHeaderIndices={[1]}
|
|
230
|
+
ListHeaderComponent={
|
|
231
|
+
<Animated.View
|
|
232
|
+
style={[
|
|
233
|
+
styles.mainHeaderContainer,
|
|
234
|
+
{
|
|
235
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
236
|
+
transform: [{ translateY: navigationBarHeight }],
|
|
237
|
+
},
|
|
238
|
+
]}
|
|
239
|
+
>
|
|
240
|
+
{ListHeaderComponent}
|
|
241
|
+
</Animated.View>
|
|
242
|
+
}
|
|
243
|
+
onScroll={scrollHandler}
|
|
244
|
+
data={data}
|
|
245
|
+
renderItem={renderItem}
|
|
246
|
+
/>
|
|
247
|
+
</>
|
|
250
248
|
);
|
|
251
249
|
}
|
|
252
250
|
|
|
@@ -254,20 +252,14 @@ const styles = StyleSheet.create({
|
|
|
254
252
|
navigationBar: {
|
|
255
253
|
backgroundColor: 'transparent',
|
|
256
254
|
},
|
|
257
|
-
titleStyle: {
|
|
258
|
-
left: 0,
|
|
259
|
-
right: 0,
|
|
260
|
-
top: 0,
|
|
261
|
-
bottom: 0,
|
|
262
|
-
},
|
|
263
255
|
headerWrapper: {
|
|
264
256
|
overflow: 'visible',
|
|
265
257
|
},
|
|
266
258
|
headerContainer: {
|
|
259
|
+
position: 'absolute',
|
|
267
260
|
left: 0,
|
|
268
261
|
right: 0,
|
|
269
262
|
overflow: 'visible',
|
|
270
|
-
position: 'absolute',
|
|
271
263
|
},
|
|
272
264
|
stickyHeaderContainer: {
|
|
273
265
|
overflow: 'scroll',
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type StyleProp, type TextStyle } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export const getFontSizeFromStyle = (textStyle: StyleProp<TextStyle>) => {
|
|
4
|
+
if (!textStyle) return undefined;
|
|
5
|
+
if (Array.isArray(textStyle)) {
|
|
6
|
+
for (const styleItem of textStyle.reverse()) {
|
|
7
|
+
if (
|
|
8
|
+
styleItem &&
|
|
9
|
+
typeof styleItem === 'object' &&
|
|
10
|
+
'fontSize' in styleItem
|
|
11
|
+
) {
|
|
12
|
+
return styleItem.fontSize;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
16
|
+
return textStyle.fontSize;
|
|
17
|
+
}
|
|
18
|
+
return undefined;
|
|
19
|
+
};
|