react-native-animated-header-flat-list 1.6.8 → 1.6.10

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Karen
+Copyright (c) 2026 Karen
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/lib/module/components/AnimatedHeaderFlatList.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { forwardRef, useLayoutEffect, useCallback, useMemo } from 'react';
-import { StatusBar, StyleSheet, View, Text } from 'react-native';
+import { StatusBar, StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useAnimatedHeaderFlatListAnimatedStyles } from "../hooks/useAnimatedHeaderFlatListAnimatedStyles.js";
 import { getFontSizeFromStyle } from "../utils/styleUtils.js";
@@ -43,13 +43,10 @@ function AnimatedHeaderFlatListInner({
     navigationTitleTranslateX,
     navigationTitleTranslateY
   });
-  const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.View, {
-    style: navigationTitleAnimatedStyle,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: navigationTitleStyle,
-      numberOfLines: 1,
-      children: title
-    })
+  const navigationTitle = useCallback(() => /*#__PURE__*/_jsx(Animated.Text, {
+    style: [navigationTitleAnimatedStyle, navigationTitleStyle],
+    numberOfLines: 1,
+    children: title
   }), [navigationTitleAnimatedStyle, navigationTitleStyle, title]);
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -61,7 +58,7 @@ function AnimatedHeaderFlatListInner({
       headerTitleAlign: 'center'
     });
   }, [navigationTitle, navigation]);
-  const createHeaderComponent = useCallback(key => {
+  const ListHeaderComponent = useMemo(() => {
     return /*#__PURE__*/_jsx(View, {
       style: styles.headerWrapper,
       children: /*#__PURE__*/_jsxs(View, {
@@ -84,19 +81,16 @@ function AnimatedHeaderFlatListInner({
           style: [navigationBarAnimatedStyle, styles.animatedNavigationBar, {
             backgroundColor: navigationBarColor
           }]
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: headerTitleAnimatedStyle,
+        }), /*#__PURE__*/_jsx(Animated.Text, {
           onLayout: event => {
             setHeaderTitleLayout(event.nativeEvent.layout);
           },
-          children: /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [styles.headerTitle, headerTitleStyle],
-            children: title
-          })
+          numberOfLines: 1,
+          style: [headerTitleAnimatedStyle, styles.headerTitle, headerTitleStyle],
+          children: title
         })]
       })
-    }, key);
+    });
   }, [navigationBarHeight, parallax, headerBackgroundAnimatedStyle, HeaderBackground, HeaderContent, headerContentAnimatedStyle, headerTitleAnimatedStyle, headerTitleStyle, title, setHeaderLayout, setHeaderTitleLayout, navigationBarAnimatedStyle, navigationBarColor]);
   const renderItem = useCallback(({
     item
@@ -110,7 +104,7 @@ function AnimatedHeaderFlatListInner({
           style: [stickyHeaderAnimatedStyle, styles.stickyHeader, {
             bottom: headerLayout.height - navigationBarHeight * 2 + stickyComponentLayout.height
           }],
-          children: createHeaderComponent('sticky')
+          children: ListHeaderComponent
         }), StickyComponent && /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.stickyComponentContainer, stickyComponentAnimatedStyle],
           onLayout: event => {
@@ -123,7 +117,7 @@ function AnimatedHeaderFlatListInner({
     return flatListProps.renderItem && typeof flatListProps.renderItem === 'function' ? flatListProps.renderItem({
       item
     }) : null;
-  }, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyComponentAnimatedStyle, stickyHeaderAnimatedStyle, headerLayout.height, createHeaderComponent, StickyComponent, setStickyComponentLayout]);
+  }, [flatListProps, navigationBarHeight, stickyComponentLayout.height, stickyComponentAnimatedStyle, stickyHeaderAnimatedStyle, headerLayout.height, ListHeaderComponent, StickyComponent, setStickyComponentLayout]);
   const data = useMemo(() => {
     const listData = Array.isArray(flatListProps.data) ? flatListProps.data : [];
     return [HEADER_ITEM, ...listData];
@@ -143,7 +137,7 @@ function AnimatedHeaderFlatListInner({
             translateY: navigationBarHeight
           }]
         }],
-        children: createHeaderComponent('main')
+        children: ListHeaderComponent
       }),
       onScroll: scrollHandler,
       data: data,

