Nameless Package Manager

    react-native-head-tab-view-v3
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.5 • Public • Published

    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

    demo_ios.gif

    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

    1. 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 .

    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 scene is refreshing

    renderRefreshControl (() => React.ReactElement)

    A custom RefreshControl for scene

    refreshHeight (number)

    If this height is reached, a refresh event will be triggered (onStartRefresh)
    it defaults to 100

    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.

    Install

    npm i react-native-head-tab-view-v3

    DownloadsWeekly Downloads

    2

    Version

    3.0.5

    License

    ISC

    Unpacked Size

    85 kB

    Total Files

    19

    Last publish

    Collaborators

    • weimin