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

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

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