Skip to content

kanelloc/react-native-animated-header-scroll-view

Repository files navigation

React Native Animated Header ScrollView

NPM version npm npm npm runs with expo

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

React Native Animated Header ScrollView

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