rn-sticky-parallax-header

Stickyheader.js

Brought with  ❤️ by  

Introduction

Stickyheader.js is a simple React Native library, enabling to create a fully custom header for your iOS and Android apps.

Documentation  |  Preview  |  Installation  |  Contributing  |  Contributors

Documentation

Read the full Docs at: https://netguru.github.io/sticky-parallax-header/

Preview

Features

Stickyheader.js 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.

Predefined headers can be accessed through headerType="HeaderName" property, each header can be configured according to your demands using the wide amount of properties. You can change all of them, or use it right out of the box with as little changes as possible to use it for your needs.

This is how you can add them in your app:

import React from 'react';
import StickyParallaxHeader from 'react-native-sticky-parallax-header';

const TestScreen = () => (
  <>
    <StickyParallaxHeader headerType="TabbedHeader" />
    {/* <StickyParallaxHeader headerType="AvatarHeader" /> */}
    {/* <StickyParallaxHeader headerType="DetailsHeader" /> */}
  </>
);

export default TestScreen;

Installation

For React Native >= 0.60.0 use version 0.0.60 and above, for previous React Native versions use 0.0.59

Installation for React Native >= 0.60.0

Add latest package version

$ yarn add react-native-sticky-parallax-header

Installation for React Native < 0.60.0

Installation steps for React Native < 0.60.0

Contributing

Contributing guidelines

Contributors

License

The gem is available as open source under the terms of the MIT License.