npm: possibly marvellous

    react-native-tab-view-collapsible-header-prime
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    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

    demo_ios.gif

    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


    Install

    npm i react-native-tab-view-collapsible-header-prime

    DownloadsWeekly Downloads

    0

    Version

    2.0.2

    License

    ISC

    Unpacked Size

    8.07 kB

    Total Files

    6

    Last publish

    Collaborators

    • lucpk12