Skip to content
A React Native component that creates a Apple-esque large header that fades in a smaller header as you scroll.
JavaScript
Branch: master
Clone or download

Latest commit

jonsamp Merge pull request #4 from satya164/patch-1
Add info for using it with React Navigation
Latest commit 406a309 Mar 18, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore ignore node modules and init flow Oct 1, 2018
LICENSE initial Oct 1, 2018
README.md Add info for using it with React Navigation Jan 17, 2020
index.js updates read me Dec 7, 2018
package.json valid version Dec 7, 2018
styles.js breaking updates Dec 7, 2018
yarn.lock update deps Dec 7, 2018

README.md

react-native-header-scroll-view

A React Native component that mimicks Apple's large header that fades in a smaller header as you scroll, and slightly expands as you scroll up. You can see this effect in Apple's Messages, Books, etc.

header scroll view gif

Installation

# yarn
yarn add react-native-header-scroll-view

# npm
npm install react-native-header-scroll-view --save

Then, import with:

import HeaderScrollView from 'react-native-header-scroll-view';

Usage

Example usage:

import React, { Component } from 'react';
import { Text } from 'react-native';
import HeaderScrollView from 'react-native-header-scroll-view';

class App extends Component {
  render() {
    return (
      <HeaderScrollView title="For You">
        <Text>...</Text>
      </HeaderScrollView>
    );
  }
}

To use this component with React Navigation, you'd want to disable the built-in header. There are 2 ways to disable the header in React Navigation:

Disable the default header for one screen:

static navigationOptions = {
  headerShown: false
};

Disable header globally in createStackNavigator:

const Home = createStackNavigator(
  {
    ExampleScreen1,
    ExampleScreen1,
  },
  {
    headerMode: 'none',
  }
);

Props

For default Apple-style settings, you only need to provide:

Prop Type Description
title string The title of the header. This will show up as large text inside the scroll view and then fade in as the smaller text inside the header.

From there, you can customize this component to get exactly what you want.

Prop Type Description
titleStyle React Native style or Object Styles the large header title component inside the scroll view.
containerStyle React Native style or Object Styles the entire container wrapping the header and the scrollview.
headerContainerStyle React Native style or Object Styles the container of the header component that appears after scrolling.
headerComponentContainerStyle React Native style or Object Styles the component inside the header. Anything within this style will fade in and out as the scroll position changes.
headlineStyle React Native style or Object Styles the header text inside the header that appears after scrolling.
scrollContainerStyle React Native style or Object Styles the scroll view component.
fadeDirection String When the header component fades, it can fade 'up' or 'down',
scrollViewProps Object Pass any extra props to the scrollView.

Visual reference of the styles containers:

screen shot 2018-12-07 at 10 55 25 am

You can’t perform that action at this time.