랭킹으로 돌아가기
Brought with ❤️ by
A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.
open-sourcecontributionstickyheaderheaderparallaxhacktoberfestreact-native
주요 지표
스타 성장
스타
2k
포크
202
주간 성장
—
이슈
13
5001k1.5k2k
2019년 8월2020년 9월2021년 11월2023년 1월2024년 3월2025년 5월2026년 7월
아티팩트npm
npm install sticky-parallax-headerREADME
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.
This is how you can display header in your app:
import * as React from 'react'
import { DetailsHeaderScrollView } from 'react-native-sticky-parallax-header'
import { SafeAreaProvider } from 'react-native-safe-area-context'
const TestScreen = () => (
<SafeAreaProvider>
<DetailsHeaderScrollView {...scrollProps} {...detailsHeaderProps}>
{/** scroll view content */}
</DetailsHeaderScrollView>
</SafeAreaProvider>
)
export default TestScreen
Installation
Installation & requirements
:information_source: Library supports react-native version 0.64+
Install latest library version
$ yarn add react-native-sticky-parallax-header@rc
Install library's dependencies
yarn add react-native-reanimated react-native-safe-area-context
After installation:
- check Reanimated installation guide
- handle Pods installation with
npx pod-install - wrap your root component with
SafeAreaProviderfromreact-native-safe-area-context
Contributing
License
This library is available as open source under the terms of the MIT License.
관련 저장소