package/lib/module/components/AnimatedHeaderFlatList.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useLayoutEffect","useCallback","useMemo","StatusBar","StyleSheet","View","Text","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","useNavigation","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatListInner","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","ref","navigation","scrollHandler","navigationBarHeight","headerLayout","setHeaderLayout","setHeaderTitleLayout","stickyComponentLayout","setStickyComponentLayout","stickyComponentAnimatedStyle","navigationBarAnimatedStyle","navigationTitleAnimatedStyle","headerTitleAnimatedStyle","stickyHeaderAnimatedStyle","headerContentAnimatedStyle","headerBackgroundAnimatedStyle","headerTitleFontSize","navigationTitleFontSize","navigationTitle","style","children","numberOfLines","setOptions","headerShown","headerStyle","styles","navigationBar","headerShadowVisible","headerTransparent","headerTitle","headerTitleAlign","createHeaderComponent","key","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","ListHeaderComponent","mainHeaderContainer","transform","translateY","onScroll","create","overflow","position","left","right","width","AnimatedHeaderFlatList"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useLayoutEffect","useCallback","useMemo","StatusBar","StyleSheet","View","Animated","useAnimatedHeaderFlatListAnimatedStyles","getFontSizeFromStyle","useNavigation","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEADER_ITEM","AnimatedHeaderFlatListInner","title","navigationBarColor","headerTitleStyle","navigationTitleStyle","HeaderBackground","HeaderContent","StickyComponent","parallax","navigationTitleTranslateX","navigationTitleTranslateY","flatListProps","ref","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","AnimatedHeaderFlatList"],"sourceRoot":"../../../src","sources":["components/AnimatedHeaderFlatList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/components/AnimatedHeaderFlatList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EAKd,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,QAAQ,EAKR,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,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,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,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;AAyRR,eAAO,MAAM,sBAAsB,EAE9B,CAAC,CAAC,EACL,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CACrC,KACE,YAAY,CAAC"}
+{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../../src/components/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EAMd,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,QAAQ,EAIR,KAAK,UAAU,EAGf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,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,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,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;AAuRR,eAAO,MAAM,sBAAsB,EAE9B,CAAC,CAAC,EACL,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;CACrC,KACE,YAAY,CAAC"}

package/lib/typescript/src/utils/styleUtils.d.ts

@@ -1,3 +1,3 @@
 import { type StyleProp, type TextStyle } from 'react-native';
-export declare const getFontSizeFromStyle: (textStyle: StyleProp<TextStyle>) => number | undefined;
+export declare const getFontSizeFromStyle: (textStyle: StyleProp<TextStyle>) => any;
 //# sourceMappingURL=styleUtils.d.ts.map

package/lib/typescript/src/utils/styleUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,uBAgBnE,CAAC"}
+{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/styleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,WAAW,SAAS,CAAC,SAAS,CAAC,QAgBnE,CAAC"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-native-animated-header-flat-list",
-  "version": "1.6.8",
+  "version": "1.6.10",
   "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.",
-  "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -33,12 +33,12 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-animated-header-flat-list-example",
-    "test": "jest",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
-    "release": "release-it"
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
   },
   "keywords": [
     "react-native",
@@ -62,32 +62,33 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.1",
+    "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.32.0",
-    "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/eslint-config": "^0.79.2",
-    "@react-navigation/elements": "^2.4.3",
-    "@react-navigation/native": "^7.1.10",
-    "@react-navigation/native-stack": "^7.3.14",
-    "@release-it/conventional-changelog": "^9.0.2",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.9",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@react-navigation/elements": "^2.9.10",
+    "@react-navigation/native": "^7.1.33",
+    "@react-navigation/native-stack": "^7.14.5",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
     "commitlint": "^19.8.1",
-    "del-cli": "^5.1.0",
-    "eslint": "^9.28.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-prettier": "^5.5.4",
-    "jest": "^30.0.5",
-    "prettier": "^3.6.2",
-    "react": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-builder-bob": "0.37.0",
-    "react-native-reanimated": "^3.18.0",
-    "react-native-safe-area-context": "^5.6.2",
-    "release-it": "^17.10.0",
-    "typescript": "^5.9.3"
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-reanimated": "^4.2.2",
+    "react-native-safe-area-context": "^5.7.0",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "@react-navigation/elements": ">=2.0.0",
@@ -101,7 +102,32 @@
   "workspaces": [
     "example"
   ],
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -129,39 +155,19 @@
       "@release-it/conventional-changelog": {
         "preset": {
           "name": "angular"
-        },
-        "infile": "CHANGELOG.md"
+        }
       }
     }
   },
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
   "create-react-native-library": {
-    "languages": "js",
     "type": "library",
-    "version": "0.49.8"
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
   }
 }

package/src/components/AnimatedHeaderFlatList.tsx

@@ -5,15 +5,15 @@ import {
   useLayoutEffect,
   useCallback,
   useMemo,
-  type ComponentType,
   type ForwardedRef,
+  type ComponentType,
+  type ReactNode,
 } from 'react';
 import {
   FlatList,
   StatusBar,
   StyleSheet,
   View,
-  Text,
   type ColorValue,
   type LayoutChangeEvent,
   type ListRenderItemInfo,
@@ -88,11 +88,12 @@ function AnimatedHeaderFlatListInner<T>(
 
   const navigationTitle = useCallback(
     () => (
-      <Animated.View style={navigationTitleAnimatedStyle}>
-        <Text style={navigationTitleStyle} numberOfLines={1}>
-          {title}
-        </Text>
-      </Animated.View>
+      <Animated.Text
+        style={[navigationTitleAnimatedStyle, navigationTitleStyle]}
+        numberOfLines={1}
+      >
+        {title}
+      </Animated.Text>
     ),
     [navigationTitleAnimatedStyle, navigationTitleStyle, title]
   );
@@ -108,81 +109,78 @@ function AnimatedHeaderFlatListInner<T>(
     });
   }, [navigationTitle, navigation]);
 
