react-native-flatlist-collapsible-header 1.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 MomenMustafa45
+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
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# react-native-flatlist-collapsible-header
+
+A reusable **React Native FlatList with a smooth collapsible animated header**, built using **react-native-reanimated**.  
+The header smoothly fades, translates, and optionally scales away as the user scrolls.
+
+Ideal for feeds, profile screens, dashboards, and modern mobile UIs.
+
+---
+
+## ✨ Features
+
+- ⚡ Smooth animations powered by **react-native-reanimated**
+- 🎯 Fully typed with **TypeScript**
+- 🧩 Drop-in replacement for `FlatList`
+- 🎛 Configurable animation behavior
+- 📱 Optimized for performance
+- 🧠 Clean and simple API
+
+---
+
+## 📸 Preview
+
+Demo of the collapsible header behavior:
+
+```md
+https://github.com/your-username/react-native-flatlist-collapsible-header/assets/demo.mp4
+```
+
+## 📥 Installation
+
+Using npm:
+
+```sh
+npm install react-native-flatlist-collapsible-header
+ or
+yarn add react-native-flatlist-collapsible-header
+```
+
+## 🔧 Peer Dependencies
+
+This library depends on the following peer dependency:
+
+- **react-native-reanimated** `v2+`
+
+If you haven't installed or configured it yet, follow the official installation guide:  
+https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
+
+## 🚀 Usage
+
+```tsx
+import { AnimatedHeaderFlatList } from 'react-native-flatlist-collapsible-header';
+
+<AnimatedHeaderFlatList
+  data={data}
+  headerHeight={400}
+  renderHeader={<ListHeader />}
+  renderItem={({ item }) => <ListItem item={item} />}
+  keyExtractor={(item) => item.id}
+/>;
+```
+
+## 🧩 Props
+
+### `AnimatedHeaderFlatList<T>`
+
+| Prop                        | Type                   | Required | Default | Description                                           |
+| --------------------------- | ---------------------- | -------- | ------- | ----------------------------------------------------- |
+| `data`                      | `T[]`                  | ✅       | —       | Data array for the FlatList                           |
+| `renderItem`                | `ListRenderItem<T>`    | ✅       | —       | Function to render each item                          |
+| `keyExtractor`              | `(item: T) => string`  | ✅       | —       | Extracts unique keys                                  |
+| `headerHeight`              | `number`               | ✅       | —       | Height of the header in pixels                        |
+| `renderHeader`              | `React.ReactNode`      | ✅       | —       | Header component to render                            |
+| `hideThreshold`             | `number`               | ❌       | `0.5`   | Percentage (0–1) of header height before fully hidden |
+| `headerContainerStyle`      | `ViewStyle`            | ❌       | —       | Style override for the header container               |
+| `contentContainerStyle`     | `StyleProp<ViewStyle>` | ❌       | —       | Styles for FlatList content                           |
+| `scrollEventThrottle`       | `number`               | ❌       | `16`    | Scroll event frequency                                |
+| `animationConfig.fadeOut`   | `boolean`              | ❌       | `true`  | Fade header while scrolling                           |
+| `animationConfig.translate` | `boolean`              | ❌       | `true`  | Translate header vertically                           |
+| `animationConfig.scale`     | `boolean`              | ❌       | `false` | Scale header during scroll                            |
+| `onScroll`                  | `(event) => void`      | ❌       | —       | Optional scroll listener                              |
+
+> ✅ All standard `FlatList` props are supported.
+
+## 🤝 Contributing
+
+Contributions are welcome!
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## 🎛 Animation Configuration Example
+
+```tsx
+<AnimatedHeaderFlatList
+  headerHeight={300}
+  renderHeader={<Header />}
+  animationConfig={{
+    fadeOut: true,
+    translate: true,
+    scale: true,
+  }}
+/>
+```
+
+## ⚠️ Notes & Best Practices
+
+- Requires **react-native-reanimated v2+**
+- Header uses **absolute positioning**
+- Avoid using margins for header layout
+- Best performance with `scrollEventThrottle={16}`
+
+## 📄 License
+
+MIT © Momen Mustafa
+
+---
+
+Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/AnimatedHeaderFlatList.js

