React Native Animated Header ScrollView

Performant animated scroll view components that:

• 🔥Support FlatList and ScrollView scrolling interactions.
• 🔥Animate an image or a custom component into a navbar header
• 🔥Support bounce animation on scroll down
• 🔥Support 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>
  );
};

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());
  const renderItem = ({ item }: any) => {
    return (
      <View>
        <Card item={item} />
      </View>
    );
  };

  return (
    <AnimatedFlatList
      headerImage={require('../../assets/cabin.jpg')}
      data={data}
      renderItem={renderItem}
      HeaderNavbarComponent={<HeaderNavBar />}
      TopNavBarComponent={<TopNavBar />}
    />
  );
};

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
headerBackgroundColor	Background color of the top navbar. Default value is '#fff' for Light mode and '#121212' for Dark mode	string	false
borderBottomColor	Color of the bottom border of the top navbar. Default value is 'rgb(216, 216, 216)' for Light mode and '#222' for Dark mode.	string	false
headerImage	Image header source	ImageSourcePropType	false
disableScale	Disables header scaling when scrolling. Default value is false	boolean	false
imageStyle	Image styles	StyleProp	false

Contributing

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

License

MIT