Skip to content

A tabview component with collapsible header. adapted with refreshable, scrollable and touchable header

Notifications You must be signed in to change notification settings

deflexable/react-native-tab-view-header

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-tab-view-header

A tabview component with collapsible header. adapted with refreshable, scrollable and touchable header

npm version

Getting Started

Install

react-native-tab-view-header is built upon react-native-tab-view

npm install react-native-tab-view-header react-native-tab-view --save

or using yarn

yarn add react-native-tab-view-header react-native-tab-view

Demo

Example

import React, { useState } from "react";
import { Alert, Animated, TouchableOpacity, View, Text, FlatList, Dimensions } from "react-native";
import { getStatusBarHeight } from "react-native-iphone-x-helper";
import CollapsibleTabViewHeader from "react-native-tab-view-header";


const WINDOW_HEIGHT = Dimensions.get('window').height;

const App = () => {
    const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

    const slideData = [{
        key: 'first',
        title: 'First',
        Wrapper: Animated.FlatList,
        WrapperProps: {
            data: Array(20).fill(1),
            renderItem: ({ item, index }) => (
                <View style={{ backgroundColor: index % 2 ? 'lightgray' : 'gray', height: WINDOW_HEIGHT / 2, justifyContent: 'center', alignItems: 'center' }}>
                    <Text>
                        {`Index: ${index}`}
                    </Text>
                </View>
            ),
            keyExtractor: (_item, index) => index
        }
    }, {
        key: 'second',
        title: 'Second',
        Wrapper: Animated.FlatList,
        WrapperProps: {
            data: Array(40).fill(1),
            renderItem: ({ item, index }) => (
                <View style={{ backgroundColor: index % 2 ? 'orange' : 'pink', height: WINDOW_HEIGHT / 2, justifyContent: 'center', alignItems: 'center' }}>
                    <Text>
                        {`Index: ${index}`}
                    </Text>
                </View>
            ),
            keyExtractor: (_item, index) => index
        }
    }]

    const renderHeaderScroll = () => (
        <FlatList
            style={{ width: '100%', height: 50 }}
            data={Array(40).fill(1)}
            renderItem={({ item, index }) =>
                <Text style={{ backgroundColor: 'orange', width: 50, height: 50, textAlign: 'center' }}>
                    {index + ''}
                </Text>
            }
            keyExtractor={(_, i) => i}
            horizontal
        />
    )

    return (
        <View style={{ flex: 1 }}>
            <CollapsibleTabViewHeader
                tabSlides={slideData}
                tabIndex={currentSlideIndex} // if you want to control the current tab index
                onIndexChange={i => {
                    console.log('onIndexChange: ', i);
                    setCurrentSlideIndex(i);
                }}
                renderTabBar={undefined} // only provide this if you want to render your custom tab bar
                renderHeader={() =>
                    <View style={{ height: 350, backgroundColor: 'red' }}>
                        <TouchableOpacity
                            style={{ height: 270, justifyContent: 'center', alignItems: 'center' }}
                            onPress={() => {
                                Alert.alert('Header Clicked');
                            }}>
                            <Text>
                                {'Click Header'}
                            </Text>
                        </TouchableOpacity>
                        {renderHeaderScroll()}
                    </View>
                }
                enableRefresh={false} // enable refresh control
                tabBarStickyPosition={getStatusBarHeight()} // position to stop the header and tab-bar
                onTabBarStickyChange={sticky => null} // callback that triggers whenever the tab-bar stick/unstick
            />
        </View>
    )
}

export default App;

PropTypes

Property Type Description
tabSlides Array Array containing data pertaining to each tab slide
onIndexChange Function Called whenever the current tab index changes
renderTabBar Function Function that renders your custom tab-bar component
renderHeader Function Function that renders your custom header component
tabIndex number The default visible slide index of the tab view
headerHeight number The height of the header (Optional but speedup tabview render when provide together with tabBarHeight)
onScrollY Function Listens to the scroll offset of the tabview
tabBarStickyPosition number The position in which the tab-bar should stop
onTabBarStickyChange Function Called whenever the tab-bar stick/unstick to it position
onHeaderHeightChanged Function Called whenever the header height changes
renderLabel Function Function that renders the tab-bar label instead of the entire tab-bar

TODOS

  • Add refresh control feature
  • Add support for <View /> and <ScrollView /> (Currently only support FlatList, SectionList)
  • Add Header Collapse snap effect

Reference

Contribution

Pull requests and contributions are welcome

About

A tabview component with collapsible header. adapted with refreshable, scrollable and touchable header

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published