react-native-collapsible-header-views
v1.1.2
Published
Set of react-native views with collapsible headers
Downloads
2,852
Maintainers
Readme
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
import * as React from 'react';
import { View, Platform } from 'react-native';
import { CollapsibleHeaderScrollView } from 'react-native-collapsible-header-views';
export const Basic = () => (
<CollapsibleHeaderScrollView
CollapsibleHeaderComponent={<View style={{ backgroundColor: 'white' }} />}
headerHeight={100}
statusBarHeight={Platform.OS === 'ios' ? 20 : 0}
>
<View style={{ height: 2000, backgroundColor: 'wheat' }} />
</CollapsibleHeaderScrollView>
);
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
Props
CollapsibleHeaderScrollViewProps, CollapsibleHeaderFlatListProps, CollapsibleHeaderSectionListProps
CollapsibleHeaderComponent: React.ReactElement<unknown> | React.ComponentType<CollapsibleHeaderProps>
- React element or component/function that receivesCollapsibleHeaderProps
object. Required;headerHeight: number
- height ofCollapsibleHeaderComponent
. Required;statusBarHeight?: number
- height of status bar. Defaults to0
;headerContainerBackgroundColor?: string
- background color forCollapsibleHeaderComponent
and status bar container. Defaults to'white'
;disableHeaderSnap?: boolean
- passtrue
to disable header snap animations. Defaults tofalse
;headerAnimationDuration?: number
- duration of snap andshowHeader
,hideHeader
animations. Defaults to350
;clipHeader?: boolean
- iftrue
header will be clipped withoverflow: '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 newAnimatedInterpolation
object, whose input range corresponds to header translation and output range is specified byfrom
andto
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.
Methods
CollapsibleHeaderScrollView, CollapsibleHeaderFlatList, CollapsibleHeaderSectionList
animatedComponent: () => any | null
- returns result ofAnimated.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<T extends ScrollViewProps>(Component: React.ComponentClass<T>): React.ComponentClass<CollapsibleHeaderViewProps<T>>
- creates new component with collapsible header, it is assumed that input component has all ofScrollView
props.
Credits
- Key concepts were taken from collapsible-navbar demo by @janicduplessis