react-native-tab-view-header

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

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 | | mountingPlaceholder | Function | Function that renders a loading view while the tab-header is been calculated |

TODOS

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

Reference

• react-native-tab-view
• @junghsuan collapsible-tabview

Contribution

Pull requests and contributions are welcome