Extend react-native-tab-view to have shared collapsible headers
npm install react-native-tab-view-collapsible-headerExtend react-native-tab-view to have shared collapsible headers
Please check the base library before using this library.
``js
import * as React from 'react';
import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)
const FirstRoute = () => (
);
const SecondRoute = () => (
);
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 (
renderScrollHeader={() =>
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
`
More examples:Example
- The first step is to add the base library and its dependencies
`sh
yarn add react-native-head-tab-view react-native-gesture-handler
` `
- Then add this library sh`
yarn add react-native-tab-view-collapsible-header
| 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 |
---
CollapsibleHeaderTabView
- If your tabs component is react-native-scrollable-tab-view
`js `
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
- If your tabs component is react-native-tab-view
`js`
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
render the collapsible header
`js`
renderScrollHeader={()=>
##### 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`
Gets the animation value of the shared collapsible header. js `
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)_ scrollEnabled` _(boolean)_
If this height is reached, a refresh event will be triggered (onStartRefresh)
it defaults to 80
#####
Whether to allow the scene to slide vertically
---