Repository files navigation

🚨 DEPRECATED and unmaintained 🚨

This library is an emulation of native iOS large headers. Now you can access the real thing withreact-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.

# yarnyarn add react-native-header-scroll-view# npmnpm install react-native-header-scroll-view --save

Then, import with:

importHeaderScrollViewfrom'react-native-header-scroll-view';

Example usage:

importReact,{Component}from'react';import{Text}from'react-native';importHeaderScrollViewfrom'react-native-header-scroll-view';classAppextendsComponent{render(){return(<HeaderScrollViewtitle="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:

staticnavigationOptions={headerShown:false};

Disable header globally increateStackNavigator:

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

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: