react-native-animated-header-flat-list 1.3.0 → 1.4.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 +35 -45
- package/lib/commonjs/components/AnimatedHeaderFlatList.js +5 -1
- package/lib/commonjs/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/commonjs/hooks/useAnimatedHeaderFlatListAnimatedStyles.js +12 -3
- package/lib/commonjs/hooks/useAnimatedHeaderFlatListAnimatedStyles.js.map +1 -1
- package/lib/module/components/AnimatedHeaderFlatList.js +5 -1
- package/lib/module/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js +12 -3
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js.map +1 -1
- package/lib/typescript/commonjs/src/components/AnimatedHeaderFlatList.d.ts +7 -6
- package/lib/typescript/commonjs/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts +3 -1
- package/lib/typescript/commonjs/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/utils/styleUtils.d.ts.map +1 -1
- package/lib/typescript/module/src/components/AnimatedHeaderFlatList.d.ts +7 -6
- package/lib/typescript/module/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/module/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts +3 -1
- package/lib/typescript/module/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts.map +1 -1
- package/lib/typescript/module/src/utils/styleUtils.d.ts.map +1 -1
- package/package.json +16 -35
- package/src/components/AnimatedHeaderFlatList.tsx +11 -5
- package/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts +18 -1
package/README.md
CHANGED
|
@@ -76,13 +76,11 @@ CAUTION: `react-native-reanimated/plugin` has to be listed last.
|
|
|
76
76
|
|
|
77
77
|
```tsx
|
|
78
78
|
import { useNavigation } from '@react-navigation/native';
|
|
79
|
-
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
80
|
-
import { useCallback } from 'react';
|
|
81
79
|
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
|
|
82
80
|
import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
|
|
83
81
|
|
|
84
82
|
export default function HomeScreen() {
|
|
85
|
-
const navigation = useNavigation
|
|
83
|
+
const navigation = useNavigation();
|
|
86
84
|
const data = Array.from({ length: 50 }, (_, index) => ({
|
|
87
85
|
id: `item-${index}`,
|
|
88
86
|
title: `Item ${index + 1}`,
|
|
@@ -93,42 +91,32 @@ export default function HomeScreen() {
|
|
|
93
91
|
'https://images.unsplash.com/photo-1579546929518-9e396f3cc809';
|
|
94
92
|
const avatarUrl = 'https://api.dicebear.com/7.x/avataaars/png?seed=John';
|
|
95
93
|
|
|
96
|
-
const HeaderBackground =
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
/>
|
|
102
|
-
),
|
|
103
|
-
[backgroundImageUrl]
|
|
94
|
+
const HeaderBackground = () => (
|
|
95
|
+
<ImageBackground
|
|
96
|
+
source={{ uri: backgroundImageUrl }}
|
|
97
|
+
style={styles.headerBackground}
|
|
98
|
+
/>
|
|
104
99
|
);
|
|
105
100
|
|
|
106
|
-
const HeaderContent =
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
</View>
|
|
111
|
-
),
|
|
112
|
-
[avatarUrl]
|
|
101
|
+
const HeaderContent = () => (
|
|
102
|
+
<View style={styles.headerContent}>
|
|
103
|
+
<Image source={{ uri: avatarUrl }} style={styles.avatar} />
|
|
104
|
+
</View>
|
|
113
105
|
);
|
|
114
106
|
|
|
115
|
-
const StickyComponent =
|
|
116
|
-
|
|
117
|
-
[]
|
|
107
|
+
const StickyComponent = () => (
|
|
108
|
+
<Text style={styles.stickyComponent}>Sticky Item</Text>
|
|
118
109
|
);
|
|
119
110
|
|
|
120
|
-
const renderItem =
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</View>
|
|
130
|
-
),
|
|
131
|
-
[]
|
|
111
|
+
const renderItem = ({
|
|
112
|
+
item,
|
|
113
|
+
}: {
|
|
114
|
+
item: { id: string; title: string; description: string };
|
|
115
|
+
}) => (
|
|
116
|
+
<View style={styles.listItem}>
|
|
117
|
+
<Text style={styles.itemTitle}>{item.title}</Text>
|
|
118
|
+
<Text style={styles.itemDescription}>{item.description}</Text>
|
|
119
|
+
</View>
|
|
132
120
|
);
|
|
133
121
|
|
|
134
122
|
return (
|
|
@@ -206,18 +194,20 @@ const styles = StyleSheet.create({
|
|
|
206
194
|
|
|
207
195
|
### Props
|
|
208
196
|
|
|
209
|
-
| Prop
|
|
210
|
-
|
|
|
211
|
-
| `navigation`
|
|
212
|
-
| `title`
|
|
213
|
-
| `headerTitleStyle`
|
|
214
|
-
| `navigationTitleStyle`
|
|
215
|
-
| `HeaderBackground`
|
|
216
|
-
| `HeaderContent`
|
|
217
|
-
| `StickyComponent`
|
|
218
|
-
| `parallax`
|
|
219
|
-
| `navigationBarColor`
|
|
220
|
-
|
|
|
197
|
+
| Prop | Type | Required | Description |
|
|
198
|
+
| --------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
|
|
199
|
+
| `navigation` | any | Yes | React Navigation navigation prop |
|
|
200
|
+
| `title` | string | Yes | The title text that will animate between header and navigation bar |
|
|
201
|
+
| `headerTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
|
|
202
|
+
| `navigationTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the navigation bar. Supports all Text style props except position-related properties |
|
|
203
|
+
| `HeaderBackground` | React.ComponentType | Yes | Component to be rendered as the header background |
|
|
204
|
+
| `HeaderContent` | React.ComponentType | No | Component to be rendered on top of the header background. Its opacity will automatically animate based on scroll position |
|
|
205
|
+
| `StickyComponent` | React.ComponentType | No | Optional component that sticks below the navigation bar |
|
|
206
|
+
| `parallax` | boolean | No | Enable/disable parallax effect for header background. Defaults to true |
|
|
207
|
+
| `navigationBarColor` | ColorValue | No | Color of NavigationBar. Its opacity will automatically animate based on scroll position |
|
|
208
|
+
| `navigationTitleTranslateX` | number | No | Horizontal offset for the navigation title position. Defaults to 0 |
|
|
209
|
+
| `navigationTitleTranslateY` | number | No | Vertical offset for the navigation title position. Defaults to 0 |
|
|
210
|
+
| `...FlatListProps` | FlatListProps | - | All standard FlatList props are supported |
|
|
221
211
|
|
|
222
212
|
## Contributing
|
|
223
213
|
|
|
@@ -24,6 +24,8 @@ function AnimatedHeaderFlatList({
|
|
|
24
24
|
HeaderContent,
|
|
25
25
|
StickyComponent,
|
|
26
26
|
parallax = true,
|
|
27
|
+
navigationTitleTranslateX = 0,
|
|
28
|
+
navigationTitleTranslateY = 0,
|
|
27
29
|
...flatListProps
|
|
28
30
|
}) {
|
|
29
31
|
const {
|
|
@@ -42,7 +44,9 @@ function AnimatedHeaderFlatList({
|
|
|
42
44
|
headerBackgroundAnimatedStyle
|
|
43
45
|
} = (0, _useAnimatedHeaderFlatListAnimatedStyles.useAnimatedHeaderFlatListAnimatedStyles)({
|
|
44
46
|
headerTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(headerTitleStyle),
|
|
45
|
-
navigationTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(navigationTitleStyle)
|
|
47
|
+
navigationTitleFontSize: (0, _styleUtils.getFontSizeFromStyle)(navigationTitleStyle),
|
|
48
|
+
navigationTitleTranslateX,
|
|
49
|
+
navigationTitleTranslateY
|
|
46
50
|
});
|
|
47
51
|
const navigationTitle = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
|
|
48
52
|
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
@@ -1 +1 @@
|
|
|
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","AnimatedHeaderFlatList","navigation","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","navigationBarAnimatedStyle","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","animatedNavigationBar","backgroundColor","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","data","listData","Array","isArray","Fragment","StatusBar","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","StyleSheet","create","overflow","position","left","right"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;
|
|
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","AnimatedHeaderFlatList","navigation","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","navigationBarAnimatedStyle","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","animatedNavigationBar","backgroundColor","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","data","listData","Array","isArray","Fragment","StatusBar","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":[]}
|
|
@@ -11,7 +11,9 @@ var _reactNativeReanimated = require("react-native-reanimated");
|
|
|
11
11
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
12
12
|
const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
13
13
|
headerTitleFontSize,
|
|
14
|
-
navigationTitleFontSize
|
|
14
|
+
navigationTitleFontSize,
|
|
15
|
+
navigationTitleTranslateX = 0,
|
|
16
|
+
navigationTitleTranslateY = 0
|
|
15
17
|
}) => {
|
|
16
18
|
const {
|
|
17
19
|
width: windowWidth
|
|
@@ -49,14 +51,21 @@ const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
49
51
|
});
|
|
50
52
|
const navigationTitleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
51
53
|
return {
|
|
52
|
-
opacity: navigationTitleOpacity.value
|
|
54
|
+
opacity: navigationTitleOpacity.value,
|
|
55
|
+
transform: [{
|
|
56
|
+
translateX: navigationTitleTranslateX
|
|
57
|
+
}, {
|
|
58
|
+
translateY: navigationTitleTranslateY
|
|
59
|
+
}]
|
|
53
60
|
};
|
|
54
61
|
});
|
|
55
62
|
const headerTitleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
56
63
|
return {
|
|
57
64
|
opacity: 1 - navigationTitleOpacity.value,
|
|
58
65
|
transform: [{
|
|
59
|
-
translateX: (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2], 'clamp')
|
|
66
|
+
translateX: (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2 + navigationTitleTranslateX], 'clamp')
|
|
67
|
+
}, {
|
|
68
|
+
translateY: (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, navigationTitleTranslateY], 'clamp')
|
|
60
69
|
}, {
|
|
61
70
|
scale: (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [1, navigationTitleFontSize && headerTitleFontSize ? navigationTitleFontSize / headerTitleFontSize : 1], 'clamp')
|
|
62
71
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_elements","require","_react","_reactNative","_reactNativeReanimated","_reactNativeSafeAreaContext","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","width","windowWidth","useWindowDimensions","scrollY","useSharedValue","navigationBarHeight","useHeaderHeight","safeAreaInsets","useSafeAreaInsets","headerLayout","setHeaderLayout","useState","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","distanceBetweenTitleAndNavigationBar","top","navigationTitleOpacity","stickyHeaderOpacity","navigationBarAnimatedStyle","useAnimatedStyle","opacity","interpolate","value","marginBottom","Math","max","navigationTitleAnimatedStyle","
|
|
1
|
+
{"version":3,"names":["_elements","require","_react","_reactNative","_reactNativeReanimated","_reactNativeSafeAreaContext","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","navigationTitleTranslateX","navigationTitleTranslateY","width","windowWidth","useWindowDimensions","scrollY","useSharedValue","navigationBarHeight","useHeaderHeight","safeAreaInsets","useSafeAreaInsets","headerLayout","setHeaderLayout","useState","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","distanceBetweenTitleAndNavigationBar","top","navigationTitleOpacity","stickyHeaderOpacity","navigationBarAnimatedStyle","useAnimatedStyle","opacity","interpolate","value","marginBottom","Math","max","navigationTitleAnimatedStyle","transform","translateX","translateY","headerTitleAnimatedStyle","scale","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","scrollHandler","useAnimatedScrollHandler","event","contentOffset","exports"],"sourceRoot":"../../../src","sources":["hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,6 +18,8 @@ export function AnimatedHeaderFlatList({
|
|
|
18
18
|
HeaderContent,
|
|
19
19
|
StickyComponent,
|
|
20
20
|
parallax = true,
|
|
21
|
+
navigationTitleTranslateX = 0,
|
|
22
|
+
navigationTitleTranslateY = 0,
|
|
21
23
|
...flatListProps
|
|
22
24
|
}) {
|
|
23
25
|
const {
|
|
@@ -36,7 +38,9 @@ export function AnimatedHeaderFlatList({
|
|
|
36
38
|
headerBackgroundAnimatedStyle
|
|
37
39
|
} = useAnimatedHeaderFlatListAnimatedStyles({
|
|
38
40
|
headerTitleFontSize: getFontSizeFromStyle(headerTitleStyle),
|
|
39
|
-
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle)
|
|
41
|
+
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle),
|
|
42
|
+
navigationTitleTranslateX,
|
|
43
|
+
navigationTitleTranslateY
|
|
40
44
|
});
|
|
41
45
|
const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.Text, {
|
|
42
46
|
style: [navigationTitleAnimatedStyle, navigationTitleStyle],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StatusBar","StyleSheet","View","useLayoutEffect","useCallback","useMemo","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatList","navigation","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","navigationBarAnimatedStyle","navigationTitleAnimatedStyle","headerTitleAnimatedStyle","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","headerTitleFontSize","navigationTitleFontSize","navigationTitle","Text","style","numberOfLines","children","setOptions","headerShown","headerStyle","styles","navigationBar","headerShadowVisible","headerTransparent","headerTitle","headerTitleAlign","ListHeaderComponent","headerWrapper","headerContainer","top","onLayout","event","nativeEvent","layout","height","undefined","headerContentContainer","animatedNavigationBar","backgroundColor","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","data","listData","Array","isArray","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","create","overflow","position","left","right"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACEC,SAAS,EACTC,UAAU,EACVC,IAAI,QAMC,cAAc;AACrB,SAASC,eAAe,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["React","StatusBar","StyleSheet","View","useLayoutEffect","useCallback","useMemo","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatList","navigation","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","navigationBarAnimatedStyle","navigationTitleAnimatedStyle","headerTitleAnimatedStyle","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","headerTitleFontSize","navigationTitleFontSize","navigationTitle","Text","style","numberOfLines","children","setOptions","headerShown","headerStyle","styles","navigationBar","headerShadowVisible","headerTransparent","headerTitle","headerTitleAlign","ListHeaderComponent","headerWrapper","headerContainer","top","onLayout","event","nativeEvent","layout","height","undefined","headerContentContainer","animatedNavigationBar","backgroundColor","renderItem","item","stickyHeaderContainer","stickyHeader","bottom","stickyComponentContainer","data","listData","Array","isArray","translucent","FlatList","stickyHeaderIndices","mainHeaderContainer","transform","translateY","onScroll","create","overflow","position","left","right"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,9 @@ import { interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue
|
|
|
7
7
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
8
8
|
export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
9
9
|
headerTitleFontSize,
|
|
10
|
-
navigationTitleFontSize
|
|
10
|
+
navigationTitleFontSize,
|
|
11
|
+
navigationTitleTranslateX = 0,
|
|
12
|
+
navigationTitleTranslateY = 0
|
|
11
13
|
}) => {
|
|
12
14
|
const {
|
|
13
15
|
width: windowWidth
|
|
@@ -45,14 +47,21 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
45
47
|
});
|
|
46
48
|
const navigationTitleAnimatedStyle = useAnimatedStyle(() => {
|
|
47
49
|
return {
|
|
48
|
-
opacity: navigationTitleOpacity.value
|
|
50
|
+
opacity: navigationTitleOpacity.value,
|
|
51
|
+
transform: [{
|
|
52
|
+
translateX: navigationTitleTranslateX
|
|
53
|
+
}, {
|
|
54
|
+
translateY: navigationTitleTranslateY
|
|
55
|
+
}]
|
|
49
56
|
};
|
|
50
57
|
});
|
|
51
58
|
const headerTitleAnimatedStyle = useAnimatedStyle(() => {
|
|
52
59
|
return {
|
|
53
60
|
opacity: 1 - navigationTitleOpacity.value,
|
|
54
61
|
transform: [{
|
|
55
|
-
translateX: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2], 'clamp')
|
|
62
|
+
translateX: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, windowWidth / 2 - headerTitleLayout.x - headerTitleLayout.width / 2 + navigationTitleTranslateX], 'clamp')
|
|
63
|
+
}, {
|
|
64
|
+
translateY: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [0, navigationTitleTranslateY], 'clamp')
|
|
56
65
|
}, {
|
|
57
66
|
scale: interpolate(scrollY.value, [0, distanceBetweenTitleAndNavigationBar], [1, navigationTitleFontSize && headerTitleFontSize ? navigationTitleFontSize / headerTitleFontSize : 1], 'clamp')
|
|
58
67
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useHeaderHeight","useState","useWindowDimensions","interpolate","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","width","windowWidth","scrollY","navigationBarHeight","safeAreaInsets","headerLayout","setHeaderLayout","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","distanceBetweenTitleAndNavigationBar","top","navigationTitleOpacity","stickyHeaderOpacity","navigationBarAnimatedStyle","opacity","value","marginBottom","Math","max","navigationTitleAnimatedStyle","
|
|
1
|
+
{"version":3,"names":["useHeaderHeight","useState","useWindowDimensions","interpolate","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","navigationTitleTranslateX","navigationTitleTranslateY","width","windowWidth","scrollY","navigationBarHeight","safeAreaInsets","headerLayout","setHeaderLayout","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","distanceBetweenTitleAndNavigationBar","top","navigationTitleOpacity","stickyHeaderOpacity","navigationBarAnimatedStyle","opacity","value","marginBottom","Math","max","navigationTitleAnimatedStyle","transform","translateX","translateY","headerTitleAnimatedStyle","scale","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","scrollHandler","event","contentOffset"],"sourceRoot":"../../../src","sources":["hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
3
3
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
4
|
-
import { type NavigationProp } from '@react-navigation/native';
|
|
5
4
|
interface Props {
|
|
6
|
-
navigation:
|
|
5
|
+
navigation: any;
|
|
7
6
|
title: string;
|
|
8
7
|
navigationBarColor?: ColorValue;
|
|
9
8
|
headerTitleStyle?: StyleProp<TextStyle>;
|
|
10
9
|
navigationTitleStyle?: StyleProp<TextStyle>;
|
|
11
|
-
HeaderBackground: React.ComponentType
|
|
12
|
-
HeaderContent?: React.ComponentType
|
|
13
|
-
StickyComponent?: React.ComponentType
|
|
10
|
+
HeaderBackground: React.ComponentType;
|
|
11
|
+
HeaderContent?: React.ComponentType;
|
|
12
|
+
StickyComponent?: React.ComponentType;
|
|
14
13
|
parallax?: boolean;
|
|
14
|
+
navigationTitleTranslateX?: number;
|
|
15
|
+
navigationTitleTranslateY?: number;
|
|
15
16
|
}
|
|
16
17
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
17
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, navigationBarColor, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, navigationBarColor, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, navigationTitleTranslateX, navigationTitleTranslateY, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
19
20
|
//# sourceMappingURL=AnimatedHeaderFlatList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAKvE,UAAU,KAAK;IAEb,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,UAAU,CAAC;IAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,KAAK,2BAA2B,CAAC,CAAC,IAAI,IAAI,CACxC,uBAAuB,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,CACZ,GACC,KAAK,CAAC;AAIR,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,QAAe,EACf,yBAA6B,EAC7B,yBAA6B,EAC7B,GAAG,aAAa,EACjB,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CA2MhC"}
|
|
@@ -3,6 +3,8 @@ import { type AnimatedStyle, type ScrollHandlerProcessed } from 'react-native-re
|
|
|
3
3
|
type AnimatedHeaderFlatListAnimatedStylesProps = {
|
|
4
4
|
headerTitleFontSize?: number;
|
|
5
5
|
navigationTitleFontSize?: number;
|
|
6
|
+
navigationTitleTranslateX?: number;
|
|
7
|
+
navigationTitleTranslateY?: number;
|
|
6
8
|
};
|
|
7
9
|
type AnimatedHeaderFlatListAnimatedStyles = {
|
|
8
10
|
scrollHandler: ScrollHandlerProcessed<Record<string, unknown>>;
|
|
@@ -20,6 +22,6 @@ type AnimatedHeaderFlatListAnimatedStyles = {
|
|
|
20
22
|
headerContentAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
21
23
|
headerBackgroundAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
22
24
|
};
|
|
23
|
-
export declare const useAnimatedHeaderFlatListAnimatedStyles: ({ headerTitleFontSize, navigationTitleFontSize, }: AnimatedHeaderFlatListAnimatedStylesProps) => AnimatedHeaderFlatListAnimatedStyles;
|
|
25
|
+
export declare const useAnimatedHeaderFlatListAnimatedStyles: ({ headerTitleFontSize, navigationTitleFontSize, navigationTitleTranslateX, navigationTitleTranslateY, }: AnimatedHeaderFlatListAnimatedStylesProps) => AnimatedHeaderFlatListAnimatedStyles;
|
|
24
26
|
export {};
|
|
25
27
|
//# sourceMappingURL=useAnimatedHeaderFlatListAnimatedStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,eAAe,CAAC;IACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,qBAAqB,EAAE,eAAe,CAAC;IACvC,wBAAwB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,wBAAwB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnD,yBAAyB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,6BAA6B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAAI,yGAKrD,yCAAyC,KAAG,oCAqK9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,uBAgBnE,CAAC"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
3
3
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
4
|
-
import { type NavigationProp } from '@react-navigation/native';
|
|
5
4
|
interface Props {
|
|
6
|
-
navigation:
|
|
5
|
+
navigation: any;
|
|
7
6
|
title: string;
|
|
8
7
|
navigationBarColor?: ColorValue;
|
|
9
8
|
headerTitleStyle?: StyleProp<TextStyle>;
|
|
10
9
|
navigationTitleStyle?: StyleProp<TextStyle>;
|
|
11
|
-
HeaderBackground: React.ComponentType
|
|
12
|
-
HeaderContent?: React.ComponentType
|
|
13
|
-
StickyComponent?: React.ComponentType
|
|
10
|
+
HeaderBackground: React.ComponentType;
|
|
11
|
+
HeaderContent?: React.ComponentType;
|
|
12
|
+
StickyComponent?: React.ComponentType;
|
|
14
13
|
parallax?: boolean;
|
|
14
|
+
navigationTitleTranslateX?: number;
|
|
15
|
+
navigationTitleTranslateY?: number;
|
|
15
16
|
}
|
|
16
17
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
17
|
-
export declare function AnimatedHeaderFlatList<T>({ navigation, title, navigationBarColor, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function AnimatedHeaderFlatList<T>({ navigation, title, navigationBarColor, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, navigationTitleTranslateX, navigationTitleTranslateY, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
19
20
|
//# sourceMappingURL=AnimatedHeaderFlatList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAKvE,UAAU,KAAK;IAEb,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,UAAU,CAAC;IAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,KAAK,2BAA2B,CAAC,CAAC,IAAI,IAAI,CACxC,uBAAuB,CAAC,CAAC,CAAC,EAC1B,MAAM,KAAK,CACZ,GACC,KAAK,CAAC;AAIR,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,QAAe,EACf,yBAA6B,EAC7B,yBAA6B,EAC7B,GAAG,aAAa,EACjB,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CA2MhC"}
|
|
@@ -3,6 +3,8 @@ import { type AnimatedStyle, type ScrollHandlerProcessed } from 'react-native-re
|
|
|
3
3
|
type AnimatedHeaderFlatListAnimatedStylesProps = {
|
|
4
4
|
headerTitleFontSize?: number;
|
|
5
5
|
navigationTitleFontSize?: number;
|
|
6
|
+
navigationTitleTranslateX?: number;
|
|
7
|
+
navigationTitleTranslateY?: number;
|
|
6
8
|
};
|
|
7
9
|
type AnimatedHeaderFlatListAnimatedStyles = {
|
|
8
10
|
scrollHandler: ScrollHandlerProcessed<Record<string, unknown>>;
|
|
@@ -20,6 +22,6 @@ type AnimatedHeaderFlatListAnimatedStyles = {
|
|
|
20
22
|
headerContentAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
21
23
|
headerBackgroundAnimatedStyle: AnimatedStyle<ViewStyle>;
|
|
22
24
|
};
|
|
23
|
-
export declare const useAnimatedHeaderFlatListAnimatedStyles: ({ headerTitleFontSize, navigationTitleFontSize, }: AnimatedHeaderFlatListAnimatedStylesProps) => AnimatedHeaderFlatListAnimatedStyles;
|
|
25
|
+
export declare const useAnimatedHeaderFlatListAnimatedStyles: ({ headerTitleFontSize, navigationTitleFontSize, navigationTitleTranslateX, navigationTitleTranslateY, }: AnimatedHeaderFlatListAnimatedStylesProps) => AnimatedHeaderFlatListAnimatedStyles;
|
|
24
26
|
export {};
|
|
25
27
|
//# sourceMappingURL=useAnimatedHeaderFlatListAnimatedStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,eAAe,CAAC;IACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,qBAAqB,EAAE,eAAe,CAAC;IACvC,wBAAwB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,wBAAwB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnD,yBAAyB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,6BAA6B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAAI,yGAKrD,yCAAyC,KAAG,oCAqK9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,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.4.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",
|
|
@@ -43,7 +43,8 @@
|
|
|
43
43
|
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
44
44
|
"clean": "del-cli lib",
|
|
45
45
|
"prepare": "bob build",
|
|
46
|
-
"release": "release-it"
|
|
46
|
+
"release": "release-it",
|
|
47
|
+
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
|
|
47
48
|
},
|
|
48
49
|
"keywords": [
|
|
49
50
|
"react-native",
|
|
@@ -67,31 +68,31 @@
|
|
|
67
68
|
},
|
|
68
69
|
"devDependencies": {
|
|
69
70
|
"@commitlint/config-conventional": "17.7.0",
|
|
70
|
-
"@evilmartians/lefthook": "^1.
|
|
71
|
-
"@react-native/eslint-config": "0.
|
|
72
|
-
"@react-navigation/elements": "^2.2.
|
|
73
|
-
"@react-navigation/native": "^7.0.
|
|
74
|
-
"@react-navigation/native-stack": "^7.2.
|
|
71
|
+
"@evilmartians/lefthook": "^1.11.3",
|
|
72
|
+
"@react-native/eslint-config": "0.78.0",
|
|
73
|
+
"@react-navigation/elements": "^2.2.6",
|
|
74
|
+
"@react-navigation/native": "^7.0.15",
|
|
75
|
+
"@react-navigation/native-stack": "^7.2.1",
|
|
75
76
|
"@release-it/conventional-changelog": "7.0.0",
|
|
76
77
|
"@types/jest": "^29.5.14",
|
|
77
|
-
"@types/react": "^
|
|
78
|
+
"@types/react": "^19.0.10",
|
|
78
79
|
"commitlint": "^19.6.1",
|
|
79
80
|
"del-cli": "^6.0.0",
|
|
80
81
|
"eslint": "8.57.0",
|
|
81
82
|
"eslint-config-prettier": "^9.1.0",
|
|
82
83
|
"eslint-plugin-prettier": "^5.2.3",
|
|
83
84
|
"jest": "^29.7.0",
|
|
84
|
-
"prettier": "^3.
|
|
85
|
+
"prettier": "^3.5.3",
|
|
85
86
|
"react": "19.0.0",
|
|
86
|
-
"react-native": "0.
|
|
87
|
-
"react-native-builder-bob": "^0.
|
|
88
|
-
"react-native-reanimated": "^3.
|
|
89
|
-
"react-native-safe-area-context": "^5.
|
|
87
|
+
"react-native": "0.78.0",
|
|
88
|
+
"react-native-builder-bob": "^0.37.0",
|
|
89
|
+
"react-native-reanimated": "^3.17.1",
|
|
90
|
+
"react-native-safe-area-context": "^5.3.0",
|
|
90
91
|
"release-it": "16.1.5",
|
|
91
|
-
"typescript": "^5.
|
|
92
|
+
"typescript": "^5.8.2"
|
|
92
93
|
},
|
|
93
94
|
"resolutions": {
|
|
94
|
-
"@types/react": "^
|
|
95
|
+
"@types/react": "^19.0.10"
|
|
95
96
|
},
|
|
96
97
|
"peerDependencies": {
|
|
97
98
|
"@react-navigation/elements": ">=2.0.0",
|
|
@@ -138,26 +139,6 @@
|
|
|
138
139
|
}
|
|
139
140
|
}
|
|
140
141
|
},
|
|
141
|
-
"eslintConfig": {
|
|
142
|
-
"root": true,
|
|
143
|
-
"extends": [
|
|
144
|
-
"@react-native",
|
|
145
|
-
"prettier"
|
|
146
|
-
],
|
|
147
|
-
"rules": {
|
|
148
|
-
"react/react-in-jsx-scope": "off",
|
|
149
|
-
"prettier/prettier": [
|
|
150
|
-
"error",
|
|
151
|
-
{
|
|
152
|
-
"quoteProps": "consistent",
|
|
153
|
-
"singleQuote": true,
|
|
154
|
-
"tabWidth": 2,
|
|
155
|
-
"trailingComma": "es5",
|
|
156
|
-
"useTabs": false
|
|
157
|
-
}
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
142
|
"eslintIgnore": [
|
|
162
143
|
"node_modules/",
|
|
163
144
|
"lib/"
|
|
@@ -11,21 +11,23 @@ import {
|
|
|
11
11
|
} from 'react-native';
|
|
12
12
|
import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
13
13
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
14
|
-
import { type NavigationProp } from '@react-navigation/native';
|
|
15
14
|
import Animated from 'react-native-reanimated';
|
|
16
15
|
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
17
16
|
import { getFontSizeFromStyle } from '../utils/styleUtils';
|
|
18
17
|
|
|
19
18
|
interface Props {
|
|
20
|
-
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
+
navigation: any;
|
|
21
21
|
title: string;
|
|
22
22
|
navigationBarColor?: ColorValue;
|
|
23
23
|
headerTitleStyle?: StyleProp<TextStyle>;
|
|
24
24
|
navigationTitleStyle?: StyleProp<TextStyle>;
|
|
25
|
-
HeaderBackground: React.ComponentType
|
|
26
|
-
HeaderContent?: React.ComponentType
|
|
27
|
-
StickyComponent?: React.ComponentType
|
|
25
|
+
HeaderBackground: React.ComponentType;
|
|
26
|
+
HeaderContent?: React.ComponentType;
|
|
27
|
+
StickyComponent?: React.ComponentType;
|
|
28
28
|
parallax?: boolean;
|
|
29
|
+
navigationTitleTranslateX?: number;
|
|
30
|
+
navigationTitleTranslateY?: number;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
type AnimatedHeaderFlatListProps<T> = Omit<
|
|
@@ -46,6 +48,8 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
46
48
|
HeaderContent,
|
|
47
49
|
StickyComponent,
|
|
48
50
|
parallax = true,
|
|
51
|
+
navigationTitleTranslateX = 0,
|
|
52
|
+
navigationTitleTranslateY = 0,
|
|
49
53
|
...flatListProps
|
|
50
54
|
}: AnimatedHeaderFlatListProps<T>) {
|
|
51
55
|
const {
|
|
@@ -65,6 +69,8 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
65
69
|
} = useAnimatedHeaderFlatListAnimatedStyles({
|
|
66
70
|
headerTitleFontSize: getFontSizeFromStyle(headerTitleStyle),
|
|
67
71
|
navigationTitleFontSize: getFontSizeFromStyle(navigationTitleStyle),
|
|
72
|
+
navigationTitleTranslateX,
|
|
73
|
+
navigationTitleTranslateY,
|
|
68
74
|
});
|
|
69
75
|
|
|
70
76
|
const navigationTitle = useCallback(
|
|
@@ -18,6 +18,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
18
18
|
type AnimatedHeaderFlatListAnimatedStylesProps = {
|
|
19
19
|
headerTitleFontSize?: number;
|
|
20
20
|
navigationTitleFontSize?: number;
|
|
21
|
+
navigationTitleTranslateX?: number;
|
|
22
|
+
navigationTitleTranslateY?: number;
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
type AnimatedHeaderFlatListAnimatedStyles = {
|
|
@@ -40,6 +42,8 @@ type AnimatedHeaderFlatListAnimatedStyles = {
|
|
|
40
42
|
export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
41
43
|
headerTitleFontSize,
|
|
42
44
|
navigationTitleFontSize,
|
|
45
|
+
navigationTitleTranslateX = 0,
|
|
46
|
+
navigationTitleTranslateY = 0,
|
|
43
47
|
}: AnimatedHeaderFlatListAnimatedStylesProps): AnimatedHeaderFlatListAnimatedStyles => {
|
|
44
48
|
const { width: windowWidth } = useWindowDimensions();
|
|
45
49
|
const scrollY = useSharedValue(0);
|
|
@@ -88,6 +92,10 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
88
92
|
const navigationTitleAnimatedStyle = useAnimatedStyle(() => {
|
|
89
93
|
return {
|
|
90
94
|
opacity: navigationTitleOpacity.value,
|
|
95
|
+
transform: [
|
|
96
|
+
{ translateX: navigationTitleTranslateX },
|
|
97
|
+
{ translateY: navigationTitleTranslateY },
|
|
98
|
+
],
|
|
91
99
|
};
|
|
92
100
|
});
|
|
93
101
|
const headerTitleAnimatedStyle = useAnimatedStyle(() => {
|
|
@@ -102,11 +110,20 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
102
110
|
0,
|
|
103
111
|
windowWidth / 2 -
|
|
104
112
|
headerTitleLayout.x -
|
|
105
|
-
headerTitleLayout.width / 2
|
|
113
|
+
headerTitleLayout.width / 2 +
|
|
114
|
+
navigationTitleTranslateX,
|
|
106
115
|
],
|
|
107
116
|
'clamp'
|
|
108
117
|
),
|
|
109
118
|
},
|
|
119
|
+
{
|
|
120
|
+
translateY: interpolate(
|
|
121
|
+
scrollY.value,
|
|
122
|
+
[0, distanceBetweenTitleAndNavigationBar],
|
|
123
|
+
[0, navigationTitleTranslateY],
|
|
124
|
+
'clamp'
|
|
125
|
+
),
|
|
126
|
+
},
|
|
110
127
|
{
|
|
111
128
|
scale: interpolate(
|
|
112
129
|
scrollY.value,
|