react-native-animated-header-flat-list 1.5.0 → 1.6.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 +14 -14
- package/lib/module/components/AnimatedHeaderFlatList.js +5 -3
- package/lib/module/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js +1 -1
- package/lib/module/hooks/useAnimatedHeaderFlatListAnimatedStyles.js.map +1 -1
- package/lib/module/utils/styleUtils.js +1 -1
- package/lib/module/utils/styleUtils.js.map +1 -1
- package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts +5 -3
- package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.d.ts.map +1 -1
- package/package.json +14 -13
- package/src/components/AnimatedHeaderFlatList.tsx +27 -14
- package/src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts +5 -3
- package/src/utils/styleUtils.ts +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.
|
|
8
8
|
|
|
9
|
-
English | [简体中文](./
|
|
9
|
+
English | [简体中文](./README-zh.md)
|
|
10
10
|
|
|
11
11
|
## Preview
|
|
12
12
|
|
|
@@ -57,12 +57,11 @@ Make sure to follow the installation instructions for each dependency:
|
|
|
57
57
|
## Usage
|
|
58
58
|
|
|
59
59
|
```tsx
|
|
60
|
-
import {
|
|
60
|
+
import { useCallback } from 'react';
|
|
61
61
|
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
|
|
62
62
|
import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
|
|
63
63
|
|
|
64
64
|
export default function HomeScreen() {
|
|
65
|
-
const navigation = useNavigation();
|
|
66
65
|
const data = Array.from({ length: 50 }, (_, index) => ({
|
|
67
66
|
id: `item-${index}`,
|
|
68
67
|
title: `Item ${index + 1}`,
|
|
@@ -70,20 +69,22 @@ export default function HomeScreen() {
|
|
|
70
69
|
}));
|
|
71
70
|
const title = 'Animated Title';
|
|
72
71
|
|
|
73
|
-
const renderItem = (
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
const renderItem = useCallback(
|
|
73
|
+
({
|
|
74
|
+
item,
|
|
75
|
+
}: {
|
|
76
|
+
item: { id: string; title: string; description: string };
|
|
77
|
+
}) => (
|
|
78
|
+
<View style={styles.listItem}>
|
|
79
|
+
<Text style={styles.itemTitle}>{item.title}</Text>
|
|
80
|
+
<Text style={styles.itemDescription}>{item.description}</Text>
|
|
81
|
+
</View>
|
|
82
|
+
),
|
|
83
|
+
[]
|
|
82
84
|
);
|
|
83
85
|
|
|
84
86
|
return (
|
|
85
87
|
<AnimatedHeaderFlatList
|
|
86
|
-
navigation={navigation}
|
|
87
88
|
title={title}
|
|
88
89
|
headerTitleStyle={styles.headerTitle}
|
|
89
90
|
navigationTitleStyle={styles.navigationTitle}
|
|
@@ -184,7 +185,6 @@ const styles = StyleSheet.create({
|
|
|
184
185
|
|
|
185
186
|
| Prop | Type | Required | Description |
|
|
186
187
|
| --------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
|
|
187
|
-
| `navigation` | any | Yes | React Navigation navigation prop |
|
|
188
188
|
| `title` | string | Yes | The title text that will animate between header and navigation bar |
|
|
189
189
|
| `headerTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
|
|
190
190
|
| `navigationTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the navigation bar. Supports all Text style props except position-related properties |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
4
|
import { StatusBar, StyleSheet, View } from 'react-native';
|
|
5
5
|
import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
6
6
|
import Animated from 'react-native-reanimated';
|
|
@@ -9,7 +9,7 @@ import { getFontSizeFromStyle } from "../utils/styleUtils.js";
|
|
|
9
9
|
import { useNavigation } from '@react-navigation/native';
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
11
|
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
12
|
-
|
|
12
|
+
function AnimatedHeaderFlatListInner({
|
|
13
13
|
title,
|
|
14
14
|
navigationBarColor,
|
|
15
15
|
headerTitleStyle,
|
|
@@ -21,7 +21,7 @@ export function AnimatedHeaderFlatList({
|
|
|
21
21
|
navigationTitleTranslateX = 0,
|
|
22
22
|
navigationTitleTranslateY = 0,
|
|
23
23
|
...flatListProps
|
|
24
|
-
}) {
|
|
24
|
+
}, ref) {
|
|
25
25
|
const navigation = useNavigation();
|
|
26
26
|
const {
|
|
27
27
|
scrollHandler,
|
|
@@ -129,6 +129,7 @@ export function AnimatedHeaderFlatList({
|
|
|
129
129
|
translucent: true
|
|
130
130
|
}), /*#__PURE__*/_jsx(Animated.FlatList, {
|
|
131
131
|
...flatListProps,
|
|
132
|
+
ref: ref,
|
|
132
133
|
stickyHeaderIndices: [1],
|
|
133
134
|
ListHeaderComponent: /*#__PURE__*/_jsx(Animated.View, {
|
|
134
135
|
style: [styles.mainHeaderContainer, {
|
|
@@ -192,4 +193,5 @@ const styles = StyleSheet.create({
|
|
|
192
193
|
bottom: 0
|
|
193
194
|
}
|
|
194
195
|
});
|
|
196
|
+
export const AnimatedHeaderFlatList = /*#__PURE__*/forwardRef(AnimatedHeaderFlatListInner);
|
|
195
197
|
//# sourceMappingURL=AnimatedHeaderFlatList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["forwardRef","StatusBar","StyleSheet","View","useLayoutEffect","useCallback","useMemo","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","useNavigation","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatListInner","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","ref","navigation","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","stickyComponentAnimatedStyle","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","width","AnimatedHeaderFlatList"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -35,7 +35,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
35
35
|
width: 0,
|
|
36
36
|
height: 0
|
|
37
37
|
});
|
|
38
|
-
const distanceBetweenTitleAndNavigationBar = (navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 + headerTitleLayout.y - navigationBarHeight;
|
|
38
|
+
const distanceBetweenTitleAndNavigationBar = Math.max(0, (navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 + headerTitleLayout.y - navigationBarHeight);
|
|
39
39
|
const navigationTitleOpacity = useSharedValue(0);
|
|
40
40
|
const stickyHeaderOpacity = useSharedValue(0);
|
|
41
41
|
const stickyComponentOpacity = useSharedValue(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useHeaderHeight","useCallback","useState","useWindowDimensions","interpolate","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","navigationTitleTranslateX","navigationTitleTranslateY","width","windowWidth","scrollY","navigationBarHeight","safeAreaInsets","headerLayout","setHeaderLayout","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","updateStickyComponentLayout","distanceBetweenTitleAndNavigationBar","top","navigationTitleOpacity","stickyHeaderOpacity","stickyComponentOpacity","setStickyComponentLayout","layout","value","navigationBarAnimatedStyle","opacity","marginBottom","
|
|
1
|
+
{"version":3,"names":["useHeaderHeight","useCallback","useState","useWindowDimensions","interpolate","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","useAnimatedHeaderFlatListAnimatedStyles","headerTitleFontSize","navigationTitleFontSize","navigationTitleTranslateX","navigationTitleTranslateY","width","windowWidth","scrollY","navigationBarHeight","safeAreaInsets","headerLayout","setHeaderLayout","x","y","height","headerTitleLayout","setHeaderTitleLayout","stickyComponentLayout","updateStickyComponentLayout","distanceBetweenTitleAndNavigationBar","Math","max","top","navigationTitleOpacity","stickyHeaderOpacity","stickyComponentOpacity","setStickyComponentLayout","layout","value","navigationBarAnimatedStyle","opacity","marginBottom","navigationTitleAnimatedStyle","transform","translateX","translateY","headerTitleAnimatedStyle","scale","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","stickyComponentAnimatedStyle","scrollHandler","event","contentOffset"],"sourceRoot":"../../../src","sources":["hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
export const getFontSizeFromStyle = textStyle => {
|
|
4
4
|
if (!textStyle) return undefined;
|
|
5
5
|
if (Array.isArray(textStyle)) {
|
|
6
|
-
for (const styleItem of textStyle.
|
|
6
|
+
for (const styleItem of textStyle.toReversed()) {
|
|
7
7
|
if (styleItem && typeof styleItem === 'object' && 'fontSize' in styleItem) {
|
|
8
8
|
return styleItem.fontSize;
|
|
9
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getFontSizeFromStyle","textStyle","undefined","Array","isArray","styleItem","
|
|
1
|
+
{"version":3,"names":["getFontSizeFromStyle","textStyle","undefined","Array","isArray","styleItem","toReversed","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,UAAU,CAAC,CAAC,EAAE;MAC9C,IACED,SAAS,IACT,OAAOA,SAAS,KAAK,QAAQ,IAC7B,UAAU,IAAIA,SAAS,EACvB;QACA,OAAOA,SAAS,CAACE,QAAQ;MAC3B;IACF;EACF,CAAC,MAAM,IAAI,OAAON,SAAS,KAAK,QAAQ,IAAI,UAAU,IAAIA,SAAS,EAAE;IACnE,OAAOA,SAAS,CAACM,QAAQ;EAC3B;EACA,OAAOL,SAAS;AAClB,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { type ColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
1
|
+
import { type ReactElement, type RefObject } from 'react';
|
|
2
|
+
import { FlatList, type ColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
3
3
|
import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
4
4
|
interface Props {
|
|
5
5
|
title: string;
|
|
@@ -14,6 +14,8 @@ interface Props {
|
|
|
14
14
|
navigationTitleTranslateY?: number;
|
|
15
15
|
}
|
|
16
16
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
17
|
-
export declare
|
|
17
|
+
export declare const AnimatedHeaderFlatList: <T>(props: AnimatedHeaderFlatListProps<T> & {
|
|
18
|
+
ref?: RefObject<FlatList<T> | null>;
|
|
19
|
+
}) => ReactElement;
|
|
18
20
|
export {};
|
|
19
21
|
//# 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,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,QAAQ,EAIR,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAMvE,UAAU,KAAK;IACb,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;AAuRR,eAAO,MAAM,sBAAsB,EAE9B,CAAC,CAAC,EACL,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CACrC,KACE,YAAY,CAAC"}
|
|
@@ -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;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,eAAe,CAAC;IACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,qBAAqB,EAAE,eAAe,CAAC;IACvC,wBAAwB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,wBAAwB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnD,yBAAyB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,6BAA6B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAAI,yGAKrD,yCAAyC,KAAG,
|
|
1
|
+
{"version":3,"file":"useAnimatedHeaderFlatListAnimatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,yCAAyC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,KAAK,oCAAoC,GAAG;IAC1C,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,iBAAiB,EAAE,eAAe,CAAC;IACnC,oBAAoB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,qBAAqB,EAAE,eAAe,CAAC;IACvC,wBAAwB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,4BAA4B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,wBAAwB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnD,yBAAyB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpD,0BAA0B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrD,6BAA6B,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,uCAAuC,GAAI,yGAKrD,yCAAyC,KAAG,oCAqL9C,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.6.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/module/index.js",
|
|
@@ -62,31 +62,32 @@
|
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@commitlint/config-conventional": "^19.8.1",
|
|
65
|
-
"@eslint/compat": "^1.
|
|
65
|
+
"@eslint/compat": "^1.3.1",
|
|
66
66
|
"@eslint/eslintrc": "^3.3.1",
|
|
67
|
-
"@eslint/js": "^9.
|
|
67
|
+
"@eslint/js": "^9.32.0",
|
|
68
68
|
"@evilmartians/lefthook": "^1.5.0",
|
|
69
69
|
"@react-native/eslint-config": "^0.79.2",
|
|
70
70
|
"@react-navigation/elements": "^2.4.3",
|
|
71
71
|
"@react-navigation/native": "^7.1.10",
|
|
72
72
|
"@react-navigation/native-stack": "^7.3.14",
|
|
73
73
|
"@release-it/conventional-changelog": "^9.0.2",
|
|
74
|
-
"@types/jest": "^
|
|
75
|
-
"@types/react": "^19.1.
|
|
74
|
+
"@types/jest": "^30.0.0",
|
|
75
|
+
"@types/react": "^19.1.9",
|
|
76
76
|
"commitlint": "^19.8.1",
|
|
77
77
|
"del-cli": "^5.1.0",
|
|
78
78
|
"eslint": "^9.28.0",
|
|
79
|
-
"eslint-config-prettier": "^10.1.
|
|
80
|
-
"eslint-plugin-
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"react
|
|
79
|
+
"eslint-config-prettier": "^10.1.8",
|
|
80
|
+
"eslint-plugin-ft-flow": "^3.0.11",
|
|
81
|
+
"eslint-plugin-prettier": "^5.5.4",
|
|
82
|
+
"jest": "^30.0.5",
|
|
83
|
+
"prettier": "^3.6.2",
|
|
84
|
+
"react": "18.3.1",
|
|
85
|
+
"react-native": "0.76.9",
|
|
85
86
|
"react-native-builder-bob": "0.37.0",
|
|
86
87
|
"react-native-reanimated": "^3.18.0",
|
|
87
|
-
"react-native-safe-area-context": "^5.
|
|
88
|
+
"react-native-safe-area-context": "^5.6.2",
|
|
88
89
|
"release-it": "^17.10.0",
|
|
89
|
-
"typescript": "^5.
|
|
90
|
+
"typescript": "^5.9.3"
|
|
90
91
|
},
|
|
91
92
|
"peerDependencies": {
|
|
92
93
|
"@react-navigation/elements": ">=2.0.0",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactElement, type RefObject, forwardRef } from 'react';
|
|
2
2
|
import {
|
|
3
|
+
FlatList,
|
|
3
4
|
StatusBar,
|
|
4
5
|
StyleSheet,
|
|
5
6
|
View,
|
|
@@ -37,19 +38,22 @@ type AnimatedHeaderFlatListProps<T> = Omit<
|
|
|
37
38
|
|
|
38
39
|
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
41
|
+
function AnimatedHeaderFlatListInner<T>(
|
|
42
|
+
{
|
|
43
|
+
title,
|
|
44
|
+
navigationBarColor,
|
|
45
|
+
headerTitleStyle,
|
|
46
|
+
navigationTitleStyle,
|
|
47
|
+
HeaderBackground,
|
|
48
|
+
HeaderContent,
|
|
49
|
+
StickyComponent,
|
|
50
|
+
parallax = true,
|
|
51
|
+
navigationTitleTranslateX = 0,
|
|
52
|
+
navigationTitleTranslateY = 0,
|
|
53
|
+
...flatListProps
|
|
54
|
+
}: AnimatedHeaderFlatListProps<T>,
|
|
55
|
+
ref: React.ForwardedRef<FlatList<T>>
|
|
56
|
+
) {
|
|
53
57
|
const navigation = useNavigation();
|
|
54
58
|
const {
|
|
55
59
|
scrollHandler,
|
|
@@ -238,6 +242,7 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
238
242
|
<StatusBar backgroundColor="transparent" translucent />
|
|
239
243
|
<Animated.FlatList
|
|
240
244
|
{...flatListProps}
|
|
245
|
+
ref={ref}
|
|
241
246
|
stickyHeaderIndices={[1]}
|
|
242
247
|
ListHeaderComponent={
|
|
243
248
|
<Animated.View
|
|
@@ -307,3 +312,11 @@ const styles = StyleSheet.create({
|
|
|
307
312
|
bottom: 0,
|
|
308
313
|
},
|
|
309
314
|
});
|
|
315
|
+
|
|
316
|
+
export const AnimatedHeaderFlatList = forwardRef(
|
|
317
|
+
AnimatedHeaderFlatListInner
|
|
318
|
+
) as <T>(
|
|
319
|
+
props: AnimatedHeaderFlatListProps<T> & {
|
|
320
|
+
ref?: RefObject<FlatList<T> | null>;
|
|
321
|
+
}
|
|
322
|
+
) => ReactElement;
|
|
@@ -69,10 +69,12 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
|
|
|
69
69
|
width: 0,
|
|
70
70
|
height: 0,
|
|
71
71
|
});
|
|
72
|
-
const distanceBetweenTitleAndNavigationBar =
|
|
72
|
+
const distanceBetweenTitleAndNavigationBar = Math.max(
|
|
73
|
+
0,
|
|
73
74
|
(navigationBarHeight - safeAreaInsets.top + headerTitleLayout.height) / 2 +
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
headerTitleLayout.y -
|
|
76
|
+
navigationBarHeight
|
|
77
|
+
);
|
|
76
78
|
const navigationTitleOpacity = useSharedValue(0);
|
|
77
79
|
const stickyHeaderOpacity = useSharedValue(0);
|
|
78
80
|
const stickyComponentOpacity = useSharedValue(0);
|
package/src/utils/styleUtils.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { type StyleProp, type TextStyle } from 'react-native';
|
|
|
3
3
|
export const getFontSizeFromStyle = (textStyle: StyleProp<TextStyle>) => {
|
|
4
4
|
if (!textStyle) return undefined;
|
|
5
5
|
if (Array.isArray(textStyle)) {
|
|
6
|
-
for (const styleItem of textStyle.
|
|
6
|
+
for (const styleItem of textStyle.toReversed()) {
|
|
7
7
|
if (
|
|
8
8
|
styleItem &&
|
|
9
9
|
typeof styleItem === 'object' &&
|