{"id":13601956,"url":"https://github.com/iyegoroff/react-native-collapsible-header-views","last_synced_at":"2025-04-05T15:06:55.140Z","repository":{"id":46937337,"uuid":"148249563","full_name":"iyegoroff/react-native-collapsible-header-views","owner":"iyegoroff","description":"ScrollView, FlatList, SectionList with collapsible headers + HOC for wrapping custom scrollables","archived":false,"fork":false,"pushed_at":"2022-12-03T08:48:59.000Z","size":14877,"stargazers_count":199,"open_issues_count":13,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T14:07:16.863Z","etag":null,"topics":["collapsible","header","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iyegoroff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-11T02:37:19.000Z","updated_at":"2024-11-19T11:55:50.000Z","dependencies_parsed_at":"2023-01-23T04:31:55.382Z","dependency_job_id":null,"html_url":"https://github.com/iyegoroff/react-native-collapsible-header-views","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-collapsible-header-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-collapsible-header-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-collapsible-header-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iyegoroff%2Freact-native-collapsible-header-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iyegoroff","download_url":"https://codeload.github.com/iyegoroff/react-native-collapsible-header-views/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353745,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collapsible","header","react-native"],"created_at":"2024-08-01T18:01:10.631Z","updated_at":"2025-04-05T15:06:55.124Z","avatar_url":"https://github.com/iyegoroff.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-collapsible-header-views\n[![npm version](https://badge.fury.io/js/react-native-collapsible-header-views.svg?t=1495378566925)](https://badge.fury.io/js/react-native-collapsible-header-views)\n[![CircleCI](https://circleci.com/gh/iyegoroff/react-native-collapsible-header-views.svg?style=svg)](https://circleci.com/gh/iyegoroff/react-native-collapsible-header-views)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/standard/standard)\n[![Dependency Status](https://david-dm.org/iyegoroff/react-native-collapsible-header-views.svg?t=1495378566925)](https://david-dm.org/iyegoroff/react-native-collapsible-header-views)\n[![devDependencies Status](https://david-dm.org/iyegoroff/react-native-collapsible-header-views/dev-status.svg)](https://david-dm.org/iyegoroff/react-native-collapsible-header-views?type=dev)\n[![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](src/index.d.ts)\n[![npm](https://img.shields.io/npm/l/express.svg?t=1495378566925)](https://www.npmjs.com/package/react-native-collapsible-header-views)\n\nScrollView, FlatList, SectionList with collapsible headers + HOC for wrapping custom scrollables\n\n## Getting started\n\n`$ npm install react-native-collapsible-header-views --save`\n\n## Demo\n\n Android                                       |  iOS\n:---------------------------------------------:|:---------------------------------------------:\n\u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-collapsible-header-views/master/demo/android.gif\" align=\"left\" height=\"500\"\u003e  |  \u003cimg src=\"https://raw.githubusercontent.com/iyegoroff/react-native-collapsible-header-views/master/demo/ios.gif\" align=\"right\" height=\"500\"\u003e\n\n## Example\n\n```javascript\nimport * as React from 'react';\nimport { View, Platform } from 'react-native';\nimport { CollapsibleHeaderScrollView } from 'react-native-collapsible-header-views';\n\nexport const Basic = () =\u003e (\n  \u003cCollapsibleHeaderScrollView\n    CollapsibleHeaderComponent={\u003cView style={{ backgroundColor: 'white' }} /\u003e}\n    headerHeight={100}\n    statusBarHeight={Platform.OS === 'ios' ? 20 : 0}\n  \u003e\n    \u003cView style={{ height: 2000, backgroundColor: 'wheat' }} /\u003e\n  \u003c/CollapsibleHeaderScrollView\u003e\n);\n```\n\n## Description\n\nLibrary exports three components `CollapsibleHeaderScrollView`, `CollapsibleHeaderFlatList`,\n`CollapsibleHeaderSectionList` and a HOC `withCollapsibleHeader` for wrapping custom scrollable\ncomponents. Provided components support all props and instance methods of corresponding wrapped\ncomponents. Note that components are also wrapped with `Animated.createAnimatedComponent` under the\nhood.\n\n## Reference\n\n### Props\n\n#### CollapsibleHeaderScrollViewProps, CollapsibleHeaderFlatListProps, CollapsibleHeaderSectionListProps\n\n- `CollapsibleHeaderComponent: React.ReactElement\u003cunknown\u003e | React.ComponentType\u003cCollapsibleHeaderProps\u003e` -\n  React element or component/function that receives `CollapsibleHeaderProps` object. \u003cstrong\u003eRequired\u003c/strong\u003e;\n- `headerHeight: number` - height of `CollapsibleHeaderComponent`. \u003cstrong\u003eRequired\u003c/strong\u003e;\n- `statusBarHeight?: number` - height of status bar. Defaults to `0`;\n- `headerContainerBackgroundColor?: string` - background color for `CollapsibleHeaderComponent` and\n  status bar container. Defaults to `'white'`;\n- `disableHeaderSnap?: boolean` - pass `true` to disable header snap animations. Defaults to `false`;\n- `headerAnimationDuration?: number` - duration of snap and `showHeader`, `hideHeader` animations.\n  Defaults to `350`;\n- `clipHeader?: boolean` - if `true` header will be clipped with `overflow: 'hidden'` style.\n\nAlso some of `ScrollView` props have new defaults: `bounces` defaults to `false`, `overScrollMode`\nto `'never'` and `scrollEventThrottle` to `1`.\n\n#### CollapsibleHeaderProps\n\n- `interpolatedHeaderTranslation: (from: number, to: number) =\u003e Animated.AnimatedInterpolation` -\n  creates new `AnimatedInterpolation` object, whose input range corresponds to header translation and\n  output range is specified by `from` and `to` params. Can be used for custom animations, like setting\n  opacity etc.;\n- `showHeader: (options: { animated: boolean } | unknown) =\u003e void` - pushes header down with animation\n  enabled by default;\n- `hideHeader: (options: { animated: boolean } | unknown) =\u003e void` - pulls header up with animation\n  enabled by default.\n\n### Methods\n\n#### CollapsibleHeaderScrollView, CollapsibleHeaderFlatList, CollapsibleHeaderSectionList\n\n- `animatedComponent: () =\u003e any | null` - returns result of `Animated.createAnimatedComponent` applied\n  to original component;\n- `showHeader: (options: { animated: boolean } | unknown) =\u003e void` - pushes header down with animation\n  enabled by default;\n- `hideHeader: (options: { animated: boolean } | unknown) =\u003e void` - pulls header up with animation\n  enabled by default.\n\n#### withCollapsibleHeader\n\n- `function withCollapsibleHeader\u003cT extends ScrollViewProps\u003e(Component: React.ComponentClass\u003cT\u003e): React.ComponentClass\u003cCollapsibleHeaderViewProps\u003cT\u003e\u003e` -\n  creates new component with collapsible header, it is assumed that input component has all of `ScrollView` props.\n\n\n## Credits\n\n- Key concepts were taken from [collapsible-navbar](https://github.com/janicduplessis/collapsible-navbar)\n  demo by @janicduplessis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-collapsible-header-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiyegoroff%2Freact-native-collapsible-header-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiyegoroff%2Freact-native-collapsible-header-views/lists"}