@@ -0,0 +1,95 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FlatList } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A FlatList component with an animated header that hides on scroll.
+ * @typeparam T - Type of items in the FlatList
+ */
+export function AnimatedHeaderFlatList({
+  headerHeight,
+  renderHeader,
+  onScroll,
+  contentContainerStyle,
+  headerContainerStyle,
+  hideThreshold = 0.5,
+  scrollEventThrottle = 16,
+  animationConfig = {
+    fadeOut: true,
+    translate: true,
+    scale: false
+  },
+  ...props
+}) {
+  const scrollY = useSharedValue(0);
+  const calculatedHideThreshold = headerHeight * hideThreshold;
+  const scrollHandler = event => {
+    const offsetY = event.nativeEvent.contentOffset.y;
+    scrollY.value = offsetY;
+    if (onScroll) {
+      onScroll(event);
+    }
+  };
+  const headerContainerStyles = useAnimatedStyle(() => {
+    const visibility = interpolate(scrollY.value, [0, calculatedHideThreshold], [1, 0], Extrapolation.CLAMP);
+    let animatedStyle = {};
+    if (animationConfig.fadeOut) {
+      animatedStyle = {
+        ...animatedStyle,
+        opacity: visibility
+      };
+    }
+    let transforms = [];
+    if (animationConfig.translate) {
+      transforms.push({
+        translateY: interpolate(visibility, [1, 0], [0, -20])
+      });
+    }
+    if (animationConfig.scale) {
+      transforms.push({
+        scale: interpolate(visibility, [0, 1], [0.8, 1])
+      });
+    }
+    if (transforms.length > 0) {
+      animatedStyle = {
+        ...animatedStyle,
+        transform: transforms
+      };
+    }
+    return animatedStyle;
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.listContainer,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.headerViewContainer, {
+        height: headerHeight
+      }, headerContainerStyles, headerContainerStyle],
+      pointerEvents: "box-none",
+      children: renderHeader
+    }), /*#__PURE__*/_jsx(FlatList, {
+      ...props,
+      onScroll: scrollHandler,
+      scrollEventThrottle: scrollEventThrottle,
+      contentContainerStyle: [{
+        paddingTop: headerHeight
+      }, contentContainerStyle]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  listContainer: {
+    position: 'relative'
+  },
+  headerViewContainer: {
+    backgroundColor: 'transparent',
+    width: '100%',
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  }
+});
+//# sourceMappingURL=AnimatedHeaderFlatList.js.map

