Skip to content

zyslife/react-native-scrollable-tab-view-collapsible-header

Repository files navigation

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, StyleSheet, Dimensions } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HScrollView } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'

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
            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-scrollable-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


About

Add collapsible headers for react-native-scrollable-tab-view

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published