Skip to content

Commit c02a9c4

Browse files
lukailunlukailun
authored
Merge pull request #5 from lukailun/develop
1.4.2
2 parents 0bd4589 + 9a4f49a commit c02a9c4

File tree

6 files changed

+1351
-1547
lines changed

6 files changed

+1351
-1547
lines changed

‎CHANGELOG.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11

22

3+
## [1.4.2](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.4.1...v1.4.2) (2025-04-08)
4+
5+
6+
### Bug Fixes
7+
8+
* optimize sticky component display after layout completion ([4a4d7e8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4a4d7e8118dab3d23ff0983c36546511c9f912ce))
9+
10+
## [1.4.1](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.4.0...v1.4.1) (2025-03-19)
11+
12+
13+
### Bug Fixes
14+
15+
* add eslint disable comment to metro config ([64f5123](https://github.com/lukailun/react-native-animated-header-flat-list/commit/64f512362359043fab1fb03120664e45b16d763d))
16+
* convert babel config to commonjs ([4df90d8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4df90d86d4634b18433384699ff28ee25adba413))
17+
318
# [1.4.0](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.3.1...v1.4.0) (2025-03-10)
419

520

‎example/package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
},
1111
"dependencies": {
1212
"@expo/metro-runtime": "^4.0.1",
13-
"@react-navigation/elements": "^2.2.6",
14-
"@react-navigation/native": "^7.0.15",
15-
"@react-navigation/native-stack": "^7.2.1",
13+
"@react-navigation/elements": "^2.3.7",
14+
"@react-navigation/native": "^7.1.5",
15+
"@react-navigation/native-stack": "^7.3.9",
1616
"expo": "latest",
1717
"expo-status-bar": "^2.0.1",
18-
"react": "18.3.1",
19-
"react-dom": "18.3.1",
20-
"react-native": "0.76.7",
21-
"react-native-reanimated": "3.16.1",
22-
"react-native-safe-area-context": "4.12.0",
23-
"react-native-screens": "4.4.0",
24-
"react-native-web": "^0.19.13"
18+
"react": "19.1.0",
19+
"react-dom": "19.1.0",
20+
"react-native": "0.78.2",
21+
"react-native-reanimated": "^3.17.3",
22+
"react-native-safe-area-context": "^5.3.0",
23+
"react-native-screens": "^4.10.0",
24+
"react-native-web": "^0.20.0"
2525
},
2626
"devDependencies": {
27-
"@babel/core": "^7.26.9",
27+
"@babel/core": "^7.26.10",
2828
"prettier": "^3.5.3",
29-
"react-native-builder-bob": "^0.37.0"
29+
"react-native-builder-bob": "^0.40.3"
3030
},
3131
"private": true
3232
}

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-animated-header-flat-list",
3-
"version": "1.4.0",
3+
"version": "1.4.2",
44
"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.",
55
"source": "./src/index.tsx",
66
"main": "./lib/commonjs/index.js",
@@ -68,31 +68,31 @@
6868
},
6969
"devDependencies": {
7070
"@commitlint/config-conventional": "17.7.0",
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",
71+
"@evilmartians/lefthook": "^1.11.7",
72+
"@react-native/eslint-config": "0.78.2",
73+
"@react-navigation/elements": "^2.3.7",
74+
"@react-navigation/native": "^7.1.5",
75+
"@react-navigation/native-stack": "^7.3.9",
7676
"@release-it/conventional-changelog": "7.0.0",
7777
"@types/jest": "^29.5.14",
78-
"@types/react": "^19.0.10",
79-
"commitlint": "^19.6.1",
78+
"@types/react": "^19.1.0",
79+
"commitlint": "^19.8.0",
8080
"del-cli": "^6.0.0",
8181
"eslint": "8.57.0",
8282
"eslint-config-prettier": "^9.1.0",
83-
"eslint-plugin-prettier": "^5.2.3",
83+
"eslint-plugin-prettier": "^5.2.6",
8484
"jest": "^29.7.0",
8585
"prettier": "^3.5.3",
86-
"react": "19.0.0",
87-
"react-native": "0.78.0",
88-
"react-native-builder-bob": "^0.37.0",
89-
"react-native-reanimated": "^3.17.1",
86+
"react": "19.1.0",
87+
"react-native": "0.78.2",
88+
"react-native-builder-bob": "0.37.0",
89+
"react-native-reanimated": "^3.17.3",
9090
"react-native-safe-area-context": "^5.3.0",
91-
"release-it": "16.1.5",
92-
"typescript": "^5.8.2"
91+
"release-it": "^18.1.2",
92+
"typescript": "^5.8.3"
9393
},
9494
"resolutions": {
95-
"@types/react": "^19.0.10"
95+
"@types/react": "^19.1.0"
9696
},
9797
"peerDependencies": {
9898
"@react-navigation/elements": ">=2.0.0",
@@ -101,7 +101,7 @@
101101
"react": "*",
102102
"react-native": "*",
103103
"react-native-reanimated": ">=3.0.0",
104-
"react-native-safe-area-context": ">=4.0.0"
104+
"react-native-safe-area-context": ">=5.0.0"
105105
},
106106
"workspaces": [
107107
"example"

‎src/components/AnimatedHeaderFlatList.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export function AnimatedHeaderFlatList<T>({
6060
setHeaderTitleLayout,
6161
stickyComponentLayout,
6262
setStickyComponentLayout,
63+
stickyComponentAnimatedStyle,
6364
navigationBarAnimatedStyle,
6465
navigationTitleAnimatedStyle,
6566
headerTitleAnimatedStyle,
@@ -193,14 +194,17 @@ export function AnimatedHeaderFlatList<T>({
193194
{ListHeaderComponent}
194195
</Animated.View>
195196
{StickyComponent && (
196-
<View
197-
style={styles.stickyComponentContainer}
197+
<Animated.View
198+
style={[
199+
styles.stickyComponentContainer,
200+
stickyComponentAnimatedStyle,
201+
]}
198202
onLayout={(event: LayoutChangeEvent) => {
199203
setStickyComponentLayout(event.nativeEvent.layout);
200204
}}
201205
>
202206
<StickyComponent />
203-
</View>
207+
</Animated.View>
204208
)}
205209
</View>
206210
);
@@ -214,6 +218,7 @@ export function AnimatedHeaderFlatList<T>({
214218
flatListProps,
215219
navigationBarHeight,
216220
stickyComponentLayout.height,
221+
stickyComponentAnimatedStyle,
217222
stickyHeaderAnimatedStyle,
218223
headerLayout.height,
219224
ListHeaderComponent,

‎src/hooks/useAnimatedHeaderFlatListAnimatedStyles.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useHeaderHeight } from '@react-navigation/elements';
2-
import { useState } from 'react';
2+
import { useCallback, useState } from 'react';
33
import {
44
useWindowDimensions,
55
type LayoutRectangle,
@@ -31,6 +31,7 @@ type AnimatedHeaderFlatListAnimatedStyles = {
3131
setHeaderTitleLayout: (layout: LayoutRectangle) => void;
3232
stickyComponentLayout: LayoutRectangle;
3333
setStickyComponentLayout: (layout: LayoutRectangle) => void;
34+
stickyComponentAnimatedStyle: AnimatedStyle<ViewStyle>;
3435
navigationBarAnimatedStyle: AnimatedStyle<ViewStyle>;
3536
navigationTitleAnimatedStyle: AnimatedStyle<ViewStyle>;
3637
headerTitleAnimatedStyle: AnimatedStyle<ViewStyle>;
@@ -61,7 +62,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
6162
width: 0,
6263
height: 0,
6364
});
64-
const [stickyComponentLayout, setStickyComponentLayout] =
65+
const [stickyComponentLayout, updateStickyComponentLayout] =
6566
useState<LayoutRectangle>({
6667
x: 0,
6768
y: 0,
@@ -74,6 +75,14 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
7475
navigationBarHeight;
7576
const navigationTitleOpacity = useSharedValue(0);
7677
const stickyHeaderOpacity = useSharedValue(0);
78+
const stickyComponentOpacity = useSharedValue(0);
79+
const setStickyComponentLayout = useCallback(
80+
(layout: LayoutRectangle) => {
81+
updateStickyComponentLayout(layout);
82+
stickyComponentOpacity.value = layout.height > 0 ? 1 : 0;
83+
},
84+
[updateStickyComponentLayout, stickyComponentOpacity]
85+
);
7786
const navigationBarAnimatedStyle = useAnimatedStyle(() => {
7887
return {
7988
opacity: interpolate(
@@ -183,6 +192,11 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
183192
],
184193
};
185194
});
195+
const stickyComponentAnimatedStyle = useAnimatedStyle(() => {
196+
return {
197+
opacity: stickyComponentOpacity.value,
198+
};
199+
});
186200
const scrollHandler = useAnimatedScrollHandler((event) => {
187201
scrollY.value = event.contentOffset.y;
188202
navigationTitleOpacity.value =
@@ -202,6 +216,7 @@ export const useAnimatedHeaderFlatListAnimatedStyles = ({
202216
setHeaderTitleLayout,
203217
stickyComponentLayout,
204218
setStickyComponentLayout,
219+
stickyComponentAnimatedStyle,
205220
navigationBarAnimatedStyle,
206221
navigationTitleAnimatedStyle,
207222
headerTitleAnimatedStyle,

0 commit comments

Comments
 (0)