Merge pull request #8 from lukailun/develop

v1.5.1

Author: lukailun

CHANGELOG.md

@@ -1,87 +1,58 @@
 # Changelog
 
-## <small>1.4.3 (2025-04-22)</small>
-
-* fix: downgrade react-native-builder-bob to 0.37.0 ([4ee989c](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4ee989c))
-* fix: downgrade react-native-builder-bob to exact version ([f165587](https://github.com/lukailun/react-native-animated-header-flat-list/commit/f165587))
-* fix: update stickyHeaderContainer style to fix ui glitch on web ([5609919](https://github.com/lukailun/react-native-animated-header-flat-list/commit/5609919))
-* chore: add keywords flat-list and animated to package.json ([889a0fe](https://github.com/lukailun/react-native-animated-header-flat-list/commit/889a0fe))
-* chore: downgrade commitlint to v19.6.1 ([24e1859](https://github.com/lukailun/react-native-animated-header-flat-list/commit/24e1859))
-* chore: revert dependencies to previous versions ([92b5585](https://github.com/lukailun/react-native-animated-header-flat-list/commit/92b5585))
-* chore: update dependencies ([679098d](https://github.com/lukailun/react-native-animated-header-flat-list/commit/679098d))
-* chore: update dependencies ([219457b](https://github.com/lukailun/react-native-animated-header-flat-list/commit/219457b))
-* chore: update dependencies ([9649a3b](https://github.com/lukailun/react-native-animated-header-flat-list/commit/9649a3b))
-* chore: update dependencies ([6f37826](https://github.com/lukailun/react-native-animated-header-flat-list/commit/6f37826))
-* chore: update dependencies ([e522f02](https://github.com/lukailun/react-native-animated-header-flat-list/commit/e522f02))
-* chore: update dependencies ([4be6712](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4be6712))
-* chore: update dependencies ([4912b49](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4912b49))
-* chore: update dependencies ([72e7124](https://github.com/lukailun/react-native-animated-header-flat-list/commit/72e7124))
-* chore: update dependencies ([ce68d62](https://github.com/lukailun/react-native-animated-header-flat-list/commit/ce68d62))
-* chore: update dependencies ([128662f](https://github.com/lukailun/react-native-animated-header-flat-list/commit/128662f))
-* chore: update release-it config to use CHANGELOG.md ([7ef43f1](https://github.com/lukailun/react-native-animated-header-flat-list/commit/7ef43f1))
-
-## [1.4.2](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.4.1...v1.4.2) (2025-04-08)
-
-
-### Bug Fixes
-
-* optimize sticky component display after layout completion ([4a4d7e8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4a4d7e8118dab3d23ff0983c36546511c9f912ce))
-
-## [1.4.1](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.4.0...v1.4.1) (2025-03-19)
+## <small>1.5.1 (2025-06-19)</small>
 
+* docs: remove navigation prop dependency from AnimatedHeaderFlatList component ([3ddcf50](https://github.com/lukailun/react-native-animated-header-flat-list/commit/3ddcf50))
 
-### Bug Fixes
+## 1.5.0 (2025-06-19)
 
-* add eslint disable comment to metro config ([64f5123](https://github.com/lukailun/react-native-animated-header-flat-list/commit/64f512362359043fab1fb03120664e45b16d763d))
-* convert babel config to commonjs ([4df90d8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4df90d86d4634b18433384699ff28ee25adba413))
+* style: fix linting issues and formatting ([0bbc213](https://github.com/lukailun/react-native-animated-header-flat-list/commit/0bbc213))
+* chore: release 1.4.3 ([25a6c67](https://github.com/lukailun/react-native-animated-header-flat-list/commit/25a6c67))
+* chore: update dependencies ([345783c](https://github.com/lukailun/react-native-animated-header-flat-list/commit/345783c))
+* chore: update dependencies to latest versions ([e25688b](https://github.com/lukailun/react-native-animated-header-flat-list/commit/e25688b))
+* chore: update dependencies to React 19 and React Native 0.79.2 ([833f0ab](https://github.com/lukailun/react-native-animated-header-flat-list/commit/833f0ab))
+* chore: update README ([7516c27](https://github.com/lukailun/react-native-animated-header-flat-list/commit/7516c27))
 
-# [1.4.0](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.3.1...v1.4.0) (2025-03-10)
-
-
-### Bug Fixes
-
-* use any type for navigation prop temporarily ([ef8c9b4](https://github.com/lukailun/react-native-animated-header-flat-list/commit/ef8c9b48c16a8beffd664e375c47576d5bb52cd0))
-
-## [1.3.1](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.3.0...v1.3.1) (2025-01-21)
-
-### Bug Fixes
+## <small>1.4.3 (2025-04-22)</small>
 
-- change navigation prop type to any ([33377cf](https://github.com/lukailun/react-native-animated-header-flat-list/commit/33377cfcbfd3822a118752a7e6963b646bf3b15c))
-- update navigation type ([889d916](https://github.com/lukailun/react-native-animated-header-flat-list/commit/889d91616cad6a1aac7134f79a7307a22800b65c))
+* fix: update stickyHeaderContainer style to fix ui glitch on web ([5609919](https://github.com/lukailun/react-native-animated-header-flat-list/commit/5609919))
 
-# [1.3.0](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.2.3...v1.3.0) (2025-01-21)
+## <small>1.4.2 (2025-04-08)</small>
 
-### Features
+* fix: optimize sticky component display after layout completion ([4a4d7e8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4a4d7e8118dab3d23ff0983c36546511c9f912ce))
 
-- add navigationBarColor prop to support animated navigation bar background ([df2253e](https://github.com/lukailun/react-native-animated-header-flat-list/commit/df2253e8b27d9efcb0c7fabba334ab8ef6c72375))
+## <small>1.4.1 (2025-03-19)</small>
 
-## [1.2.3](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.2.2...v1.2.3) (2024-12-06)
+* fix: add eslint disable comment to metro config ([64f5123](https://github.com/lukailun/react-native-animated-header-flat-list/commit/64f512362359043fab1fb03120664e45b16d763d))
+* fix: convert babel config to commonjs ([4df90d8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/4df90d86d4634b18433384699ff28ee25adba413))
 
-### Bug Fixes
+## <small>1.4.0 (2025-03-10)</small>
 
-- remove redundant interpolation input range value ([fa99989](https://github.com/lukailun/react-native-animated-header-flat-list/commit/fa9998983ae4d2448fa60cb4a3318434753e812d))
+* fix: use any type for navigation prop temporarily ([ef8c9b4](https://github.com/lukailun/react-native-animated-header-flat-list/commit/ef8c9b48c16a8beffd664e375c47576d5bb52cd0))
 
-## [1.2.2](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.2.1...v1.2.2) (2024-11-28)
+## <small>1.3.1 (2025-01-21)</small>
 
-### Bug Fixes
+* fix: change navigation prop type to any ([33377cf](https://github.com/lukailun/react-native-animated-header-flat-list/commit/33377cfcbfd3822a118752a7e6963b646bf3b15c))
+* fix: update navigation type ([889d916](https://github.com/lukailun/react-native-animated-header-flat-list/commit/889d91616cad6a1aac7134f79a7307a22800b65c))
 
-- remove empty item ([26f970a](https://github.com/lukailun/react-native-animated-header-flat-list/commit/26f970aa1dfeb75f1e142db7d5e0a42482e6c402))
+## <small>1.3.0 (2025-01-21)</small>
 
-## [1.2.1](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.2.0...v1.2.1) (2024-11-28)
+* feat: add navigationBarColor prop to support animated navigation bar background ([df2253e](https://github.com/lukailun/react-native-animated-header-flat-list/commit/df2253e8b27d9efcb0c7fabba334ab8ef6c72375))
 
-### Bug Fixes
+## <small>1.2.3 (2024-12-06)</small>
 
-- show header item in empty list ([824a6ab](https://github.com/lukailun/react-native-animated-header-flat-list/commit/824a6ab5258a07b2af0658b338c6876be416b0c6))
+* fix: remove redundant interpolation input range value ([fa99989](https://github.com/lukailun/react-native-animated-header-flat-list/commit/fa9998983ae4d2448fa60cb4a3318434753e812d))
 
-# [1.2.0](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.1.1...v1.2.0) (2024-11-28)
+## <small>1.2.2 (2024-11-28)</small>
 
-### Bug Fixes
+* fix: remove empty item ([26f970a](https://github.com/lukailun/react-native-animated-header-flat-list/commit/26f970aa1dfeb75f1e142db7d5e0a42482e6c402))
 
-- remove stickyHeaderHiddenOnScroll ([170fcd7](https://github.com/lukailun/react-native-animated-header-flat-list/commit/170fcd7317a29bdf7a2598d29ae7fcc843fccb67))
+## <small>1.2.1 (2024-11-28)</small>
 
-### Features
+* fix: show header item in empty list ([824a6ab](https://github.com/lukailun/react-native-animated-header-flat-list/commit/824a6ab5258a07b2af0658b338c6876be416b0c6))
 
-- add parallax prop to control header background parallax effect ([9fa1b09](https://github.com/lukailun/react-native-animated-header-flat-list/commit/9fa1b09e603b766d7d2cc8a7706c1b5b6ef2b120))
-- add transparent status bar ([61714a8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/61714a8050d51715f5fdcbcff996c2c1fa9e69f9))
+## <small>1.2.0 (2024-11-28)</small>
 
-## [1.1.1](https://github.com/lukailun/react-native-animated-header-flat-list/compare/v1.1.0...v1.1.1) (2024-11-27)
+* fix: remove stickyHeaderHiddenOnScroll ([170fcd7](https://github.com/lukailun/react-native-animated-header-flat-list/commit/170fcd7317a29bdf7a2598d29ae7fcc843fccb67))
+* feat: add parallax prop to control header background parallax effect ([9fa1b09](https://github.com/lukailun/react-native-animated-header-flat-list/commit/9fa1b09e603b766d7d2cc8a7706c1b5b6ef2b120))
+* feat: add transparent status bar ([61714a8](https://github.com/lukailun/react-native-animated-header-flat-list/commit/61714a8050d51715f5fdcbcff996c2c1fa9e69f9))

README.md

@@ -54,54 +54,37 @@ Make sure to follow the installation instructions for each dependency:
 - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)
 - [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)
 
-### Additional Setup
-
-For React Native Reanimated, Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
-
-```js
-module.exports = {
-  presets: [
-    ... // don't add it here :)
-  ],
-  plugins: [
-    ...
-    'react-native-reanimated/plugin',
-  ],
-};
-```
-
-CAUTION: `react-native-reanimated/plugin` has to be listed last.
-
 ## Usage
 
 ```tsx
-import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
 import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
 import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
 
 export default function HomeScreen() {
-  const navigation = useNavigation();
   const data = Array.from({ length: 50 }, (_, index) => ({
     id: `item-${index}`,
     title: `Item ${index + 1}`,
     description: 'Lorem ipsum dolor sit amet',
   }));
   const title = 'Animated Title';
 
-  const renderItem = ({
-    item,
-  }: {
-    item: { id: string; title: string; description: string };
-  }) => (
-    <View style={styles.listItem}>
-      <Text style={styles.itemTitle}>{item.title}</Text>
-      <Text style={styles.itemDescription}>{item.description}</Text>
-    </View>
+  const renderItem = useCallback(
+    ({
+      item,
+    }: {
+      item: { id: string; title: string; description: string };
+    }) => (
+      <View style={styles.listItem}>
+        <Text style={styles.itemTitle}>{item.title}</Text>
+        <Text style={styles.itemDescription}>{item.description}</Text>
+      </View>
+    ),
+    []
   );
 
   return (
     <AnimatedHeaderFlatList
-      navigation={navigation}
       title={title}
       headerTitleStyle={styles.headerTitle}
       navigationTitleStyle={styles.navigationTitle}
@@ -202,7 +185,6 @@ const styles = StyleSheet.create({
 
 | Prop                        | Type                 | Required | Description                                                                                                    |
 | --------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
-| `navigation`                | any                  | Yes      | React Navigation navigation prop                                                                               |
 | `title`                     | string               | Yes      | The title text that will animate between header and navigation bar                                             |
 | `headerTitleStyle`          | StyleProp<TextStyle> | No       | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
 | `navigationTitleStyle`      | StyleProp<TextStyle> | No       | Style object for the title in the navigation bar. Supports all Text style props except position-related properties |

README_zh.md

@@ -54,54 +54,37 @@ npm install @react-navigation/native @react-navigation/native-stack @react-navig
 - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)
 - [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)
 
-### 额外配置
-
-对于 React Native Reanimated，需要在 `babel.config.js` 中添加 `react-native-reanimated/plugin` 插件：
-
-```js
-module.exports = {
-  presets: [
-    ... // 不要加在这里 :)
-  ],
-  plugins: [
-    ...
-    'react-native-reanimated/plugin',
-  ],
-};
-```
-
-注意：`react-native-reanimated/plugin` 必须放在插件列表的最后面。
-
 ## 使用示例
 
 ```tsx
-import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
 import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
 import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
 
 export default function HomeScreen() {
-  const navigation = useNavigation();
   const data = Array.from({ length: 50 }, (_, index) => ({
     id: `item-${index}`,
     title: `Item ${index + 1}`,
     description: 'Lorem ipsum dolor sit amet',
   }));
   const title = 'Animated Title';
 
-  const renderItem = ({
-    item,
-  }: {
-    item: { id: string; title: string; description: string };
-  }) => (
-    <View style={styles.listItem}>
-      <Text style={styles.itemTitle}>{item.title}</Text>
-      <Text style={styles.itemDescription}>{item.description}</Text>
-    </View>
+  const renderItem = useCallback(
+    ({
+      item,
+    }: {
+      item: { id: string; title: string; description: string };
+    }) => (
+      <View style={styles.listItem}>
+        <Text style={styles.itemTitle}>{item.title}</Text>
+        <Text style={styles.itemDescription}>{item.description}</Text>
+      </View>
+    ),
+    []
   );
 
   return (
     <AnimatedHeaderFlatList
-      navigation={navigation}
       title={title}
       headerTitleStyle={styles.headerTitle}
       navigationTitleStyle={styles.navigationTitle}
@@ -202,7 +185,6 @@ const styles = StyleSheet.create({
 
 | 属性                        | 类型                 | 是否必需 | 描述                                                                         |
 | --------------------------- | -------------------- | -------- | ---------------------------------------------------------------------------- |
-| `navigation`                | any                  | 是       | React Navigation 导航属性                                                     |
 | `title`                     | string               | 是       | 在 Header 和 NavigationBar 之间动画过渡的标题文本                            |
 | `headerTitleStyle`          | StyleProp<TextStyle> | 否       | Header 标题的样式对象。支持所有 Text 样式属性。位置相对于 HeaderContent      |
 | `navigationTitleStyle`      | StyleProp<TextStyle> | 否       | NavigationBar 标题的样式对象。支持除位置相关属性外的所有 Text 样式属性       |

example/package.json

@@ -10,22 +10,22 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.1",
-    "@react-navigation/elements": "2.3.8",
-    "@react-navigation/native": "7.1.6",
-    "@react-navigation/native-stack": "7.3.10",
+    "@react-navigation/elements": "2.4.3",
+    "@react-navigation/native": "7.1.10",
+    "@react-navigation/native-stack": "7.3.14",
     "expo": "~52.0.46",
-    "expo-status-bar": "~2.0.1",
+    "expo-status-bar": "^2.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
     "react-native-reanimated": "3.16.7",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "4.10.0",
-    "react-native-web": "~0.19.13"
+    "react-native-safe-area-context": "5.4.1",
+    "react-native-screens": "4.11.1",
+    "react-native-web": "^0.20.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "react-native-builder-bob": "^0.40.5"
+    "@babel/core": "^7.27.4",
+    "react-native-builder-bob": "^0.40.11"
   },
   "private": true
 }

example/src/HomeScreen.tsx

@@ -1,30 +1,31 @@
-import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
 import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
 import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
 
 export default function HomeScreen() {
-  const navigation = useNavigation();
   const data = Array.from({ length: 50 }, (_, index) => ({
     id: `item-${index}`,
     title: `Item ${index + 1}`,
     description: 'Lorem ipsum dolor sit amet',
   }));
   const title = 'Animated Title';
 
-  const renderItem = ({
-    item,
-  }: {
-    item: { id: string; title: string; description: string };
-  }) => (
-    <View style={styles.listItem}>
-      <Text style={styles.itemTitle}>{item.title}</Text>
-      <Text style={styles.itemDescription}>{item.description}</Text>
-    </View>
+  const renderItem = useCallback(
+    ({
+      item,
+    }: {
+      item: { id: string; title: string; description: string };
+    }) => (
+      <View style={styles.listItem}>
+        <Text style={styles.itemTitle}>{item.title}</Text>
+        <Text style={styles.itemDescription}>{item.description}</Text>
+      </View>
+    ),
+    []
   );
 
   return (
     <AnimatedHeaderFlatList
-      navigation={navigation}
       title={title}
       headerTitleStyle={styles.headerTitle}
       navigationTitleStyle={styles.navigationTitle}