https://github.com/gemcook/react-native-animated-scroll-view
A component that animates the header when the content is scrolled.
https://github.com/gemcook/react-native-animated-scroll-view
Last synced: about 1 year ago
JSON representation
A component that animates the header when the content is scrolled.
- Host: GitHub
- URL: https://github.com/gemcook/react-native-animated-scroll-view
- Owner: gemcook
- License: mit
- Created: 2021-04-14T01:33:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T23:35:51.000Z (about 1 year ago)
- Last Synced: 2025-04-10T00:29:24.149Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.68 MB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-animated-scroll-view
A component that animates the header when the content is scrolled.
## Installation
```sh
npm install @gemcook/react-native-animated-scroll-view
```
or yarn
```sh
yarn add @gemcook/react-native-animated-scroll-view
```
## Usage
Simple to use
```tsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { ScrollView } from 'react-native-animated-scroll-view';
const DATA = Array.from({ length: 30 }).map((_, index) => ({ id: index }));
const maxHeaderHeight = 150;
const minHeaderHeight = 50;
export default function App() {
return (
}
>
{DATA.map((item) => {
return (
{item.id}
);
})}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
listItem: {
width: '100%',
height: 60,
justifyContent: 'center',
alignItems: 'center',
},
animationHeader: {
backgroundColor: 'red',
height: '100%',
width: '100%',
},
});
```
It can be used not only for `ScrollView`, but also for `FlatList` or `SectionList`
```tsx
import {
ScrollView,
FlatList,
SectionList,
} from 'react-native-animated-scroll-view';
```
## Props
Each component inherits the Props of the original component
| Props | type | description | required | default |
| :----------------------- | :-------- | :------------------------ | :------- | :------ |
| AnimationHeaderComponent | ReactNode | AnimationHeader component | false | -- |
| animationHeaderStyle | ViewStyle | AnimationHeader style | false | -- |
| maxHeaderHeight | number | Header maximum height | true | -- |
| minHeaderHeight | number | Header minimum height | true | -- |
| floating | boolean | Whether or not the header should appear immediately when the user scrolls upward | false | false |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT