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

1import React, { useState } from "react";
2import { Alert, Animated, TouchableOpacity, View, Text, FlatList, Dimensions } from "react-native";
3import { getStatusBarHeight } from "react-native-iphone-x-helper";
4import CollapsibleTabViewHeader from "react-native-tab-view-header";
5
6
7const WINDOW_HEIGHT = Dimensions.get('window').height;
8
9const App = () => {
10    const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
11
12    const slideData = [{
13        key: 'first',
14        title: 'First',
15        Wrapper: Animated.FlatList,
16        WrapperProps: {
17            data: Array(20).fill(1),
18            renderItem: ({ item, index }) => (
19                <View style={{ backgroundColor: index % 2 ? 'lightgray' : 'gray', height: WINDOW_HEIGHT / 2, justifyContent: 'center', alignItems: 'center' }}>
20                    <Text>
21                        {`Index: ${index}`}
22                    </Text>
23                </View>
24            ),
25            keyExtractor: (_item, index) => index
26        }
27    }, {
28        key: 'second',
29        title: 'Second',
30        Wrapper: Animated.FlatList,
31        WrapperProps: {
32            data: Array(40).fill(1),
33            renderItem: ({ item, index }) => (
34                <View style={{ backgroundColor: index % 2 ? 'orange' : 'pink', height: WINDOW_HEIGHT / 2, justifyContent: 'center', alignItems: 'center' }}>
35                    <Text>
36                        {`Index: ${index}`}
37                    </Text>
38                </View>
39            ),
40            keyExtractor: (_item, index) => index
41        }
42    }]
43
44    const renderHeaderScroll = () => (
45        <FlatList
46            style={{ width: '100%', height: 50 }}
47            data={Array(40).fill(1)}
48            renderItem={({ item, index }) =>
49                <Text style={{ backgroundColor: 'orange', width: 50, height: 50, textAlign: 'center' }}>
50                    {index + ''}
51                </Text>
52            }
53            keyExtractor={(_, i) => i}
54            horizontal
55        />
56    )
57
58    return (
59        <View style={{ flex: 1 }}>
60            <CollapsibleTabViewHeader
61                tabSlides={slideData}
62                tabIndex={currentSlideIndex} // if you want to control the current tab index
63                onIndexChange={i => {
64                    console.log('onIndexChange: ', i);
65                    setCurrentSlideIndex(i);
66                }}
67                renderTabBar={undefined} // only provide this if you want to render your custom tab bar
68                renderHeader={() =>
69                    <View style={{ height: 350, backgroundColor: 'red' }}>
70                        <TouchableOpacity
71                            style={{ height: 270, justifyContent: 'center', alignItems: 'center' }}
72                            onPress={() => {
73                                Alert.alert('Header Clicked');
74                            }}>
75                            <Text>
76                                {'Click Header'}
77                            </Text>
78                        </TouchableOpacity>
79                        {renderHeaderScroll()}
80                    </View>
81                }
82                enableRefresh={false} // enable refresh control
83                tabBarStickyPosition={getStatusBarHeight()} // position to stop the header and tab-bar
84                onTabBarStickyChange={sticky => null} // callback that triggers whenever the tab-bar stick/unstick
85            />
86        </View>
87    )
88}
89
90export 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