@gemcook/react-native-animated-scroll-view
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4 • Public • Published

    react-native-animated-scroll-view

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

    example1

    Installation

    npm install @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 --

    Contributing

    See the contributing guide to learn how to contribute to the repository and the development workflow.

    License

    MIT

    Install

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

    DownloadsWeekly Downloads

    11

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    79.4 kB

    Total Files

    51

    Last publish

    Collaborators

    • tfrcm
    • m.yamashita
    • k.okayama
    • s.nishimura
    • gcshiro