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 | | topBarElevation | [ANDROID ONLY] Elevation of the top navbar. Default value is 0 | number | 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