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 |
| :----------------------------------------------------: | :----------------------------------------------------: | :------------------------------------------------------: |
| !Tabbed Header Gif | !Avatar Header Gif | !Details Header Gif |

In Use

Check the live demo on Expo Snack here.

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

$3

: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
- handle Pods installation with npx pod-install
- wrap your root component with SafeAreaProvider from react-native-safe-area-context`

Contributing

Contributing guidelines

License

This library is available as open source under the terms of the MIT License.