xyztlp / react-native-animated-header-scroll-view Goto Github PK

View Code? Open in Web Editor NEW

React native animated header ScrollView. Animates an image or a custom component into a navbar header.

License: MIT License

JavaScript 10.55% TypeScript 89.45%

react-native-animated-header-scroll-view's Introduction

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