6
React native animated header scroll view
source link: https://reactnativeexample.com/react-native-animated-header-scroll-view/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Animated Header ScrollView
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
Installation
$ npm install @kanelloc/react-native-animated-header-scroll-viewUsage
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 (
<AnimatedScrollView
OverflowHeaderComponent={<OverflowHeaderComponent />}
HeaderComponent={<Header />}
headerImage={require('../../assets/cabin.jpg')}
>
{data.map((e) => {
return <Card item={e} key={e} />;
})}
</AnimatedScrollView>
);
};You can find a set of detailed examples here.
Props
| 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 |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK