react-native-header-scroll-view

🚨 DEPRECATED and unmaintained 🚨

This library is an emulation of native iOS large headers. Now you can access the real thing with react-native-screens/native-stack. This library is a drop-in replacement for React Navigation's stack view, and includes direct access to native large headers/transitions etc. It has awesome performance.

You can see it in action in this app: github, download on the app stores.

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.

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:

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

Visual reference of the styles containers: