https://github.com/netguru/sticky-parallax-header
A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.
https://github.com/netguru/sticky-parallax-header
contribution hacktoberfest header open-source parallax react-native stickyheader
Last synced: 19 days ago
JSON representation
A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.
- Host: GitHub
- URL: https://github.com/netguru/sticky-parallax-header
- Owner: netguru
- License: mit
- Created: 2019-04-30T07:18:03.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T15:32:40.000Z (7 months ago)
- Last Synced: 2025-04-24T02:12:16.504Z (20 days ago)
- Topics: contribution, hacktoberfest, header, open-source, parallax, react-native, stickyheader
- Language: TypeScript
- Homepage: https://netguru.github.io/sticky-parallax-header/
- Size: 321 MB
- Stars: 2,011
- Watchers: 26
- Forks: 193
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - sticky-parallax-header
README
Sticky Parallax Header
Brought with ❤️ by 
# Introduction
react-native-sticky-parallax-header is a simple React Native library, enabling to create a fully custom header layout for your iOS, Android and web apps.
## Documentation
Read the full Docs at: https://netguru.github.io/sticky-parallax-header/
## Preview
Sticky Parallax Header ships with 3 different use cases for sticky headers and a possibility to create fully custom header!
| Tabbed Header | Avatar Header | Details Header |
| :----------------------------------------------------: | :----------------------------------------------------: | :------------------------------------------------------: |
|  |  |  |
## In Use
**Check the live demo on Expo Snack [here](https://snack.expo.dev/@netguru_rnd/sticky-parallax-header-example).**
This is how you can display header in your app:
```tsx
import * as React from 'react'
import { DetailsHeaderScrollView } from 'react-native-sticky-parallax-header'
import { SafeAreaProvider } from 'react-native-safe-area-context'
const TestScreen = () => (
{/** scroll view content */}
)
export default TestScreen
```
## Installation
### Installation & requirements
:information_source: Library supports react-native version 0.64+
#### Install latest library version
```sh
$ yarn add react-native-sticky-parallax-header@rc
```
#### Install library's dependencies
```sh
yarn add react-native-reanimated react-native-safe-area-context
```
After installation:
- check Reanimated installation [guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
- handle Pods installation with `npx pod-install`
- wrap your root component with `SafeAreaProvider` from `react-native-safe-area-context`
Contributing
[Contributing guidelines](CONTRIBUTING.md)
# License
This library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).