react-native-collapsible-header-views


ScrollView, FlatList, SectionList with collapsible headers + HOC for wrapping custom scrollables

Getting started

$ npm install react-native-collapsible-header-views --save

Demo

Android | iOS
:---------------------------------------------:|:---------------------------------------------:
|

Example

``javascript
import * as React from 'react';
import { View, Platform } from 'react-native';
import { CollapsibleHeaderScrollView } from 'react-native-collapsible-header-views';

export const Basic = () => (
CollapsibleHeaderComponent={}
headerHeight={100}
statusBarHeight={Platform.OS === 'ios' ? 20 : 0}
>


);
`

Description

Library exports three components CollapsibleHeaderScrollView, CollapsibleHeaderFlatList,
CollapsibleHeaderSectionList and a HOC withCollapsibleHeader for wrapping custom scrollable
components. Provided components support all props and instance methods of corresponding wrapped
components. Note that components are also wrapped with Animated.createAnimatedComponent under the
hood.

Reference

$3

#### CollapsibleHeaderScrollViewProps, CollapsibleHeaderFlatListProps, CollapsibleHeaderSectionListProps

- CollapsibleHeaderComponent: React.ReactElement | React.ComponentType -
React element or component/function that receives CollapsibleHeaderProps object. Required;
- headerHeight: number - height of CollapsibleHeaderComponent. Required;
- statusBarHeight?: number - height of status bar. Defaults to 0;
- headerContainerBackgroundColor?: string - background color for CollapsibleHeaderComponent and
status bar container. Defaults to 'white';
- disableHeaderSnap?: boolean - pass true to disable header snap animations. Defaults to false;
- headerAnimationDuration?: number - duration of snap and showHeader, hideHeader animations.
Defaults to 350;
- clipHeader?: boolean - if true header will be clipped with overflow: 'hidden' style.

Also some of ScrollView props have new defaults: bounces defaults to false, overScrollMode
to 'never' and scrollEventThrottle to 1.

#### CollapsibleHeaderProps

- interpolatedHeaderTranslation: (from: number, to: number) => Animated.AnimatedInterpolation -
creates new AnimatedInterpolation object, whose input range corresponds to header translation and
output range is specified by from and to params. Can be used for custom animations, like setting
opacity etc.;
- showHeader: (options: { animated: boolean } | unknown) => void - pushes header down with animation
enabled by default;
- hideHeader: (options: { animated: boolean } | unknown) => void - pulls header up with animation
enabled by default.

$3

#### CollapsibleHeaderScrollView, CollapsibleHeaderFlatList, CollapsibleHeaderSectionList

- animatedComponent: () => any | null - returns result of Animated.createAnimatedComponent applied
to original component;
- showHeader: (options: { animated: boolean } | unknown) => void - pushes header down with animation
enabled by default;
- hideHeader: (options: { animated: boolean } | unknown) => void - pulls header up with animation
enabled by default.

#### withCollapsibleHeader

- function withCollapsibleHeader(Component: React.ComponentClass): React.ComponentClass> -
creates new component with collapsible header, it is assumed that input component has all of ScrollView` props.

Credits

- Key concepts were taken from collapsible-navbar
demo by @janicduplessis