Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukailun/react-native-animated-header-flat-list
A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.
https://github.com/lukailun/react-native-animated-header-flat-list
android animated flat-list ios react-native
Last synced: about 1 month ago
JSON representation
A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.
- Host: GitHub
- URL: https://github.com/lukailun/react-native-animated-header-flat-list
- Owner: lukailun
- License: mit
- Created: 2024-11-21T06:51:16.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-11-28T09:00:35.000Z (about 1 month ago)
- Last Synced: 2024-11-28T13:17:44.419Z (about 1 month ago)
- Topics: android, animated, flat-list, ios, react-native
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-animated-header-flat-list
- Size: 122 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-animated-header-flat-list
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
[](https://www.npmjs.com/package/react-native-animated-header-flat-list)
A React Native FlatList component with an animated collapsible header, featuring parallax effects, smooth title transitions, sticky component support, and customizable styles. Built with TypeScript and separate background/content layers in header.
English | [简体中文](./README_zh.md)
## Preview
iOS
Android
Web
## Features
- Animated collapsible header with parallax effect
- Smooth title transition from header to navigation bar
- Optional sticky component support
- Fully customizable header and title styles
- Separate background and content layers in header
- TypeScript support
## Installation
```sh
npm install react-native-animated-header-flat-list
```
## Required Peer Dependencies
This library requires the following peer dependencies to be installed in your project:
```sh
npm install @react-navigation/native @react-navigation/native-stack @react-navigation/elements react-native-reanimated react-native-safe-area-context
```
Make sure to follow the installation instructions for each dependency:
- [React Navigation](https://reactnavigation.org/docs/getting-started)
- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started)
- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)
### Additional Setup
For React Native Reanimated, Add `react-native-reanimated/plugin` plugin to your `babel.config.js`.
```js
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
CAUTION: `react-native-reanimated/plugin` has to be listed last.
## Usage
```tsx
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useCallback } from 'react';
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
import { AnimatedHeaderFlatList } from 'react-native-animated-header-flat-list';
export default function HomeScreen() {
const navigation = useNavigation>();
const data = Array.from({ length: 50 }, (_, index) => ({
id: `item-${index}`,
title: `Item ${index + 1}`,
description: 'Lorem ipsum dolor sit amet',
}));
const title = 'Animated Title';
const backgroundImageUrl =
'https://images.unsplash.com/photo-1579546929518-9e396f3cc809';
const avatarUrl = 'https://api.dicebear.com/7.x/avataaars/png?seed=John';
const HeaderBackground = useCallback(
() => (
),
[backgroundImageUrl]
);
const HeaderContent = useCallback(
() => (
),
[avatarUrl]
);
const StickyComponent = useCallback(
() => Sticky Item,
[]
);
const renderItem = useCallback(
({
item,
}: {
item: { id: string; title: string; description: string };
}) => (
{item.title}
{item.description}
),
[]
);
return (
);
}
const styles = StyleSheet.create({
headerBackground: {
backgroundColor: 'white',
height: 300,
width: '100%',
},
headerContent: {
height: 300,
width: '100%',
},
avatar: {
position: 'absolute',
top: 80,
left: 10,
backgroundColor: 'white',
width: 120,
height: 120,
borderRadius: 60,
borderWidth: 2,
borderColor: 'white',
},
headerTitle: {
position: 'absolute',
top: 200,
left: 10,
fontSize: 30,
fontWeight: 'bold',
color: 'white',
},
navigationTitle: {
fontSize: 18,
fontWeight: '600',
color: 'white',
},
stickyComponent: {
backgroundColor: 'white',
padding: 15,
borderWidth: 1,
borderColor: '#EEEEEE',
},
listItem: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: '#EEEEEE',
backgroundColor: 'white',
},
itemTitle: {
fontSize: 16,
fontWeight: '600',
},
itemDescription: {
fontSize: 14,
color: '#666666',
marginTop: 4,
},
});
```
### Props
| Prop | Type | Required | Description |
| ---------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| `navigation` | NavigationProp | Yes | React Navigation navigation prop |
| `title` | string | Yes | The title text that will animate between header and navigation bar |
| `headerTitleStyle` | StyleProp | No | Style object for the title in the header. Supports all Text style props. Position is relative to header container |
| `navigationTitleStyle` | StyleProp | No | Style object for the title in the navigation bar. Supports all Text style props except position-related properties |
| `HeaderBackground` | React.ComponentType | Yes | Component to be rendered as the header background |
| `HeaderContent` | React.ComponentType | No | Component to be rendered on top of the header background. Its opacity will automatically animate based on scroll position |
| `StickyComponent` | React.ComponentType | No | Optional component that sticks below the navigation bar |
| `parallax` | boolean | No | Enable/disable parallax effect for header background. Defaults to true |
| `...FlatListProps` | FlatListProps | - | All standard FlatList props are supported |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)