NPM version npm npm npm runs with expo
Performant animated scroll view components that:
- 🔥Support
FlatListandScrollViewscrolling 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
$ npm install @kanelloc/react-native-animated-header-scroll-view
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
| 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 |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT