react-native-tab-view-header

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


$3

#### 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
`

$3




$3

`js
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 }) => (


{Index: ${index}}


),
keyExtractor: (_item, index) => index
}
}, {
key: 'second',
title: 'Second',
Wrapper: Animated.FlatList,
WrapperProps: {
data: Array(40).fill(1),
renderItem: ({ item, index }) => (


{Index: ${index}}


),
keyExtractor: (_item, index) => index
}
}]

const renderHeaderScroll = () => (
style={{ width: '100%', height: 50 }}
data={Array(40).fill(1)}
renderItem={({ item, index }) =>

{index + ''}

}
keyExtractor={(_, i) => i}
horizontal
/>
)

return (

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={() =>

style={{ height: 270, justifyContent: 'center', alignItems: 'center' }}
onPress={() => {
Alert.alert('Header Clicked');
}}>

{'Click Header'}


{renderHeaderScroll()}

}
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
/>

)
}

export default App;
`

$3

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




$3

- Add refresh control feature
- Add support for ` ` and ` `` (Currently only support FlatList, SectionList)
- Add Header Collapse snap effect

$3

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

##### Contribution

Pull requests and contributions are welcome