React Native Animated Header ScrollView

A performant animated ScrollView component that:

• 🔥Animates an image or a custom component 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, TopNavBar, HeaderNavBar } from '../components';
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
import * as React from 'react';

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

You can find a set of detailed examples here

Also a running snack here

Props

Prop name	Description	Type	Required
TopNavBarComponent	Rendered on top of the screen as a navbar when scrolling to the top	JSX.Element	true
HeaderComponent	A component to use on top of header image. It can also be used without header image to render a custom component as header.	JSX.Element	false
HeaderNavbarComponent	Rendered on top of the header. Transitions to TopNavbarComponent as you scroll	JSX.Element	false
headerMaxHeight	Height of the header (headerImage or HeaderComponent). Default value is 300	number	false
topBarHeight	Height of the top navbar. Default value is 90	number	false
headerImage	Image header source	ImageSourcePropType	false
disableScale	Disables header scaling when scrolling. Default value is false	boolean	false

Contributing

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

License

MIT