react-native-animated-header-flat-list 1.4.3 → 1.5.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 +13 -31
- package/lib/module/components/AnimatedHeaderFlatList.js +2 -1
- package/lib/module/components/AnimatedHeaderFlatList.js.map +1 -1
- package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts +1 -2
- package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts.map +1 -1
- package/package.json +19 -19
- package/src/components/AnimatedHeaderFlatList.tsx +2 -3
package/README.md
CHANGED
|
@@ -54,33 +54,14 @@ Make sure to follow the installation instructions for each dependency:
|
|
|
54
54
|
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)
|
|
55
55
|
- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)
|
|
56
56
|
|
|
57
|
-
### Additional Setup
|
|
58
|
-
|
|
59
|
-
For React Native Reanimated, Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
module.exports = {
|
|
63
|
-
presets: [
|
|
64
|
-
... // don't add it here :)
|
|
65
|
-
],
|
|
66
|
-
plugins: [
|
|
67
|
-
...
|
|
68
|
-
'react-native-reanimated/plugin',
|
|
69
|
-
],
|
|
70
|
-
};
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
CAUTION: `react-native-reanimated/plugin` has to be listed last.
|
|
74
|
-
|
|
75
57
|
## Usage
|
|
76
58
|
|
|
77
59
|
```tsx
|
|
78
|
-
import {
|
|
60
|
+
import { useCallback } from 'react';
|
|
79
61
|
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
|
|
80
62
|
import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
|
|
81
63
|
|
|
82
64
|
export default function HomeScreen() {
|
|
83
|
-
const navigation = useNavigation();
|
|
84
65
|
const data = Array.from({ length: 50 }, (_, index) => ({
|
|
85
66
|
id: `item-${index}`,
|
|
86
67
|
title: `Item ${index + 1}`,
|
|
@@ -88,20 +69,22 @@ export default function HomeScreen() {
|
|
|
88
69
|
}));
|
|
89
70
|
const title = 'Animated Title';
|
|
90
71
|
|
|
91
|
-
const renderItem = (
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
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
|
+
[]
|
|
100
84
|
);
|
|
101
85
|
|
|
102
86
|
return (
|
|
103
87
|
<AnimatedHeaderFlatList
|
|
104
|
-
navigation={navigation}
|
|
105
88
|
title={title}
|
|
106
89
|
headerTitleStyle={styles.headerTitle}
|
|
107
90
|
navigationTitleStyle={styles.navigationTitle}
|
|
@@ -202,7 +185,6 @@ const styles = StyleSheet.create({
|
|
|
202
185
|
|
|
203
186
|
| Prop | Type | Required | Description |
|
|
204
187
|
| --------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
|
|
205
|
-
| `navigation` | any | Yes | React Navigation navigation prop |
|
|
206
188
|
| `title` | string | Yes | The title text that will animate between header and navigation bar |
|
|
207
189
|
| `headerTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
|
|
208
190
|
| `navigationTitleStyle` | StyleProp<TextStyle> | No | Style object for the title in the navigation bar. Supports all Text style props except position-related properties |
|
|
@@ -6,10 +6,10 @@ import { useLayoutEffect, useCallback, useMemo } from 'react';
|
|
|
6
6
|
import Animated from 'react-native-reanimated';
|
|
7
7
|
import { useAnimatedHeaderFlatListAnimatedStyles } from "../hooks/useAnimatedHeaderFlatListAnimatedStyles.js";
|
|
8
8
|
import { getFontSizeFromStyle } from "../utils/styleUtils.js";
|
|
9
|
+
import { useNavigation } from '@react-navigation/native';
|
|
9
10
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
11
|
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
11
12
|
export function AnimatedHeaderFlatList({
|
|
12
|
-
navigation,
|
|
13
13
|
title,
|
|
14
14
|
navigationBarColor,
|
|
15
15
|
headerTitleStyle,
|
|
@@ -22,6 +22,7 @@ export function AnimatedHeaderFlatList({
|
|
|
22
22
|
navigationTitleTranslateY = 0,
|
|
23
23
|
...flatListProps
|
|
24
24
|
}) {
|
|
25
|
+
const navigation = useNavigation();
|
|
25
26
|
const {
|
|
26
27
|
scrollHandler,
|
|
27
28
|
navigationBarHeight,
|
|
@@ -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","
|
|
1
|
+
{"version":3,"names":["React","StatusBar","StyleSheet","View","useLayoutEffect","useCallback","useMemo","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","useNavigation","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatList","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","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"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,7 +2,6 @@ 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
4
|
interface Props {
|
|
5
|
-
navigation: any;
|
|
6
5
|
title: string;
|
|
7
6
|
navigationBarColor?: ColorValue;
|
|
8
7
|
headerTitleStyle?: StyleProp<TextStyle>;
|
|
@@ -15,6 +14,6 @@ interface Props {
|
|
|
15
14
|
navigationTitleTranslateY?: number;
|
|
16
15
|
}
|
|
17
16
|
type AnimatedHeaderFlatListProps<T> = Omit<FlatListPropsWithLayout<T>, keyof Props> & Props;
|
|
18
|
-
export declare function AnimatedHeaderFlatList<T>({
|
|
17
|
+
export declare function AnimatedHeaderFlatList<T>({ title, navigationBarColor, headerTitleStyle, navigationTitleStyle, HeaderBackground, HeaderContent, StickyComponent, parallax, navigationTitleTranslateX, navigationTitleTranslateY, ...flatListProps }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
19
18
|
export {};
|
|
20
19
|
//# 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;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;AAIR,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,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,2CAiNhC"}
|
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.5.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",
|
|
@@ -61,30 +61,30 @@
|
|
|
61
61
|
"registry": "https://registry.npmjs.org/"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@commitlint/config-conventional": "^19.
|
|
65
|
-
"@eslint/compat": "^1.2.
|
|
66
|
-
"@eslint/eslintrc": "^3.3.
|
|
67
|
-
"@eslint/js": "^9.
|
|
64
|
+
"@commitlint/config-conventional": "^19.8.1",
|
|
65
|
+
"@eslint/compat": "^1.2.9",
|
|
66
|
+
"@eslint/eslintrc": "^3.3.1",
|
|
67
|
+
"@eslint/js": "^9.28.0",
|
|
68
68
|
"@evilmartians/lefthook": "^1.5.0",
|
|
69
|
-
"@react-native/eslint-config": "^0.
|
|
70
|
-
"@react-navigation/elements": "^2.3
|
|
71
|
-
"@react-navigation/native": "^7.1.
|
|
72
|
-
"@react-navigation/native-stack": "^7.3.
|
|
69
|
+
"@react-native/eslint-config": "^0.79.2",
|
|
70
|
+
"@react-navigation/elements": "^2.4.3",
|
|
71
|
+
"@react-navigation/native": "^7.1.10",
|
|
72
|
+
"@react-navigation/native-stack": "^7.3.14",
|
|
73
73
|
"@release-it/conventional-changelog": "^9.0.2",
|
|
74
|
-
"@types/jest": "^29.5.
|
|
75
|
-
"@types/react": "^19.
|
|
76
|
-
"commitlint": "^19.
|
|
74
|
+
"@types/jest": "^29.5.14",
|
|
75
|
+
"@types/react": "^19.1.6",
|
|
76
|
+
"commitlint": "^19.8.1",
|
|
77
77
|
"del-cli": "^5.1.0",
|
|
78
|
-
"eslint": "^9.
|
|
79
|
-
"eslint-config-prettier": "^10.1.
|
|
80
|
-
"eslint-plugin-prettier": "^5.
|
|
78
|
+
"eslint": "^9.28.0",
|
|
79
|
+
"eslint-config-prettier": "^10.1.5",
|
|
80
|
+
"eslint-plugin-prettier": "^5.4.1",
|
|
81
81
|
"jest": "^29.7.0",
|
|
82
82
|
"prettier": "^3.0.3",
|
|
83
|
-
"react": "
|
|
84
|
-
"react-native": "0.
|
|
83
|
+
"react": "19.1.0",
|
|
84
|
+
"react-native": "0.79.2",
|
|
85
85
|
"react-native-builder-bob": "0.37.0",
|
|
86
|
-
"react-native-reanimated": "^3.
|
|
87
|
-
"react-native-safe-area-context": "^5.
|
|
86
|
+
"react-native-reanimated": "^3.18.0",
|
|
87
|
+
"react-native-safe-area-context": "^5.4.1",
|
|
88
88
|
"release-it": "^17.10.0",
|
|
89
89
|
"typescript": "^5.2.2"
|
|
90
90
|
},
|
|
@@ -14,10 +14,9 @@ import type { FlatListPropsWithLayout } from 'react-native-reanimated';
|
|
|
14
14
|
import Animated from 'react-native-reanimated';
|
|
15
15
|
import { useAnimatedHeaderFlatListAnimatedStyles } from '../hooks/useAnimatedHeaderFlatListAnimatedStyles';
|
|
16
16
|
import { getFontSizeFromStyle } from '../utils/styleUtils';
|
|
17
|
+
import { useNavigation } from '@react-navigation/native';
|
|
17
18
|
|
|
18
19
|
interface Props {
|
|
19
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
-
navigation: any;
|
|
21
20
|
title: string;
|
|
22
21
|
navigationBarColor?: ColorValue;
|
|
23
22
|
headerTitleStyle?: StyleProp<TextStyle>;
|
|
@@ -39,7 +38,6 @@ type AnimatedHeaderFlatListProps<T> = Omit<
|
|
|
39
38
|
const HEADER_ITEM = 'REACT_NATIVE_ANIMATED_HEADER_FLAT_LIST_HEADER';
|
|
40
39
|
|
|
41
40
|
export function AnimatedHeaderFlatList<T>({
|
|
42
|
-
navigation,
|
|
43
41
|
title,
|
|
44
42
|
navigationBarColor,
|
|
45
43
|
headerTitleStyle,
|
|
@@ -52,6 +50,7 @@ export function AnimatedHeaderFlatList<T>({
|
|
|
52
50
|
navigationTitleTranslateY = 0,
|
|
53
51
|
...flatListProps
|
|
54
52
|
}: AnimatedHeaderFlatListProps<T>) {
|
|
53
|
+
const navigation = useNavigation();
|
|
55
54
|
const {
|
|
56
55
|
scrollHandler,
|
|
57
56
|
navigationBarHeight,
|