React Native Animated Header ScrollView

NPM version npm npm runs with expo

A performant animated ScrollView component that:

  • šŸ”„Animates an image into a navbar header
  • šŸ”„Supports bounce animation on scroll down
  • šŸ”„Supports both iOS and Android devices

React Native Animated Header ScrollView

Installation

$ npm install @kanelloc/react-native-animated-header-scroll-view

Usage

import { Card, Header, OverflowHeaderComponent } from '../components';
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
import * as React from 'react';
import { Platform } from 'react-native';

export const App = () => {
  const data = Array.from(Array(20).keys());
  return (
    <AnimatedScrollView
      OverflowHeaderComponent={<OverflowHeaderComponent />}
      HeaderComponent={<Header />}
      headerImage={require('../../assets/cabin.jpg')}
    >
      {data.map((e) => {
        return <Card item={e} key={e} />;
      })}
    </AnimatedScrollView>
  );
};

You can find a set of detailed examples here.

Props

Prop name Description Type Required
HeaderComponent A header component to show a navbar when scrolling to the top JSX.Element true
OverflowHeaderComponent An overflow header component to show a navbar when scrolling to the bottom JSX.Element false
headerImgHeight Height of the scrollable image. Default value is 300 number false
headerHeight Height of the navbar header. Default value is 90 number false
headerImage Image header source ImageSourcePropType false

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

GitHub

View Github