react-native-animated-header-flat-list 1.5.0 → 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 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -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 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-animated-header-flat-list",
|
|
3
|
-
"version": "1.5.
|
|
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",
|