React Native Animated Header ScrollView

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

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