react-native-scrollable-tab-view-collapsible-header

Extend react-native-scrollable-tab-view to have shared collapsible headers

Please check the base library before using this library.

Demo

Example

import * as React from 'react';
import {
    View,
    ScrollView,
} from 'react-native';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)

export default class ExampleBasic extends React.PureComponent<any> {

    render() {
        return (
            <CollapsibleHeaderTabView
                makeHeaderHeight={() => 200}
                renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
            >
                <HScrollView index={0}>
                    <View style={{ height: 1000, backgroundColor: '#ff4081' }} />
                </HScrollView>
                <HScrollView index={1}>
                    <View style={{ height: 1000, backgroundColor: '#673ab7' }} />
                </HScrollView>
            </CollapsibleHeaderTabView>
        )
    }
}

More examples：Example

Installation

• The first step is to add the base library and its dependencies

yarn add react-native-head-tab-view react-native-gesture-handler  

• Then add this library

yarn add react-native-scrollable-tab-view-collapsible-header

Documentation

import { CollapsibleHeaderTabView ,SlideTabView} from 'react-native-scrollable-tab-view-collapsible-header' 

CollapsibleHeaderTabView and SlideTabView extends the props for the tabs component by adding the CollapsibleHeaderProps

CollapsibleHeaderProps

renderScrollHeader (React.ComponentType | React.ReactElement | null) (require)

render the collapsible header

renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}

makeHeaderHeight (require)

The height of collapsible header.

<CollapsibleHeaderTabView
    makeHeaderHeight={() => 180}
/>

tabbarHeight

The height of collapsible tabbar
If this parameter is set, the initial rendering performance will be improved.

frozeTop

The height at which the top area of the Tabview is frozen

overflowHeight

Sets the upward offset distance of the TabView and TabBar

makeScrollTrans (scrollValue: Animated.Value) => void

Gets the animation value of the shared collapsible header.

<CollapsibleHeaderTabView
    makeScrollTrans={(scrollValue: Animated.Value) => {
        this.setState({ scrollValue })
    }}
/>

onStartRefresh (() => void)

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
Make sure to also set the isRefreshing prop correctly.

isRefreshing (boolean)

Whether the TabView is refreshing

renderRefreshControl (() => React.ReactElement)

A custom RefreshControl

refreshHeight (number)

If this height is reached, a refresh event will be triggered （onStartRefresh）

scrollEnabled (boolean)

Whether to allow the scene to slide vertically

makeRoomInRefreshing (boolean)

Does the ListView leave a space of "refreshHeight" while the ListView is pull-down. it defaults to true