React Native Animated Header ScrollView

NPM version npm npm runs with expo

A performant animated ScrollView component that:

  • ?Animates an image into a navbar header
  • ?Supports bounce animation on scroll down
  • ?Supports both iOS and Android devices

React Native Animated Header ScrollView


$ npm install @kanelloc/react-native-animated-header-scroll-view


import { Card, Header, OverflowHeaderComponent } from '../components';
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
import * as React from 'react';
import { Platform } from 'react-native';

export const App = () => {
  const data = Array.from(Array(20).keys());
  return (
      OverflowHeaderComponent={<OverflowHeaderComponent />}
      HeaderComponent={<Header />}
      { => {
        return <Card item={e} key={e} />;

You can find a set of detailed examples here.


Prop name Description Type Required
HeaderComponent A header component to show a navbar when scrolling to the top JSX.Element true
OverflowHeaderComponent An overflow header component to show a navbar when scrolling to the bottom JSX.Element false
headerImgHeight Height of the scrollable image. Default value is 300 number false
headerHeight Height of the navbar header. Default value is 90 number false
headerImage Image header source ImageSourcePropType false


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




View Github