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


Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.5
    3
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.5
    3

Package Sidebar

Install

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

Weekly Downloads

3

Version

0.0.5

License

ISC

Unpacked Size

12.5 kB

Total Files

7

Last publish

Collaborators

  • weimin