package/lib/module/AnimatedHeaderFlatList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","FlatList","Animated","useSharedValue","useAnimatedStyle","interpolate","Extrapolation","jsx","_jsx","jsxs","_jsxs","AnimatedHeaderFlatList","headerHeight","renderHeader","onScroll","contentContainerStyle","headerContainerStyle","hideThreshold","scrollEventThrottle","animationConfig","fadeOut","translate","scale","props","scrollY","calculatedHideThreshold","scrollHandler","event","offsetY","nativeEvent","contentOffset","y","value","headerContainerStyles","visibility","CLAMP","animatedStyle","opacity","transforms","push","translateY","length","transform","style","styles","listContainer","children","headerViewContainer","height","pointerEvents","paddingTop","create","position","backgroundColor","width","flex","top","left"],"sourceRoot":"../../src","sources":["AnimatedHeaderFlatList.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,UAAU,EACVC,IAAI,QAMC,cAAc;AACrB,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,WAAW,EACXC,aAAa,QACR,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAyBjC;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAI;EACxCC,YAAY;EACZC,YAAY;EACZC,QAAQ;EACRC,qBAAqB;EACrBC,oBAAoB;EACpBC,aAAa,GAAG,GAAG;EACnBC,mBAAmB,GAAG,EAAE;EACxBC,eAAe,GAAG;IAChBC,OAAO,EAAE,IAAI;IACbC,SAAS,EAAE,IAAI;IACfC,KAAK,EAAE;EACT,CAAC;EACD,GAAGC;AAC2B,CAAC,EAAE;EACjC,MAAMC,OAAO,GAAGrB,cAAc,CAAC,CAAC,CAAC;EAEjC,MAAMsB,uBAAuB,GAAGb,YAAY,GAAGK,aAAa;EAE5D,MAAMS,aAAa,GAAIC,KAA8C,IAAK;IACxE,MAAMC,OAAO,GAAGD,KAAK,CAACE,WAAW,CAACC,aAAa,CAACC,CAAC;IACjDP,OAAO,CAACQ,KAAK,GAAGJ,OAAO;IAEvB,IAAId,QAAQ,EAAE;MACZA,QAAQ,CAACa,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAMM,qBAAqB,GAAG7B,gBAAgB,CAAC,MAAM;IACnD,MAAM8B,UAAU,GAAG7B,WAAW,CAC5BmB,OAAO,CAACQ,KAAK,EACb,CAAC,CAAC,EAAEP,uBAAuB,CAAC,EAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,EACNnB,aAAa,CAAC6B,KAChB,CAAC;IAED,IAAIC,aAAwB,GAAG,CAAC,CAAC;IAEjC,IAAIjB,eAAe,CAACC,OAAO,EAAE;MAC3BgB,aAAa,GAAG;QAAE,GAAGA,aAAa;QAAEC,OAAO,EAAEH;MAAW,CAAC;IAC3D;IAEA,IAAII,UAAiB,GAAG,EAAE;IAE1B,IAAInB,eAAe,CAACE,SAAS,EAAE;MAC7BiB,UAAU,CAACC,IAAI,CAAC;QACdC,UAAU,EAAEnC,WAAW,CAAC6B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;MACtD,CAAC,CAAC;IACJ;IAEA,IAAIf,eAAe,CAACG,KAAK,EAAE;MACzBgB,UAAU,CAACC,IAAI,CAAC;QAAEjB,KAAK,EAAEjB,WAAW,CAAC6B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;MAAE,CAAC,CAAC;IACvE;IAEA,IAAII,UAAU,CAACG,MAAM,GAAG,CAAC,EAAE;MACzBL,aAAa,GAAG;QAAE,GAAGA,aAAa;QAAEM,SAAS,EAAEJ;MAAW,CAAC;IAC7D;IAEA,OAAOF,aAAa;EACtB,CAAC,CAAC;EAEF,oBACE1B,KAAA,CAACV,IAAI;IAAC2C,KAAK,EAAEC,MAAM,CAACC,aAAc;IAAAC,QAAA,gBAChCtC,IAAA,CAACN,QAAQ,CAACF,IAAI;MACZ2C,KAAK,EAAE,CACLC,MAAM,CAACG,mBAAmB,EAC1B;QAAEC,MAAM,EAAEpC;MAAa,CAAC,EACxBqB,qBAAqB,EACrBjB,oBAAoB,CACpB;MACFiC,aAAa,EAAC,UAAU;MAAAH,QAAA,EAEvBjC;IAAY,CACA,CAAC,eAEhBL,IAAA,CAACP,QAAQ;MAAA,GACHsB,KAAK;MACTT,QAAQ,EAAEY,aAAc;MACxBR,mBAAmB,EAAEA,mBAAoB;MACzCH,qBAAqB,EAAE,CACrB;QAAEmC,UAAU,EAAEtC;MAAa,CAAC,EAC5BG,qBAAqB;IACrB,CACH,CAAC;EAAA,CACE,CAAC;AAEX;AAEA,MAAM6B,MAAM,GAAG7C,UAAU,CAACoD,MAAM,CAAC;EAC/BN,aAAa,EAAE;IAAEO,QAAQ,EAAE;EAAW,CAAC;EACvCL,mBAAmB,EAAE;IACnBM,eAAe,EAAE,aAAa;IAC9BC,KAAK,EAAE,MAAM;IACbC,IAAI,EAAE,CAAC;IACPH,QAAQ,EAAE,UAAU;IACpBI,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { AnimatedHeaderFlatList } from "./AnimatedHeaderFlatList.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimatedHeaderFlatList"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,sBAAsB,QAAQ,6BAA0B","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/AnimatedHeaderFlatList.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type FlatListProps, type StyleProp, type ViewStyle } from 'react-native';
+export type AnimatedHeaderFlatListProps<T> = FlatListProps<T> & {
+    /** Height of the header in pixels */
+    headerHeight: number;
+    /** Function that renders the header component */
+    renderHeader: React.ReactNode;
+    /** Additional styles for the header container */
+    headerContainerStyle?: ViewStyle;
+    /** Additional styles for the content container */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Threshold for hiding the header (0 to 1) relative to headerHeight */
+    hideThreshold?: number;
+    scrollEventThrottle?: number;
+    /** Animation configuration */
+    animationConfig?: {
+        /** Whether to fade out the header */
+        fadeOut?: boolean;
+        /** Whether to translate the header */
+        translate?: boolean;
+        /** Whether to scale the header */
+        scale?: boolean;
+    };
+};
+/**
+ * A FlatList component with an animated header that hides on scroll.
+ * @typeparam T - Type of items in the FlatList
+ */
+export declare function AnimatedHeaderFlatList<T>({ headerHeight, renderHeader, onScroll, contentContainerStyle, headerContainerStyle, hideThreshold, scrollEventThrottle, animationConfig, ...props }: AnimatedHeaderFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimatedHeaderFlatList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedHeaderFlatList.d.ts","sourceRoot":"","sources":["../../../src/AnimatedHeaderFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,aAAa,EAGlB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,MAAM,MAAM,2BAA2B,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAC9D,qCAAqC;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,kDAAkD;IAClD,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QAChB,qCAAqC;QACrC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,sCAAsC;QACtC,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,kCAAkC;QAClC,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,EACxC,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,oBAAoB,EACpB,aAAmB,EACnB,mBAAwB,EACxB,eAIC,EACD,GAAG,KAAK,EACT,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAwEhC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { AnimatedHeaderFlatList } from './AnimatedHeaderFlatList';
+export type { AnimatedHeaderFlatListProps } from './AnimatedHeaderFlatList';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -0,0 +1,164 @@
+{
+  "name": "react-native-flatlist-collapsible-header",
+  "version": "1.0.1",
+  "description": "A React Native FlatList with collapsible header that smoothly disappears on scroll",
+  "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"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-flatlist-collapsible-header-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version",
+    "build": "tsc"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MomenMustafa45/react-native-flatlist-collapisable-header.git"
+  },
+  "author": "MomenMustafa45 <momenkara2@gmail.com> (https://github.com/MomenMustafa45)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/MomenMustafa45/react-native-flatlist-collapisable-header/issues"
+  },
+  "homepage": "https://github.com/MomenMustafa45/react-native-flatlist-collapisable-header#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-worklets": "0.5.1",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": "^4.1.1"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "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": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.0"
+  }
+}

