react-native-animated-header-flat-list 1.1.1 → 1.2.1
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 +10 -2
- package/lib/commonjs/components/AnimatedHeaderFlatList.js +68 -52
- 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 +69 -53
- 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 +2 -1
- 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 +2 -1
- 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 +20 -54
- package/src/components/AnimatedHeaderFlatList.tsx +112 -92
- package/src/utils/styleUtils.ts +19 -0
package/README.md
CHANGED
|
@@ -56,15 +56,22 @@ Make sure to follow the installation instructions for each dependency:
|
|
|
56
56
|
|
|
57
57
|
### Additional Setup
|
|
58
58
|
|
|
59
|
-
For React Native Reanimated,
|
|
59
|
+
For React Native Reanimated, Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
|
|
60
|
+
|
|
60
61
|
```js
|
|
61
62
|
module.exports = {
|
|
63
|
+
presets: [
|
|
64
|
+
... // don't add it here :)
|
|
65
|
+
],
|
|
62
66
|
plugins: [
|
|
67
|
+
...
|
|
63
68
|
'react-native-reanimated/plugin',
|
|
64
69
|
],
|
|
65
70
|
};
|
|
66
71
|
```
|
|
67
72
|
|
|
73
|
+
CAUTION: `react-native-reanimated/plugin` has to be listed last.
|
|
74
|
+
|
|
68
75
|
## Usage
|
|
69
76
|
|
|
70
77
|
```tsx
|
|
@@ -200,7 +207,7 @@ const styles = StyleSheet.create({
|
|
|
200
207
|
### Props
|
|
201
208
|
|
|
202
209
|
| Prop | Type | Required | Description |
|
|
203
|
-
|
|
|
210
|
+
| ---------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
204
211
|
| `navigation` | NavigationProp<any> | Yes | React Navigation navigation prop |
|
|
205
212
|
| `title` | string | Yes | The title text that will animate between header and navigation bar |
|
|
206
213
|
| `headerTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
|
|
@@ -208,6 +215,7 @@ const styles = StyleSheet.create({
|
|
|
208
215
|
| `HeaderBackground` | React.ComponentType | Yes | Component to be rendered as the header background |
|
|
209
216
|
| `HeaderContent` | React.ComponentType | No | Component to be rendered on top of the header background. Its opacity will automatically animate based on scroll position |
|
|
210
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 |
|
|
211
219
|
| `...FlatListProps` | FlatListProps | - | All standard FlatList props are supported |
|
|
212
220
|
|
|
213
221
|
## Contributing
|
|
@@ -6,12 +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; }
|
|
16
|
+
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
17
|
+
const EMPTY_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_EMPTY_ITEM';
|
|
15
18
|
function AnimatedHeaderFlatList({
|
|
16
19
|
navigation,
|
|
17
20
|
title,
|
|
@@ -20,21 +23,9 @@ function AnimatedHeaderFlatList({
|
|
|
20
23
|
HeaderBackground,
|
|
21
24
|
HeaderContent,
|
|
22
25
|
StickyComponent,
|
|
26
|
+
parallax = true,
|
|
23
27
|
...flatListProps
|
|
24
28
|
}) {
|
|
25
|
-
const getFontSizeFromStyle = (0, _react.useCallback)(textStyle => {
|
|
26
|
-
if (!textStyle) return undefined;
|
|
27
|
-
if (Array.isArray(textStyle)) {
|
|
28
|
-
for (const styleItem of textStyle) {
|
|
29
|
-
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
30
|
-
return styleItem.fontSize;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
34
|
-
return textStyle.fontSize;
|
|
35
|
-
}
|
|
36
|
-
return undefined;
|
|
37
|
-
}, []);
|
|
38
29
|
const {
|
|
39
30
|
scrollHandler,
|
|
40
31
|
navigationBarHeight,
|
|
@@ -49,8 +40,8 @@ function AnimatedHeaderFlatList({
|
|
|
49
40
|
headerContentAnimatedStyle,
|
|
50
41
|
headerBackgroundAnimatedStyle
|
|
51
42
|
} = (0, _useAnimatedHeaderFlatListAnimatedStyles.useAnimatedHeaderFlatListAnimatedStyles)({
|
|
52
|
-
headerTitleFontSize: getFontSizeFromStyle(headerTitleStyle),
|
|
53
|
-
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle)
|
|
43
|
+
headerTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(headerTitleStyle),
|
|
44
|
+
navigationTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(navigationTitleStyle)
|
|
54
45
|
});
|
|
55
46
|
const navigationTitle = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
56
47
|
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
@@ -81,7 +72,7 @@ function AnimatedHeaderFlatList({
|
|
|
81
72
|
});
|
|
82
73
|
},
|
|
83
74
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
84
|
-
style: headerBackgroundAnimatedStyle,
|
|
75
|
+
style: parallax ? headerBackgroundAnimatedStyle : undefined,
|
|
85
76
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBackground, {})
|
|
86
77
|
}), HeaderContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
87
78
|
style: [headerContentAnimatedStyle, styles.headerContentContainer],
|
|
@@ -96,49 +87,74 @@ function AnimatedHeaderFlatList({
|
|
|
96
87
|
})]
|
|
97
88
|
})
|
|
98
89
|
});
|
|
99
|
-
}, [navigationBarHeight, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
90
|
+
}, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
91
|
+
const HeaderItem = (0, _react.useCallback)(() => {
|
|
92
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
93
|
+
style: [styles.stickyHeaderContainer, {
|
|
94
|
+
height: navigationBarHeight + stickyComponentLayout.height
|
|
95
|
+
}],
|
|
96
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
97
|
+
style: [stickyHeaderAnimatedStyle, styles.stickyHeader, {
|
|
98
|
+
bottom: headerLayout.height - navigationBarHeight * 2 + stickyComponentLayout.height
|
|
99
|
+
}],
|
|
100
|
+
children: ListHeaderComponent
|
|
101
|
+
}), StickyComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
102
|
+
style: styles.stickyComponentContainer,
|
|
103
|
+
onLayout: event => {
|
|
104
|
+
setStickyComponentLayout(event.nativeEvent.layout);
|
|
105
|
+
},
|
|
106
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StickyComponent, {})
|
|
107
|
+
})]
|
|
108
|
+
});
|
|
109
|
+
}, [ListHeaderComponent, StickyComponent, headerLayout.height, navigationBarHeight, setStickyComponentLayout, stickyComponentLayout.height, stickyHeaderAnimatedStyle]);
|
|
100
110
|
const renderItem = (0, _react.useCallback)(({
|
|
101
111
|
item
|
|
102
112
|
}) => {
|
|
103
|
-
if (item ===
|
|
104
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
onLayout: event => {
|
|
116
|
-
setStickyComponentLayout(event.nativeEvent.layout);
|
|
117
|
-
},
|
|
118
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StickyComponent, {})
|
|
119
|
-
})]
|
|
113
|
+
if (item === HEADER_ITEM) {
|
|
114
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderItem, {});
|
|
115
|
+
}
|
|
116
|
+
if (item === EMPTY_ITEM) {
|
|
117
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
118
|
+
if (typeof EmptyComponent === 'function') {
|
|
119
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
120
|
+
children: [HeaderItem(), /*#__PURE__*/(0, _react.createElement)(EmptyComponent)]
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
124
|
+
children: [HeaderItem(), EmptyComponent]
|
|
120
125
|
});
|
|
121
126
|
}
|
|
122
127
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
123
128
|
item
|
|
124
129
|
}) : null;
|
|
125
|
-
}, [flatListProps,
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
130
|
+
}, [flatListProps, HeaderItem]);
|
|
131
|
+
const data = (0, _react.useMemo)(() => {
|
|
132
|
+
const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
|
|
133
|
+
if (listData.length === 0) {
|
|
134
|
+
return [EMPTY_ITEM];
|
|
135
|
+
}
|
|
136
|
+
return [HEADER_ITEM, ...listData];
|
|
137
|
+
}, [flatListProps.data]);
|
|
138
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
139
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
|
|
140
|
+
backgroundColor: "transparent",
|
|
141
|
+
translucent: true
|
|
142
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.FlatList, {
|
|
143
|
+
...flatListProps,
|
|
144
|
+
stickyHeaderIndices: [1],
|
|
145
|
+
ListHeaderComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
146
|
+
style: [styles.mainHeaderContainer, {
|
|
147
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
148
|
+
transform: [{
|
|
149
|
+
translateY: navigationBarHeight
|
|
150
|
+
}]
|
|
151
|
+
}],
|
|
152
|
+
children: ListHeaderComponent
|
|
153
|
+
}),
|
|
154
|
+
onScroll: scrollHandler,
|
|
155
|
+
data: data,
|
|
156
|
+
renderItem: renderItem
|
|
157
|
+
})]
|
|
142
158
|
});
|
|
143
159
|
}
|
|
144
160
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -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","HeaderItem","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","renderItem","item","EmptyComponent","ListEmptyComponent","Fragment","createElement","data","listData","Array","isArray","length","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,11 +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
|
-
import {
|
|
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_ITEM';
|
|
9
12
|
export function AnimatedHeaderFlatList({
|
|
10
13
|
navigation,
|
|
11
14
|
title,
|
|
@@ -14,21 +17,9 @@ export function AnimatedHeaderFlatList({
|
|
|
14
17
|
HeaderBackground,
|
|
15
18
|
HeaderContent,
|
|
16
19
|
StickyComponent,
|
|
20
|
+
parallax = true,
|
|
17
21
|
...flatListProps
|
|
18
22
|
}) {
|
|
19
|
-
const getFontSizeFromStyle = useCallback(textStyle => {
|
|
20
|
-
if (!textStyle) return undefined;
|
|
21
|
-
if (Array.isArray(textStyle)) {
|
|
22
|
-
for (const styleItem of textStyle) {
|
|
23
|
-
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
24
|
-
return styleItem.fontSize;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
28
|
-
return textStyle.fontSize;
|
|
29
|
-
}
|
|
30
|
-
return undefined;
|
|
31
|
-
}, []);
|
|
32
23
|
const {
|
|
33
24
|
scrollHandler,
|
|
34
25
|
navigationBarHeight,
|
|
@@ -75,7 +66,7 @@ export function AnimatedHeaderFlatList({
|
|
|
75
66
|
});
|
|
76
67
|
},
|
|
77
68
|
children: [/*#__PURE__*/_jsx(Animated.View, {
|
|
78
|
-
style: headerBackgroundAnimatedStyle,
|
|
69
|
+
style: parallax ? headerBackgroundAnimatedStyle : undefined,
|
|
79
70
|
children: /*#__PURE__*/_jsx(HeaderBackground, {})
|
|
80
71
|
}), HeaderContent && /*#__PURE__*/_jsx(Animated.View, {
|
|
81
72
|
style: [headerContentAnimatedStyle, styles.headerContentContainer],
|
|
@@ -90,49 +81,74 @@ export function AnimatedHeaderFlatList({
|
|
|
90
81
|
})]
|
|
91
82
|
})
|
|
92
83
|
});
|
|
93
|
-
}, [navigationBarHeight, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
84
|
+
}, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout]);
|
|
85
|
+
const HeaderItem = useCallback(() => {
|
|
86
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
87
|
+
style: [styles.stickyHeaderContainer, {
|
|
88
|
+
height: navigationBarHeight + stickyComponentLayout.height
|
|
89
|
+
}],
|
|
90
|
+
children: [/*#__PURE__*/_jsx(Animated.View, {
|
|
91
|
+
style: [stickyHeaderAnimatedStyle, styles.stickyHeader, {
|
|
92
|
+
bottom: headerLayout.height - navigationBarHeight * 2 + stickyComponentLayout.height
|
|
93
|
+
}],
|
|
94
|
+
children: ListHeaderComponent
|
|
95
|
+
}), StickyComponent && /*#__PURE__*/_jsx(View, {
|
|
96
|
+
style: styles.stickyComponentContainer,
|
|
97
|
+
onLayout: event => {
|
|
98
|
+
setStickyComponentLayout(event.nativeEvent.layout);
|
|
99
|
+
},
|
|
100
|
+
children: /*#__PURE__*/_jsx(StickyComponent, {})
|
|
101
|
+
})]
|
|
102
|
+
});
|
|
103
|
+
}, [ListHeaderComponent, StickyComponent, headerLayout.height, navigationBarHeight, setStickyComponentLayout, stickyComponentLayout.height, stickyHeaderAnimatedStyle]);
|
|
94
104
|
const renderItem = useCallback(({
|
|
95
105
|
item
|
|
96
106
|
}) => {
|
|
97
|
-
if (item ===
|
|
98
|
-
return /*#__PURE__*/
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
onLayout: event => {
|
|
110
|
-
setStickyComponentLayout(event.nativeEvent.layout);
|
|
111
|
-
},
|
|
112
|
-
children: /*#__PURE__*/_jsx(StickyComponent, {})
|
|
113
|
-
})]
|
|
107
|
+
if (item === HEADER_ITEM) {
|
|
108
|
+
return /*#__PURE__*/_jsx(HeaderItem, {});
|
|
109
|
+
}
|
|
110
|
+
if (item === EMPTY_ITEM) {
|
|
111
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
112
|
+
if (typeof EmptyComponent === 'function') {
|
|
113
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
114
|
+
children: [HeaderItem(), /*#__PURE__*/createElement(EmptyComponent)]
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
118
|
+
children: [HeaderItem(), EmptyComponent]
|
|
114
119
|
});
|
|
115
120
|
}
|
|
116
121
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
117
122
|
item
|
|
118
123
|
}) : null;
|
|
119
|
-
}, [flatListProps,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
124
|
+
}, [flatListProps, HeaderItem]);
|
|
125
|
+
const data = useMemo(() => {
|
|
126
|
+
const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
|
|
127
|
+
if (listData.length === 0) {
|
|
128
|
+
return [EMPTY_ITEM];
|
|
129
|
+
}
|
|
130
|
+
return [HEADER_ITEM, ...listData];
|
|
131
|
+
}, [flatListProps.data]);
|
|
132
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
133
|
+
children: [/*#__PURE__*/_jsx(StatusBar, {
|
|
134
|
+
backgroundColor: "transparent",
|
|
135
|
+
translucent: true
|
|
136
|
+
}), /*#__PURE__*/_jsx(Animated.FlatList, {
|
|
137
|
+
...flatListProps,
|
|
138
|
+
stickyHeaderIndices: [1],
|
|
139
|
+
ListHeaderComponent: /*#__PURE__*/_jsx(Animated.View, {
|
|
140
|
+
style: [styles.mainHeaderContainer, {
|
|
141
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
142
|
+
transform: [{
|
|
143
|
+
translateY: navigationBarHeight
|
|
144
|
+
}]
|
|
145
|
+
}],
|
|
146
|
+
children: ListHeaderComponent
|
|
147
|
+
}),
|
|
148
|
+
onScroll: scrollHandler,
|
|
149
|
+
data: data,
|
|
150
|
+
renderItem: renderItem
|
|
151
|
+
})]
|
|
136
152
|
});
|
|
137
153
|
}
|
|
138
154
|
const styles = StyleSheet.create({
|
|
@@ -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","HeaderItem","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","renderItem","item","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":[]}
|
|
@@ -10,8 +10,9 @@ interface Props {
|
|
|
10
10
|
HeaderBackground: React.ComponentType<any>;
|
|
11
11
|
HeaderContent?: React.ComponentType<any>;
|
|
12
12
|
StickyComponent?: React.ComponentType<any>;
|
|
13
|
+
parallax?: boolean;
|
|
13
14
|
}
|
|
14
15
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
15
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export {};
|
|
17
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,2CAsNhC"}
|
|
@@ -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"}
|
|
@@ -10,8 +10,9 @@ interface Props {
|
|
|
10
10
|
HeaderBackground: React.ComponentType<any>;
|
|
11
11
|
HeaderContent?: React.ComponentType<any>;
|
|
12
12
|
StickyComponent?: React.ComponentType<any>;
|
|
13
|
+
parallax?: boolean;
|
|
13
14
|
}
|
|
14
15
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
15
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export {};
|
|
17
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,2CAsNhC"}
|
|
@@ -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.1",
|
|
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",
|
|
@@ -67,31 +67,31 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@commitlint/config-conventional": "17.7.0",
|
|
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.
|
|
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
75
|
"@release-it/conventional-changelog": "7.0.0",
|
|
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.
|
|
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
90
|
"release-it": "16.1.5",
|
|
91
|
-
"typescript": "^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",
|
|
@@ -132,41 +132,7 @@
|
|
|
132
132
|
"plugins": {
|
|
133
133
|
"@release-it/conventional-changelog": {
|
|
134
134
|
"preset": {
|
|
135
|
-
"name": "angular"
|
|
136
|
-
"types": [
|
|
137
|
-
{
|
|
138
|
-
"type": "feat",
|
|
139
|
-
"section": "Features"
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
"type": "fix",
|
|
143
|
-
"section": "Bug Fixes"
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
"type": "chore",
|
|
147
|
-
"hidden": true
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
"type": "docs",
|
|
151
|
-
"hidden": true
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
"type": "style",
|
|
155
|
-
"hidden": true
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"type": "refactor",
|
|
159
|
-
"hidden": true
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"type": "perf",
|
|
163
|
-
"hidden": true
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"type": "test",
|
|
167
|
-
"hidden": true
|
|
168
|
-
}
|
|
169
|
-
]
|
|
135
|
+
"name": "angular"
|
|
170
136
|
},
|
|
171
137
|
"infile": "CHANGELOG.md"
|
|
172
138
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
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,
|
|
@@ -10,8 +11,9 @@ import {
|
|
|
10
11
|
import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
11
12
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
12
13
|
import { type NavigationProp } from '@react-navigation/native';
|
|
13
|
-
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
14
14
|
import Animated from 'react-native-reanimated';
|
|
15
|
+
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
16
|
+
import { getFontSizeFromStyle } from '../utils/styleUtils';
|
|
15
17
|
|
|
16
18
|
interface Props {
|
|
17
19
|
navigation: NavigationProp<any>;
|
|
@@ -21,6 +23,7 @@ interface Props {
|
|
|
21
23
|
HeaderBackground: React.ComponentType<any>;
|
|
22
24
|
HeaderContent?: React.ComponentType<any>;
|
|
23
25
|
StickyComponent?: React.ComponentType<any>;
|
|
26
|
+
parallax?: boolean;
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
type AnimatedHeaderFlatListProps<T> = Omit<
|
|
@@ -29,6 +32,9 @@ type AnimatedHeaderFlatListProps<T> = Omit<
|
|
|
29
32
|
> &
|
|
30
33
|
Props;
|
|
31
34
|
|
|
35
|
+
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
36
|
+
const EMPTY_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_EMPTY_ITEM';
|
|
37
|
+
|
|
32
38
|
export function AnimatedHeaderFlatList<T>({
|
|
33
39
|
navigation,
|
|
34
40
|
title,
|
|
@@ -37,29 +43,9 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
37
43
|
HeaderBackground,
|
|
38
44
|
HeaderContent,
|
|
39
45
|
StickyComponent,
|
|
46
|
+
parallax = true,
|
|
40
47
|
...flatListProps
|
|
41
48
|
}: AnimatedHeaderFlatListProps<T>) {
|
|
42
|
-
const getFontSizeFromStyle = useCallback(
|
|
43
|
-
(textStyle: StyleProp<TextStyle>) => {
|
|
44
|
-
if (!textStyle) return undefined;
|
|
45
|
-
if (Array.isArray(textStyle)) {
|
|
46
|
-
for (const styleItem of textStyle) {
|
|
47
|
-
if (
|
|
48
|
-
styleItem &&
|
|
49
|
-
typeof styleItem === 'object' &&
|
|
50
|
-
'fontSize' in styleItem
|
|
51
|
-
) {
|
|
52
|
-
return styleItem.fontSize;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
} else if (typeof textStyle === 'object' && 'fontSize' in textStyle) {
|
|
56
|
-
return textStyle.fontSize;
|
|
57
|
-
}
|
|
58
|
-
return undefined;
|
|
59
|
-
},
|
|
60
|
-
[]
|
|
61
|
-
);
|
|
62
|
-
|
|
63
49
|
const {
|
|
64
50
|
scrollHandler,
|
|
65
51
|
navigationBarHeight,
|
|
@@ -113,7 +99,9 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
113
99
|
});
|
|
114
100
|
}}
|
|
115
101
|
>
|
|
116
|
-
<Animated.View
|
|
102
|
+
<Animated.View
|
|
103
|
+
style={parallax ? headerBackgroundAnimatedStyle : undefined}
|
|
104
|
+
>
|
|
117
105
|
<HeaderBackground />
|
|
118
106
|
</Animated.View>
|
|
119
107
|
|
|
@@ -146,6 +134,7 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
146
134
|
);
|
|
147
135
|
}, [
|
|
148
136
|
navigationBarHeight,
|
|
137
|
+
parallax,
|
|
149
138
|
headerBackgroundAnimatedStyle,
|
|
150
139
|
HeaderBackground,
|
|
151
140
|
HeaderContent,
|
|
@@ -157,43 +146,74 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
157
146
|
setHeaderTitleLayout,
|
|
158
147
|
]);
|
|
159
148
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
149
|
+
type CustomItem = typeof HEADER_ITEM | typeof EMPTY_ITEM | T;
|
|
150
|
+
|
|
151
|
+
const HeaderItem = useCallback(() => {
|
|
152
|
+
return (
|
|
153
|
+
<View
|
|
154
|
+
style={[
|
|
155
|
+
styles.stickyHeaderContainer,
|
|
156
|
+
{
|
|
157
|
+
height: navigationBarHeight + stickyComponentLayout.height,
|
|
158
|
+
},
|
|
159
|
+
]}
|
|
160
|
+
>
|
|
161
|
+
<Animated.View
|
|
162
|
+
style={[
|
|
163
|
+
stickyHeaderAnimatedStyle,
|
|
164
|
+
styles.stickyHeader,
|
|
165
|
+
{
|
|
166
|
+
bottom:
|
|
167
|
+
headerLayout.height -
|
|
168
|
+
navigationBarHeight * 2 +
|
|
169
|
+
stickyComponentLayout.height,
|
|
170
|
+
},
|
|
171
|
+
]}
|
|
172
|
+
>
|
|
173
|
+
{ListHeaderComponent}
|
|
174
|
+
</Animated.View>
|
|
175
|
+
{StickyComponent && (
|
|
164
176
|
<View
|
|
165
|
-
style={
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
},
|
|
170
|
-
]}
|
|
177
|
+
style={styles.stickyComponentContainer}
|
|
178
|
+
onLayout={(event: LayoutChangeEvent) => {
|
|
179
|
+
setStickyComponentLayout(event.nativeEvent.layout);
|
|
180
|
+
}}
|
|
171
181
|
>
|
|
172
|
-
<
|
|
173
|
-
style={[
|
|
174
|
-
stickyHeaderAnimatedStyle,
|
|
175
|
-
styles.stickyHeader,
|
|
176
|
-
{
|
|
177
|
-
bottom:
|
|
178
|
-
headerLayout.height -
|
|
179
|
-
navigationBarHeight * 2 +
|
|
180
|
-
stickyComponentLayout.height,
|
|
181
|
-
},
|
|
182
|
-
]}
|
|
183
|
-
>
|
|
184
|
-
{ListHeaderComponent}
|
|
185
|
-
</Animated.View>
|
|
186
|
-
{StickyComponent && (
|
|
187
|
-
<View
|
|
188
|
-
style={styles.stickyComponentContainer}
|
|
189
|
-
onLayout={(event: LayoutChangeEvent) => {
|
|
190
|
-
setStickyComponentLayout(event.nativeEvent.layout);
|
|
191
|
-
}}
|
|
192
|
-
>
|
|
193
|
-
<StickyComponent />
|
|
194
|
-
</View>
|
|
195
|
-
)}
|
|
182
|
+
<StickyComponent />
|
|
196
183
|
</View>
|
|
184
|
+
)}
|
|
185
|
+
</View>
|
|
186
|
+
);
|
|
187
|
+
}, [
|
|
188
|
+
ListHeaderComponent,
|
|
189
|
+
StickyComponent,
|
|
190
|
+
headerLayout.height,
|
|
191
|
+
navigationBarHeight,
|
|
192
|
+
setStickyComponentLayout,
|
|
193
|
+
stickyComponentLayout.height,
|
|
194
|
+
stickyHeaderAnimatedStyle,
|
|
195
|
+
]);
|
|
196
|
+
|
|
197
|
+
const renderItem = useCallback(
|
|
198
|
+
({ item }: ListRenderItemInfo<CustomItem>): ReactElement | null => {
|
|
199
|
+
if (item === HEADER_ITEM) {
|
|
200
|
+
return <HeaderItem />;
|
|
201
|
+
}
|
|
202
|
+
if (item === EMPTY_ITEM) {
|
|
203
|
+
const EmptyComponent = flatListProps.ListEmptyComponent;
|
|
204
|
+
if (typeof EmptyComponent === 'function') {
|
|
205
|
+
return (
|
|
206
|
+
<>
|
|
207
|
+
{HeaderItem()}
|
|
208
|
+
{createElement(EmptyComponent)}
|
|
209
|
+
</>
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
return (
|
|
213
|
+
<>
|
|
214
|
+
{HeaderItem()}
|
|
215
|
+
{EmptyComponent as ReactElement | null}
|
|
216
|
+
</>
|
|
197
217
|
);
|
|
198
218
|
}
|
|
199
219
|
return flatListProps.renderItem &&
|
|
@@ -201,43 +221,43 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
201
221
|
? flatListProps.renderItem({ item } as ListRenderItemInfo<T>)
|
|
202
222
|
: null;
|
|
203
223
|
},
|
|
204
|
-
[
|
|
205
|
-
flatListProps,
|
|
206
|
-
navigationBarHeight,
|
|
207
|
-
stickyComponentLayout.height,
|
|
208
|
-
stickyHeaderAnimatedStyle,
|
|
209
|
-
headerLayout.height,
|
|
210
|
-
ListHeaderComponent,
|
|
211
|
-
StickyComponent,
|
|
212
|
-
setStickyComponentLayout,
|
|
213
|
-
]
|
|
224
|
+
[flatListProps, HeaderItem]
|
|
214
225
|
);
|
|
215
226
|
|
|
227
|
+
const data = useMemo(() => {
|
|
228
|
+
const listData = Array.isArray(flatListProps.data)
|
|
229
|
+
? flatListProps.data
|
|
230
|
+
: [];
|
|
231
|
+
if (listData.length === 0) {
|
|
232
|
+
return [EMPTY_ITEM];
|
|
233
|
+
}
|
|
234
|
+
return [HEADER_ITEM, ...listData];
|
|
235
|
+
}, [flatListProps.data]);
|
|
236
|
+
|
|
216
237
|
return (
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
/>
|
|
238
|
+
<>
|
|
239
|
+
<StatusBar backgroundColor="transparent" translucent />
|
|
240
|
+
<Animated.FlatList
|
|
241
|
+
{...flatListProps}
|
|
242
|
+
stickyHeaderIndices={[1]}
|
|
243
|
+
ListHeaderComponent={
|
|
244
|
+
<Animated.View
|
|
245
|
+
style={[
|
|
246
|
+
styles.mainHeaderContainer,
|
|
247
|
+
{
|
|
248
|
+
height: headerLayout.height - navigationBarHeight * 2,
|
|
249
|
+
transform: [{ translateY: navigationBarHeight }],
|
|
250
|
+
},
|
|
251
|
+
]}
|
|
252
|
+
>
|
|
253
|
+
{ListHeaderComponent}
|
|
254
|
+
</Animated.View>
|
|
255
|
+
}
|
|
256
|
+
onScroll={scrollHandler}
|
|
257
|
+
data={data}
|
|
258
|
+
renderItem={renderItem}
|
|
259
|
+
/>
|
|
260
|
+
</>
|
|
241
261
|
);
|
|
242
262
|
}
|
|
243
263
|
|
|
@@ -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
|
+
};
|