Novel Personal Mantras

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

    0.0.5 • Public • Published

    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

    demo_ios.gif

    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

    CollapsibleHeaderTabView
    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


    Install

    npm i react-native-scrollable-tab-view-collapsible-header-v0

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    ISC

    Unpacked Size

    12.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • weimin