react-native-animated-header-flat-list 1.1.1 → 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 +10 -2
- package/lib/commonjs/components/AnimatedHeaderFlatList.js +44 -35
- 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 +45 -36
- 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 +57 -50
- 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';
|
|
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,11 +87,11 @@ 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]);
|
|
100
91
|
const renderItem = (0, _react.useCallback)(({
|
|
101
92
|
item
|
|
102
93
|
}) => {
|
|
103
|
-
if (item ===
|
|
94
|
+
if (item === HEADER_ITEM) {
|
|
104
95
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
105
96
|
style: [styles.stickyHeaderContainer, {
|
|
106
97
|
height: navigationBarHeight + stickyComponentLayout.height
|
|
@@ -119,26 +110,44 @@ function AnimatedHeaderFlatList({
|
|
|
119
110
|
})]
|
|
120
111
|
});
|
|
121
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
|
+
}
|
|
122
120
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
123
121
|
item
|
|
124
122
|
}) : null;
|
|
125
123
|
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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
|
+
})]
|
|
142
151
|
});
|
|
143
152
|
}
|
|
144
153
|
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","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,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';
|
|
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,11 +81,11 @@ 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]);
|
|
94
85
|
const renderItem = useCallback(({
|
|
95
86
|
item
|
|
96
87
|
}) => {
|
|
97
|
-
if (item ===
|
|
88
|
+
if (item === HEADER_ITEM) {
|
|
98
89
|
return /*#__PURE__*/_jsxs(View, {
|
|
99
90
|
style: [styles.stickyHeaderContainer, {
|
|
100
91
|
height: navigationBarHeight + stickyComponentLayout.height
|
|
@@ -113,26 +104,44 @@ export function AnimatedHeaderFlatList({
|
|
|
113
104
|
})]
|
|
114
105
|
});
|
|
115
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
|
+
}
|
|
116
114
|
return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
|
|
117
115
|
item
|
|
118
116
|
}) : null;
|
|
119
117
|
}, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
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
|
+
})]
|
|
136
145
|
});
|
|
137
146
|
}
|
|
138
147
|
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","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":[]}
|
|
@@ -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,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"}
|
|
@@ -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,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",
|
|
@@ -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';
|
|
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,9 +146,11 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
157
146
|
setHeaderTitleLayout,
|
|
158
147
|
]);
|
|
159
148
|
|
|
149
|
+
type CustomItem = typeof HEADER_ITEM | typeof EMPTY_ITEM | T;
|
|
150
|
+
|
|
160
151
|
const renderItem = useCallback(
|
|
161
|
-
({ item }:
|
|
162
|
-
if (item ===
|
|
152
|
+
({ item }: ListRenderItemInfo<CustomItem>): ReactElement | null => {
|
|
153
|
+
if (item === HEADER_ITEM) {
|
|
163
154
|
return (
|
|
164
155
|
<View
|
|
165
156
|
style={[
|
|
@@ -196,6 +187,13 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
196
187
|
</View>
|
|
197
188
|
);
|
|
198
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
|
+
}
|
|
199
197
|
return flatListProps.renderItem &&
|
|
200
198
|
typeof flatListProps.renderItem === 'function'
|
|
201
199
|
? flatListProps.renderItem({ item } as ListRenderItemInfo<T>)
|
|
@@ -213,31 +211,40 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
213
211
|
]
|
|
214
212
|
);
|
|
215
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
|
+
|
|
216
224
|
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
|
-
/>
|
|
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
|
+
</>
|
|
241
248
|
);
|
|
242
249
|
}
|
|
243
250
|
|
|
@@ -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
|
+
};
|