package/src/AnimatedHeaderFlatList.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  type FlatListProps,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { FlatList } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  Extrapolation,
+} from 'react-native-reanimated';
+
+export type AnimatedHeaderFlatListProps<T> = FlatListProps<T> & {
+  /** Height of the header in pixels */
+  headerHeight: number;
+  /** Function that renders the header component */
+  renderHeader: React.ReactNode;
+  /** Additional styles for the header container */
+  headerContainerStyle?: ViewStyle;
+  /** Additional styles for the content container */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Threshold for hiding the header (0 to 1) relative to headerHeight */
+  hideThreshold?: number;
+  scrollEventThrottle?: number;
+  /** Animation configuration */
+  animationConfig?: {
+    /** Whether to fade out the header */
+    fadeOut?: boolean;
+    /** Whether to translate the header */
+    translate?: boolean;
+    /** Whether to scale the header */
+    scale?: boolean;
+  };
+};
+
+/**
+ * A FlatList component with an animated header that hides on scroll.
+ * @typeparam T - Type of items in the FlatList
+ */
+export function AnimatedHeaderFlatList<T>({
+  headerHeight,
+  renderHeader,
+  onScroll,
+  contentContainerStyle,
+  headerContainerStyle,
+  hideThreshold = 0.5,
+  scrollEventThrottle = 16,
+  animationConfig = {
+    fadeOut: true,
+    translate: true,
+    scale: false,
+  },
+  ...props
+}: AnimatedHeaderFlatListProps<T>) {
+  const scrollY = useSharedValue(0);
+
+  const calculatedHideThreshold = headerHeight * hideThreshold;
+
+  const scrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = event.nativeEvent.contentOffset.y;
+    scrollY.value = offsetY;
+
+    if (onScroll) {
+      onScroll(event);
+    }
+  };
+
+  const headerContainerStyles = useAnimatedStyle(() => {
+    const visibility = interpolate(
+      scrollY.value,
+      [0, calculatedHideThreshold],
+      [1, 0],
+      Extrapolation.CLAMP
+    );
+
+    let animatedStyle: ViewStyle = {};
+
+    if (animationConfig.fadeOut) {
+      animatedStyle = { ...animatedStyle, opacity: visibility };
+    }
+
+    let transforms: any[] = [];
+
+    if (animationConfig.translate) {
+      transforms.push({
+        translateY: interpolate(visibility, [1, 0], [0, -20]),
+      });
+    }
+
+    if (animationConfig.scale) {
+      transforms.push({ scale: interpolate(visibility, [0, 1], [0.8, 1]) });
+    }
+
+    if (transforms.length > 0) {
+      animatedStyle = { ...animatedStyle, transform: transforms };
+    }
+
+    return animatedStyle;
+  });
+
+  return (
+    <View style={styles.listContainer}>
+      <Animated.View
+        style={[
+          styles.headerViewContainer,
+          { height: headerHeight },
+          headerContainerStyles,
+          headerContainerStyle,
+        ]}
+        pointerEvents="box-none"
+      >
+        {renderHeader}
+      </Animated.View>
+
+      <FlatList<T>
+        {...props}
+        onScroll={scrollHandler}
+        scrollEventThrottle={scrollEventThrottle}
+        contentContainerStyle={[
+          { paddingTop: headerHeight },
+          contentContainerStyle,
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  listContainer: { position: 'relative' },
+  headerViewContainer: {
+    backgroundColor: 'transparent',
+    width: '100%',
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+});

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { AnimatedHeaderFlatList } from './AnimatedHeaderFlatList';
+export type { AnimatedHeaderFlatListProps } from './AnimatedHeaderFlatList';