React Native Head Tab View

After v3.0, the built-in Scrollable tabs component has been removed.We will only extend the other tabs component so that each Tab page has a shared collapsible header.

The following components are currently supported:
react-native-scrollable-tab-view
react-native-tab-view

For detailed usage, please refer to Example and Installation.

Features

v1.0

Scrollable tabs
All Tab pages share collapsible headers
Collapsible Headers controls the slide of the Tabview in the vertical direction
Collapsible Headers can respond to an event

v2.0

Add a drop-down refresh for the Tab page（v2.0~）
Add a drop-down refresh for the Tabview（v2.0.6~）
Add the new slide mode to Collapsible Headers and Tabview（v2.1.0~）

v3.0

Support for extension of other Tabs components, support for shared collapsible headers
The built-in Scrollable tabs component has been removed

Demo

Example

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

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>
        )
    }
}

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

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

Run the example

cd Example
yarn or npm install

//run Android 
react-native run-android

//run iOS 
cd ios
pod install
cd ../
react-native run-ios

Installation

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

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

The second step is to select the extension library based on the tabs component you are using

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

Install additional project react-native-scrollable-tab-view-collapsible-header

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

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

Install additional project react-native-tab-view-collapsible-header

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

Linking

dependencies： react-native-gesture-handler Refer to the official documentation

Documentation

CollapsibleHeaderTabView

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

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

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

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

CollapsibleHeaderTabView and SlideTabView extends the props for your 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

`overflowPull` (number)

It's the distance beyond the refreshHeight, the distance to continue the displacement, when the pull is long enough,
it defaults to 50.

`pullExtendedCoefficient` (number)

When the maximum drop-down distance is reached(refreshHeight+overflowPull), the refreshControl moves the distance for each pixel the finger moves The recommended number is between 0 and 1.

HPageViewHoc

import { HPageViewHoc } from 'react-native-head-tab-view'  
const HScrollView = HPageViewHoc(ScrollView)
const HFlatList = HPageViewHoc(FlatList)
const HSectionList = HPageViewHoc(SectionList)

//If you're using SlideTabView, then the second argument to HPageViewHoc should be passed {slideAnimated: true}. In this mode, use the RefreshControl control built into ScrollView.
//ex.
const HScrollView = HPageViewHoc(ScrollView, { slideAnimated: true })

`HScrollView`,`HFlatList` and `HSectionList` must all have the `index` property

`index` (number) (require)

The number of the screen.
If you use react-native-scrollable-tab-view, it should correspond to the number of the children element in the TabView.

If you use react-native-tab-view, it should correspond to the index of the navigationState of the TabView
Please check the Example .