{"id":37975308,"url":"https://github.com/pawicao/react-native-header-motion","last_synced_at":"2026-04-02T18:01:19.578Z","repository":{"id":332211543,"uuid":"1126747341","full_name":"pawicao/react-native-header-motion","owner":"pawicao","description":"High-level APIs for orchestrating header motion driven by scroll — built on top of React Native Reanimated.","archived":false,"fork":false,"pushed_at":"2026-03-25T23:48:51.000Z","size":1399,"stargazers_count":161,"open_issues_count":8,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-26T21:54:58.664Z","etag":null,"topics":["animations","header","navigation","react","react-native","reanimated"],"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/pawicao.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-02T14:01:30.000Z","updated_at":"2026-03-25T16:17:25.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pawicao/react-native-header-motion","commit_stats":null,"previous_names":["pawicao/react-native-header-motion"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/pawicao/react-native-header-motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawicao%2Freact-native-header-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawicao%2Freact-native-header-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawicao%2Freact-native-header-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawicao%2Freact-native-header-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pawicao","download_url":"https://codeload.github.com/pawicao/react-native-header-motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawicao%2Freact-native-header-motion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animations","header","navigation","react","react-native","reanimated"],"created_at":"2026-01-16T18:29:13.336Z","updated_at":"2026-04-02T18:01:19.566Z","avatar_url":"https://github.com/pawicao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Header Motion\n\nScroll-driven animated headers for React Native.\n\nReact Native Header Motion gives you the plumbing for collapsible, progress-driven headers without forcing a prebuilt UI on you. It measures the header, derives a shared `progress` value, keeps multiple scrollables in sync, and bridges that state into navigation-rendered headers when needed.\n\nBuilt on top of:\n\n- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)\n- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)\n- [React Native Worklets](https://docs.swmansion.com/react-native-worklets/docs/)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/b673349a-f26a-4cc8-bfe1-60d77deb4390\" width=\"70%\" /\u003e\n\u003c/div\u003e\n\n## Documentation\n\nFull documentation lives here:\n\n- [Docs home](https://pawicao.github.io/react-native-header-motion/)\n- [Overview](https://pawicao.github.io/react-native-header-motion/docs/overview)\n- [Installation](https://pawicao.github.io/react-native-header-motion/docs/installation)\n- [Quick Start](https://pawicao.github.io/react-native-header-motion/docs/quick-start)\n- [Guides](https://pawicao.github.io/react-native-header-motion/docs/guides/dynamic-header-measurement)\n- [API Reference](https://pawicao.github.io/react-native-header-motion/docs/api/header-motion)\n\n## What it helps with\n\n- Scroll-driven animated headers\n- Shared header state across tabs, pagers, and multiple scrollables\n- Navigation-rendered headers in Expo Router or React Navigation\n- Custom scrollables via `createHeaderMotionScrollable()`\n- Optional header panning\n\n## What it is not\n\n- A fully styled header component\n- A page layout framework\n- A general-purpose animation abstraction on top of Reanimated\n\n## Installation\n\n```bash\nnpm install react-native-header-motion\n```\n\nPeer dependencies:\n\n- `react-native-reanimated@^4.0.0`\n- `react-native-gesture-handler@^2.0.0`\n- `react-native-worklets@\u003e=0.4.0`\n\nThen complete the standard setup for:\n\n- [Reanimated and Worklets](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation)\n- [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)\n\nFor other package managers and full setup notes, see the [installation guide](https://pawicao.github.io/react-native-header-motion/docs/installation).\n\n## Quick example\n\n```tsx\nimport HeaderMotion from 'react-native-header-motion';\nimport { Stack } from 'expo-router';\nimport { View } from 'react-native';\n\nexport default function Screen() {\n  return (\n    \u003cHeaderMotion\u003e\n      \u003cHeaderMotion.Bridge\u003e\n        {(ctx) =\u003e (\n          \u003cStack.Screen\n            options={{\n              header: () =\u003e (\n                \u003cHeaderMotion.NavigationBridge value={ctx}\u003e\n                  \u003cAppHeader /\u003e\n                \u003c/HeaderMotion.NavigationBridge\u003e\n              ),\n            }}\n          /\u003e\n        )}\n      \u003c/HeaderMotion.Bridge\u003e\n\n      \u003cHeaderMotion.ScrollView\u003e{/* content */}\u003c/HeaderMotion.ScrollView\u003e\n    \u003c/HeaderMotion\u003e\n  );\n}\n\nfunction AppHeader() {\n  return (\n    \u003cHeaderMotion.Header\u003e\n      \u003cHeaderMotion.Header.Dynamic\u003e\n        \u003cView\u003e{/* collapsible content */}\u003c/View\u003e\n      \u003c/HeaderMotion.Header.Dynamic\u003e\n\n      \u003cView\u003e{/* sticky content */}\u003c/View\u003e\n    \u003c/HeaderMotion.Header\u003e\n  );\n}\n```\n\nIn a real header, use `useMotionProgress()` to drive your Reanimated styles. See the [Quick Start](https://pawicao.github.io/react-native-header-motion/docs/quick-start) for the full walkthrough, animation examples, and styling details.\n\n## Version notes\n\n- Upgrading from `v0.3.x`? Read [MIGRATION-v1.md](./MIGRATION-v1.md).\n- Need the old API docs? See the [README on branch `v0`](https://github.com/pawicao/react-native-header-motion/blob/v0/README.md).\n\n## Example app\n\nThe repository includes an Expo Router example app covering simple headers, navigation bridging, shared headers across pages, custom scrollables, overscroll, pull to refresh, and more.\n\nSee:\n\n- [`example/`](./example/)\n- [Example app docs](https://pawicao.github.io/react-native-header-motion/docs/other/example-app)\n\n## Contributing\n\n- [Contributing guide](./CONTRIBUTING.md)\n- [Code of conduct](./CODE_OF_CONDUCT.md)\n\n## License\n\nMIT\n\nMade with [`create-react-native-library`](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawicao%2Freact-native-header-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawicao%2Freact-native-header-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawicao%2Freact-native-header-motion/lists"}