react-native-tab-view-collapsible-header

react-native-tab-view-collapsible-header

Extend react-native-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, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)

const FirstRoute = () => (
    <HScrollView index={0}>
        <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
    </HScrollView>
);

const SecondRoute = () => (
    <HScrollView index={1}>
        <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
    </HScrollView>
);

const initialLayout = { width: Dimensions.get('window').width };

export default function TabViewExample() {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'First' },
        { key: 'second', title: 'Second' },
    ]);

    const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
    });

    return (
        <CollapsibleHeaderTabView
            makeHeaderHeight={() => 200}
            renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
        />
    );
}

const styles = StyleSheet.create({
    scene: {
        flex: 1,
    },
});

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-tab-view-collapsible-header

Version

react-native-head-tab-view	react-native-scrollable-tab-view	react-native-tab-view-collapsible-header
v1 ~ v2	-	-
v3	v0	v0
v4-rc.1	v1	v1
v4-rc.2	v2	v2

Documentation

CollapsibleHeaderTabView

• If your tabs component is react-native-scrollable-tab-view

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

• If your tabs component is react-native-tab-view

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

CollapsibleHeaderTabView 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'}}/>}

headerHeight (optional)

The height of collapsible header.

tabbarHeight (optional)

The height of collapsible tabbar

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.ShareValue) => void

Gets the animation value of the shared collapsible header.

<CollapsibleHeaderTabView
    makeScrollTrans={(scrollValue) => {
        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）
it defaults to 80

scrollEnabled (boolean)

Whether to allow the scene to slide vertically