/sticky-parallax-header

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

Primary LanguageTypeScriptMIT LicenseMIT

Sticky Parallax Header


Brought with  ❤️ by   Netguru logo

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
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:

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.