https://github.com/pawicao/react-native-header-motion
High-level APIs for orchestrating header motion driven by scroll — built on top of React Native Reanimated.
https://github.com/pawicao/react-native-header-motion
animations header navigation react react-native reanimated
Last synced: 3 months ago
JSON representation
High-level APIs for orchestrating header motion driven by scroll — built on top of React Native Reanimated.
- Host: GitHub
- URL: https://github.com/pawicao/react-native-header-motion
- Owner: pawicao
- License: mit
- Created: 2026-01-02T14:01:30.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-03-25T23:48:51.000Z (3 months ago)
- Last Synced: 2026-03-26T21:54:58.664Z (3 months ago)
- Topics: animations, header, navigation, react, react-native, reanimated
- Language: TypeScript
- Homepage:
- Size: 1.33 MB
- Stars: 161
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Header Motion
Scroll-driven animated headers for React Native.
React 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.
Built on top of:
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)
- [React Native Worklets](https://docs.swmansion.com/react-native-worklets/docs/)
## Documentation
Full documentation lives here:
- [Docs home](https://pawicao.github.io/react-native-header-motion/)
- [Overview](https://pawicao.github.io/react-native-header-motion/docs/overview)
- [Installation](https://pawicao.github.io/react-native-header-motion/docs/installation)
- [Quick Start](https://pawicao.github.io/react-native-header-motion/docs/quick-start)
- [Guides](https://pawicao.github.io/react-native-header-motion/docs/guides/dynamic-header-measurement)
- [API Reference](https://pawicao.github.io/react-native-header-motion/docs/api/header-motion)
## What it helps with
- Scroll-driven animated headers
- Shared header state across tabs, pagers, and multiple scrollables
- Navigation-rendered headers in Expo Router or React Navigation
- Custom scrollables via `createHeaderMotionScrollable()`
- Optional header panning
## What it is not
- A fully styled header component
- A page layout framework
- A general-purpose animation abstraction on top of Reanimated
## Installation
```bash
npm install react-native-header-motion
```
Peer dependencies:
- `react-native-reanimated@^4.0.0`
- `react-native-gesture-handler@^2.0.0`
- `react-native-worklets@>=0.4.0`
Then complete the standard setup for:
- [Reanimated and Worklets](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation)
- [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)
For other package managers and full setup notes, see the [installation guide](https://pawicao.github.io/react-native-header-motion/docs/installation).
## Quick example
```tsx
import HeaderMotion from 'react-native-header-motion';
import { Stack } from 'expo-router';
import { View } from 'react-native';
export default function Screen() {
return (
{(ctx) => (
(
),
}}
/>
)}
{/* content */}
);
}
function AppHeader() {
return (
{/* collapsible content */}
{/* sticky content */}
);
}
```
In 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.
## Version notes
- Upgrading from `v0.3.x`? Read [MIGRATION-v1.md](./MIGRATION-v1.md).
- Need the old API docs? See the [README on branch `v0`](https://github.com/pawicao/react-native-header-motion/blob/v0/README.md).
## Example app
The repository includes an Expo Router example app covering simple headers, navigation bridging, shared headers across pages, custom scrollables, overscroll, pull to refresh, and more.
See:
- [`example/`](./example/)
- [Example app docs](https://pawicao.github.io/react-native-header-motion/docs/other/example-app)
## Contributing
- [Contributing guide](./CONTRIBUTING.md)
- [Code of conduct](./CODE_OF_CONDUCT.md)
## License
MIT
Made with [`create-react-native-library`](https://github.com/callstack/react-native-builder-bob)