netguru / sticky-parallax-header

A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.

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  |  Preview  |  Installation  |  Contributing  

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

ℹ️ 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 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.