react-native-animated-header-flat-list 1.4.0 → 1.4.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 +26 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,26 +87,6 @@ export default function HomeScreen() {
|
|
|
87
87
|
description: 'Lorem ipsum dolor sit amet',
|
|
88
88
|
}));
|
|
89
89
|
const title = 'Animated Title';
|
|
90
|
-
const backgroundImageUrl =
|
|
91
|
-
'https://images.unsplash.com/photo-1579546929518-9e396f3cc809';
|
|
92
|
-
const avatarUrl = 'https://api.dicebear.com/7.x/avataaars/png?seed=John';
|
|
93
|
-
|
|
94
|
-
const HeaderBackground = () => (
|
|
95
|
-
<ImageBackground
|
|
96
|
-
source={{ uri: backgroundImageUrl }}
|
|
97
|
-
style={styles.headerBackground}
|
|
98
|
-
/>
|
|
99
|
-
);
|
|
100
|
-
|
|
101
|
-
const HeaderContent = () => (
|
|
102
|
-
<View style={styles.headerContent}>
|
|
103
|
-
<Image source={{ uri: avatarUrl }} style={styles.avatar} />
|
|
104
|
-
</View>
|
|
105
|
-
);
|
|
106
|
-
|
|
107
|
-
const StickyComponent = () => (
|
|
108
|
-
<Text style={styles.stickyComponent}>Sticky Item</Text>
|
|
109
|
-
);
|
|
110
90
|
|
|
111
91
|
const renderItem = ({
|
|
112
92
|
item,
|
|
@@ -134,6 +114,32 @@ export default function HomeScreen() {
|
|
|
134
114
|
);
|
|
135
115
|
}
|
|
136
116
|
|
|
117
|
+
const HeaderBackground = () => {
|
|
118
|
+
const backgroundImageUrl =
|
|
119
|
+
'https://images.unsplash.com/photo-1579546929518-9e396f3cc809';
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<ImageBackground
|
|
123
|
+
source={{ uri: backgroundImageUrl }}
|
|
124
|
+
style={styles.headerBackground}
|
|
125
|
+
/>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
const HeaderContent = () => {
|
|
130
|
+
const avatarUrl = 'https://api.dicebear.com/7.x/avataaars/png?seed=John';
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<View style={styles.headerContent}>
|
|
134
|
+
<Image source={{ uri: avatarUrl }} style={styles.avatar} />
|
|
135
|
+
</View>
|
|
136
|
+
);
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const StickyComponent = () => (
|
|
140
|
+
<Text style={styles.stickyComponent}>Sticky Item</Text>
|
|
141
|
+
);
|
|
142
|
+
|
|
137
143
|
const styles = StyleSheet.create({
|
|
138
144
|
headerBackground: {
|
|
139
145
|
backgroundColor: 'white',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-animated-header-flat-list",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.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/commonjs/index.js",
|