-  const createHeaderComponent = useCallback(
-    (key: string) => {
-      return (
-        <View style={styles.headerWrapper} key={key}>
-          <View
-            style={[styles.headerContainer, { top: -navigationBarHeight }]}
-            onLayout={(event: LayoutChangeEvent) => {
-              setHeaderLayout({
-                ...event.nativeEvent.layout,
-                height: event.nativeEvent.layout.height + navigationBarHeight,
-              });
-            }}
+  const ListHeaderComponent = useMemo(() => {
+    return (
+      <View style={styles.headerWrapper}>
+        <View
+          style={[styles.headerContainer, { top: -navigationBarHeight }]}
+          onLayout={(event: LayoutChangeEvent) => {
+            setHeaderLayout({
+              ...event.nativeEvent.layout,
+              height: event.nativeEvent.layout.height + navigationBarHeight,
+            });
+          }}
+        >
+          <Animated.View
+            style={parallax ? headerBackgroundAnimatedStyle : undefined}
           >
+            <HeaderBackground />
+          </Animated.View>
+          {HeaderContent && (
             <Animated.View
-              style={parallax ? headerBackgroundAnimatedStyle : undefined}
+              style={[
+                headerContentAnimatedStyle,
+                styles.headerContentContainer,
+              ]}
             >
-              <HeaderBackground />
+              <HeaderContent />
             </Animated.View>
-            {HeaderContent && (
-              <Animated.View
-                style={[
-                  headerContentAnimatedStyle,
-                  styles.headerContentContainer,
-                ]}
-              >
-                <HeaderContent />
-              </Animated.View>
-            )}
-            {navigationBarColor && (
-              <Animated.View
-                style={[
-                  navigationBarAnimatedStyle,
-                  styles.animatedNavigationBar,
-                  { backgroundColor: navigationBarColor },
-                ]}
-              />
-            )}
+          )}
+          {navigationBarColor && (
             <Animated.View
-              style={headerTitleAnimatedStyle}
-              onLayout={(event: LayoutChangeEvent) => {
-                setHeaderTitleLayout(event.nativeEvent.layout);
-              }}
-            >
-              <Text
-                numberOfLines={1}
-                style={[styles.headerTitle, headerTitleStyle]}
-              >
-                {title}
-              </Text>
-            </Animated.View>
-          </View>
+              style={[
+                navigationBarAnimatedStyle,
+                styles.animatedNavigationBar,
+                { backgroundColor: navigationBarColor },
+              ]}
+            />
+          )}
+          <Animated.Text
+            onLayout={(event: LayoutChangeEvent) => {
+              setHeaderTitleLayout(event.nativeEvent.layout);
+            }}
+            numberOfLines={1}
+            style={[
+              headerTitleAnimatedStyle,
+              styles.headerTitle,
+              headerTitleStyle,
+            ]}
+          >
+            {title}
+          </Animated.Text>
         </View>
-      );
-    },
-    [
-      navigationBarHeight,
-      parallax,
-      headerBackgroundAnimatedStyle,
-      HeaderBackground,
-      HeaderContent,
-      headerContentAnimatedStyle,
-      headerTitleAnimatedStyle,
-      headerTitleStyle,
-      title,
-      setHeaderLayout,
-      setHeaderTitleLayout,
-      navigationBarAnimatedStyle,
-      navigationBarColor,
-    ]
-  );
+      </View>
+    );
+  }, [
+    navigationBarHeight,
+    parallax,
+    headerBackgroundAnimatedStyle,
+    HeaderBackground,
+    HeaderContent,
+    headerContentAnimatedStyle,
+    headerTitleAnimatedStyle,
+    headerTitleStyle,
+    title,
+    setHeaderLayout,
+    setHeaderTitleLayout,
+    navigationBarAnimatedStyle,
+    navigationBarColor,
+  ]);
 
   type CustomItem = typeof HEADER_ITEM | T;
 
   const renderItem = useCallback(
-    ({ item }: ListRenderItemInfo<CustomItem>): ReactElement | null => {
+    ({ item }: ListRenderItemInfo<CustomItem>): ReactNode => {
       if (item === HEADER_ITEM) {
         return (
           <View
@@ -205,7 +203,7 @@ function AnimatedHeaderFlatListInner<T>(
                 },
               ]}
             >
-              {createHeaderComponent('sticky')}
+              {ListHeaderComponent}
             </Animated.View>
             {StickyComponent && (
               <Animated.View
@@ -235,7 +233,7 @@ function AnimatedHeaderFlatListInner<T>(
       stickyComponentAnimatedStyle,
       stickyHeaderAnimatedStyle,
       headerLayout.height,
-      createHeaderComponent,
+      ListHeaderComponent,
       StickyComponent,
       setStickyComponentLayout,
     ]
@@ -265,7 +263,7 @@ function AnimatedHeaderFlatListInner<T>(
               },
             ]}
           >
-            {createHeaderComponent('main')}
+            {ListHeaderComponent}
           </Animated.View>
         }
         onScroll={scrollHandler}