{"id":26140617,"url":"https://github.com/r0b0t3d/react-native-collapsible","last_synced_at":"2026-03-11T14:09:55.962Z","repository":{"id":45596838,"uuid":"378661764","full_name":"r0b0t3d/react-native-collapsible","owner":"r0b0t3d","description":"Fully customizable collapsible views","archived":false,"fork":false,"pushed_at":"2023-10-16T04:40:30.000Z","size":10026,"stargazers_count":48,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T01:13:27.667Z","etag":null,"topics":["collapsible","collapsible-accordion","collapsible-headers"],"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/r0b0t3d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-20T14:13:06.000Z","updated_at":"2025-04-11T17:33:21.000Z","dependencies_parsed_at":"2024-06-19T22:50:40.700Z","dependency_job_id":"70e7eeb6-2aa2-4e69-ad88-c55ac3c8cc72","html_url":"https://github.com/r0b0t3d/react-native-collapsible","commit_stats":{"total_commits":114,"total_committers":2,"mean_commits":57.0,"dds":0.01754385964912286,"last_synced_commit":"3eec1351827646f2d820fb20e839b800aecaa16c"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r0b0t3d%2Freact-native-collapsible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r0b0t3d%2Freact-native-collapsible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r0b0t3d%2Freact-native-collapsible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r0b0t3d%2Freact-native-collapsible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r0b0t3d","download_url":"https://codeload.github.com/r0b0t3d/react-native-collapsible/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804825,"owners_count":21164135,"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","collapsible-accordion","collapsible-headers"],"created_at":"2025-03-11T02:54:32.613Z","updated_at":"2026-03-11T14:09:50.931Z","avatar_url":"https://github.com/r0b0t3d.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @r0b0t3d/react-native-collapsible\n\nFully customizable collapsible views\n\n![alt text](pictures/intro.gif 'Intro')\n\n## Installation\n\n```sh\nyarn add @r0b0t3d/react-native-collapsible\n```\n\nI am using `reanimated 2` for animation. So you should install and follow instruction here to setup your project [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/installation)\n\n## Key features\n1️⃣ Support FlatList/ScrollView\n2️⃣ Support sticky header\n3️⃣ Can have multiple sticky headers\n4️⃣ Easy to customize\n\n## Usage\n### 1. Basic\n```jsx\nimport {\n  CollapsibleContainer,\n  CollapsibleFlatList,\n  CollapsibleScrollView,\n} from '@r0b0t3d/react-native-collapsible';\n\n// ...\nconst MyComponent = () =\u003e {\n  const {\n    collapse,   // \u003c-- Collapse header\n    expand,     // \u003c-- Expand header\n    scrollY,    // \u003c-- Animated scroll position. In case you need to do some animation in your header or somewhere else\n  } = useCollapsibleContext();\n\n  return (\n    \u003cCollapsibleContainer\u003e          // 1️⃣ (Required) Outermost container \n      \u003cCollapsibleHeaderContainer\u003e  // 2️⃣ (Required) Header view\n        \u003c!-- Your header view --\u003e\n        \u003cStickyView\u003e                // 3️⃣ Sticky view\n          \u003c!-- Your sticky view goes here --\u003e\n        \u003c/StickyView\u003e\n      \u003c/CollapsibleHeaderContainer\u003e\n      \u003cCollapsibleFlatList          // 4️⃣ (Required) Your FlatList/ScrollView\n        data={data}\n        renderItem={renderItem}\n        headerSnappable={false} // \u003c-- should header auto snap when you release the finger\n      /\u003e\n    \u003c/CollapsibleContainer\u003e\n  )\n}\n\nexport default withCollapsibleContext(MyComponent); // 5️⃣ (Required)wrap your component with `withCollapsibleContext`\n```\n\n### 2. Advance\nWe support multiple `CollapsibleHeaderContainer` and `StickyView`. It come useful in case you need to break your code into smaller component.\n\n`Parent.tsx`\n```jsx\nconst Parent = () =\u003e {\n  const [tabIndex, setTabIndex] = useState(0)\n\n  return (\n    \u003cCollapsibleContainer\u003e\n      \u003cCollapsibleHeaderContainer\u003e\n        \u003c!-- Your header view --\u003e\n        \u003cStickyView\u003e\n          \u003cTabView currentTab={tabIndex} onTabChange={setTabIndex} /\u003e\n        \u003c/StickyView\u003e\n      \u003c/CollapsibleHeaderContainer\u003e\n\n      {tabIndex === 0 \u0026\u0026 \u003cFirstTab /\u003e}\n      {tabIndex === 1 \u0026\u0026 \u003cSecondTab /\u003e}\n    \u003c/CollapsibleContainer\u003e\n  )\n}\n```\n\n`FirstTab.tsx`\n```jsx\nconst FirstTab = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cCollapsibleHeaderContainer\u003e\n        \u003c!-- 😍 You can have another headerview in each tab where you can add another StickyView there --\u003e\n        \u003cStickyView\u003e\n          \u003c!-- Your sticky view goes here --\u003e\n        \u003c/StickyView\u003e\n        \u003cView /\u003e\n        \u003cStickyView\u003e\n          \u003c!-- 🚀 Bonus, multiple sticky view --\u003e\n        \u003c/StickyView\u003e\n      \u003c/CollapsibleHeaderContainer\u003e\n      \u003cCollapsibleFlatList\n        data={data}\n        renderItem={renderItem}\n      /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Showcases\n```\nNote: Feel free to add your showcase here by a PR\n```\n| App         | Gif         |\n| ----------- | ----------- |\n| [ANU Global](https://apps.apple.com/us/app/anu-global/id1540735849) | \u003cimg src=\"/pictures/showcases/anu.gif\" height=\"350\"/\u003e |\n\n## Breaking changes\n\n### 1.0.0\n\n- Removed\n\n  - `persistHeaderHeight`\n  - `contentMinHeight`\n\n- Added\n  - `CollapsibleContainer`\n  - `StickyView`\n\n## Tips\n\n#### 1. Trigger scroll when scroll inside `CollapsibleHeaderContainer`\n\n- If your header doesn't contains touchable component, try `pointerEvents=\"none\"`\n\n```jsx\n\u003cCollapsibleHeaderContainer\u003e\n  \u003cView pointerEvents=\"none\"\u003e\n    \u003cText\u003eHeader\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/CollapsibleHeaderContainer\u003e\n```\n\n- If your header contains touchable componet, try to set `pointerEvents=\"box-none\"` for every nested views that contains touchable, otherwise use `pointerEvents=\"none\"`\n\n```jsx\n\u003cCollapsibleHeaderContainer\u003e\n    \u003cView pointerEvents=\"box-none\"\u003e // \u003c-- this is parent view\n        \u003cView pointerEvents=\"none\"\u003e // \u003c-- this view doesn't contain touchable component\n            \u003cText\u003eHeader\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView pointerEvents=\"box-none\"\u003e // \u003c-- this view contain touchable component\n            \u003cView pointerEvents=\"none\"\u003e\n                \u003cText\u003eSome text\u003c/Text\u003e\n            \u003c/View\u003e\n            \u003cTouchableOpacity\u003e\n                \u003cText\u003eButton\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n        \u003c/View\u003e\n    \u003c/View\u003e\n\u003c/CollapsibleHeaderContainer\u003e\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr0b0t3d%2Freact-native-collapsible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr0b0t3d%2Freact-native-collapsible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr0b0t3d%2Freact-native-collapsible/lists"}