react-native-animated-scroll-view

A component that animates the header when the content is scrolled.

Installation

npm install @gemcook/react-native-animated-scroll-view

or yarn

yarn add @gemcook/react-native-animated-scroll-view

Usage

Simple to use

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 (
    <View style={styles.container}>
      <ScrollView
        maxHeaderHeight={maxHeaderHeight}
        minHeaderHeight={minHeaderHeight}
        AnimationHeaderComponent={<View style={styles.animationHeader} />}
      >
        {DATA.map((item) => {
          return (
            <View style={styles.listItem} key={item.id}>
              <Text>{item.id}</Text>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
}

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

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 to learn how to contribute to the repository and the development workflow.

License

MIT